canvas封装

待完成文章

Author: pangxiaohua

小程序的canvas封装.md

@@ -0,0 +1,67 @@
+背景：由于小程序没有直接分享到朋友圈的接口，但一些日常操作又需要用到分享到朋友圈等。于是，
+只能采取“曲线救国”的路线，生成一张精美的卡片等，让用户分享朋友圈。
+
+## 1.关于canvas的一些坑
+
++ 1.canvas组件在hidden情况下依然可以执行绘制操作，并且不占据空间。
++ 2.canvas组件在hidden情况下需要指定width和height，在hidden情况下，无法对canvas的width和height进行动态调整
++ 3.要想动态调整canvas的width和height，需要使用wx:if="{{}}"来配合。
+注：也就是使用控制条件，平时不显示，在需要绘制的时候才显示进行绘制图片(可以放到页面底部)
+
+## 2.canvas的封装
+
+canvas绘制分享图片的操作可能在一个项目中要用上好几次，或者很多项目都需要用到。这时候我们就可以把它封装
+起来，到用的时候直接调用。也省的每次都编写重复的代码，还可能出错。
+
+### 2.1 制定目标
+
+我们对canvas相关操作进行封装，其实是为了生成精美的分享图片(其中可能涉及到文字和图片的绘制)。
+所以，目标我们有了。基于这个目标，我们大概需要如下属性。
+
+### 2.2 敲定参数
+
+- 1.canvasId  // string类型
+- 2.offsetx   // number类型。也就是wx.canvasToTempFile()中的x，这个x不一定是0，所以我们设为这个参数名。
+- 3.offsety   // number类型。同上
+- 4.width     // number类型。wx.canvasToTempFile()中的width
+- 5.height    // number类型。wx.canvasToTempFile()中的height
+- 6.destWidth   // number类型。wx.canvasToTempFile()中的destWidth
+- 7.destHeight  //number类型。wx.canvasToTempFile()中的destHeight
+
+因为要绘制图片或者文字。所以，除此之外，我们还需要，imgList和wordsList
+
+- 8.imgList  // array类型
+- 9.wordsList  // array类型
+
+imgList中，每个数据都应是1个需绘制图片的所有信息，所以它应该是json数据格式的，即{}，wordsList同理
+那么imgList就需要如下数据且都是必须传入的(如果传入图片的话)
+
+- 8.imgList   // array类型
+	+ 1.source   // 图片地址
+	+ 2.x        // 绘制的起点位置的x轴
+	+ 3.y		 // 绘制的起点位置的y轴
+	+ 4.width 	 // 绘制的width
+	+ 5.height   // 绘制的height
+
+同理，wordsList就需要如下数据，
+- 9.wordsList   // array类型
+	+ 1.word    // 即需要绘制的问题
+	+ 2.x		// 绘制的位置点x
+	+ 3.y		// 绘制的位置点y
+	+ 同时可能还需要设置其他信息，如下(非必须)
+	+ 4.font 	// 要绘制的文字大小size,用于setFontSize()
+	+ 5.textAlign 	// 文字的水平对齐方式，仅为 'left' 'center' 'right'
+	+ 6.textBaseLine  // 文字的纵向对齐方式，仅为 'top' 'bottom' 'middle' 'normal'
+	+ 7.textColor	 // 文字的颜色
+
+由于wordsList中存在非必须传入的一些属性，当不传入时，那么就可能会出现一些问题。于是设定一些
+可以复用的参数，接着前面的wordsList下来
+
+- 9.wordsList   // array 类型
+- 10.font    // 全局的font，不传入时，默认为35
+- 11.textAlign  // 全局的textAlign ，不传入时，默认为center
+- 12.textBaseLine  // 全局的textBaseLin，不传入时，默认为middle
+- 13.textColor     // 全局的textColor，不传入时，默认为 black
+
+至此，所需要的参数，基本敲定。但我们不可能在调用方法的时候传入几十个参数。所以，我们就把这些参数，
+用{}包起来(也就是接收一个{}格式的参数)，调用的时候把所有数据用{}包起来传进来即可。

微信官方体验建议.md

@@ -0,0 +1,74 @@
+# 小程序体验评分及建议
+
+
+### 1.小程序应避免出现任何的JavaScript异常
+
+出现JavaScript异常可能导致小程序的交互无法进行下去，我们应该追求零异常，保证小程序的高鲁棒性和高可用性。
+
+### 2.网络图片资源应开启HTTP缓存控制
+
+开启HTTP缓存控制后，下一次加载同样的图片，会直接从缓存中读取，提高加载速度。
+
+### 3.合理控制图片的大小
+
+图片太大会增加内存的消耗，应根据显示区域大小合理控制图片大小。
+
+### 4.小程序所有请求应响应正常
+
+请求失败可能导致小程序的交互无法进行下去，应当保证所有请求都能成功。
+
+### 5.所有请求的耗时不应太久
+
+请求的耗时太长会让用户一直等待甚至离开，应当优化好服务器处理时间，减少回包大小，让请求加快响应。
+
+### 6.避免短时间内发起太多的图片请求
+
+短时间内发起太多图片请求会触发浏览器并行加载的限制，可能导致图片加载慢，用户一直处理等待。应该合理
+控制数量，可考虑使用雪碧图技术或在屏幕外的图片使用懒加载 [更多学习]('#')
+
+### 7.避免短时间内发起太多的请求
+
+短时间内发起太多请求会触发小程序并行请求数量的限制，同时太多的请求也可能导致加载慢等问题，
+应该合理控制请求数量，甚至做到请求的合并。
+
+### 8.避免setData的数据过大
+
+由于小程序运行逻辑线程与渲染线程之上，setData的调用会把数据从逻辑层传到渲染层，数据太大会增加通信时间。
+
+### 9.避免setData的调用过于频繁
+
+setData接口的调用涉及逻辑层与渲染层间的线程通信，通信过于频繁可能会导致处理队列阻塞，
+界面渲染不及时而导致卡顿，应避免无用的频繁调用。
+
+### 10.避免将未绑定在WXML的变量传入setData
+
+setData操作会引起框架处理一些渲染界面相关的的工作，一个未绑定的变量意味着与界面渲染无关，传入setData
+会造成不必要的渲染消耗。
+
+### 11.合理设置可点击元素的相应区域大小
+
+我们应该合理地设置好可点击元素的响应区域大小，如果过小会导致用户很难点中，体验很差。
+
+### 12.避免渲染界面的耗时过长的情况
+
+渲染界面的耗时过长会让用户觉得卡顿，体验较差，出现这一情况时，需要校验是否同时渲染的区域太大。
+
+### 13.避免执行脚本的耗时过长的情况
+
+请求的耗时太长会让用户一直等待甚至离开，应当优化好服务器处理时间，减少回包大小，让请求加快响应。
+
+### 14.避免定时器未跟随页面回收
+
+定时器是全局的，并不是跟页面绑定的，当页面因后退被销毁时，定时器应手动回收。
+
+### 15.对网络请求做必要的缓存以避免多余的请求
+
+发起网络请求总会让用户等待，可能造成不好的体验，应尽量避免多余的请求，比如对同样的请求进行缓存。
+
+### 16.wxss覆盖率较高，较少或没有引入未使用的样式，
+
+我们应该按需引入wxss资源，如果小程序中存在大量未使用样式，会增加小程序包的大小，从而在一定程度上影响加载速度。
+
+### 17.文字颜色与背景色搭配较好，适宜的颜色对比度更方便用户阅读
+
+文字颜色与背景色需要搭配得当，适宜的颜色对比度可以让用户更好地阅读，提升小程序的用户体验。