微信小程序知识点

8-1 微信小程序渲染层和逻辑层的交互原理

网页开发和小程序开发的渲染层和逻辑层之间的比较：

image.png

dom操作就是document.getElement。。。之类的，
之前流行的jQuery就是提供封装了好多dom操作的api

渲染层：

小程序指wxss，wxml，网页指HTML,CSS

逻辑层:（逻辑，又是通常说的js脚本）

指js
在网页开发中，渲染层和逻辑层是互斥的，就是在渲染页面的时候，不可能执行js脚本文件，执行js文件的时候，不能渲染页面。
比如在有些js文件里面有特别复杂的运算，需要运行很长时间，这样的话，在长时间运行js脚本的时候，就会使页面失去响应。
而在小程序中，是分开的，因为渲染层和逻辑层运行在不同的线程中，

渲染页面的技术选型

• 纯客户端原生技术

IOS和安卓
开发iosAPP要掌握Objective-C
安卓APP要掌握java技术

• 纯web技术

html，css

• 用客户端原生技术与web技术结合的混合技术（hybrid）（小程序使用）

• 小程序页面和逻辑层的交互要通过微信系统层。所以小程序不要频繁的setdata， 还有，如果某个变量不需要在页面展示，那么就不要定义在data里面。直接定义在page外面就可以了

  
  
  渲染层和逻辑层的交互

onlaunch生命周期函数，运行小程序时，会执行一次

8-2，小程序运行机制和更新机制

image.png

8-3 小程序性能与体验优化

• 合理设置可点击元素的响应区域大小

• 避免渲染页面耗时过长
  解决办法：通过检测当前渲染区域是否过大，适当减小渲染区域

• 避免执行脚本耗时过长
  解决办法：通过检查脚本逻辑是否有问题，进行优化

• 对网络请求做必要的缓存以避免多于的请求
  如果一直请求同样的一个网络请求，那就缓存一下。

• 不要引入未被使用的wxss样式
  已经不再使用的wxss样式文件应该删除掉

• 文字颜色与背景颜色搭配较好，适宜的颜色对比度更方便用户阅读

• 所有的资源请求建议使用https
  现在用的比较多的请求方式有http和https
  https更安全
  http是明文的传输，容易被篡改内容风险。

• 不要使用废弃接口

• 避免过大的wxml节点数目

  • 一个页面少于1000个wxml节点
  • 节点数深度少于30层
  • 子节点树不大于60个

• 避免将不可能被访问到的页面打包在小程序包里
  如果小程序包很大，会影响加载速度。

• 及时回收定时器，
  在小程序中，定时器是全局的，不是随着页面去绑定的，当页面后退销毁时，定时器我们应该手动去回收

• 避免使用：active伪类来实现点击态
  应该使用小程序内置属性，hover，而不是用active

• 滚动区域可开启惯性滚动以增强体验

  • 安卓自带滚动效果
  • ios上:-webkit-overflow-scrolling:touch

• 避免出现任何JavaScript异常

• 所有的请求应响应正常

• 所有的请求耗时不应该太久
  比如加个showmodal让用户知道加载中

• 避免短时间内发起太多的图片请求
  太多图片短时间内会触发浏览器并行加载的限制，可能会导致图片加载的很慢，用户需要一直等待
  有些图标用iconfont字体图标，会提高速度

• 避免短时间内发起太多的请求

setData注意事项

• 避免setData的数据过大
• 避免setData的调用过于频繁
• 避免将未绑定在wxml的变量传入到Data中

在微信开发者工具中
调试器——>Audits里面有自带的小程序运行体验检查，定位和识别小程序运行过程中的体验问题，从性能、体验、最佳实践三个维度对小程序进行分析，同时提供优化建议。

image.png

还可以在本地设置中找到“自动运行体验评分选项”勾选即可，也可以在调试器Audits中找到体验评分。

image.png