一.渲染层和逻辑层如何进行交互
1.1小程序运行环境
| 运行环境 | 逻辑层 | 渲染层 |
|---|---|---|
| ios | javascriptCore | WKWebView |
| 安卓 | V8 | 定制内核 |
| 小程序开发者工具 | NW.js | chromium Webview |
不同的运行环境也带来了一些差异性，所以我们完成小程序后也应该尽量在真机上测试
1.2渲染页面的技术选型
对于前端的渲染页面，分别有几种不同的技术选型方式
- 纯客户端原生技术（android，ios）
- 纯Web技术（html,css,js）
- 纯客户端原生技术与web技术结合的混合开发（Hybrid）
而小程序就是使用了第三种，混合开发的方式，来进行开发
为什么不使用前两种？
- 小程序的运行环境是微信，如果用原生开发，小程序代码每次都需要和微信代码一起发布，非常麻烦
- 如果使用纯web技术，纯web开发在复杂的交互上，存在一些性能问题，因为渲染层和逻辑层都是在一个单线程上执行的，会出现一些业务和渲染抢占资源的情况
1.3小程序的渲染层和逻辑层
| (渲染层webview) | （逻辑层JsCore） |
|---|---|
| WXML,WXSS | js，微信Api |
| Native层（系统层） |
|---|
| 微信能力（定位，扫码），离线存储，网络请求。。。 |
小程序如果通过混合开发技术将渲染层和逻辑层进行交互？
渲染层触发事件 (传递) --> 系统层 （转发） --> 逻辑层进行处理
逻辑层处理完数据（返回给）--> 系统层 (传递给) --> 渲染层
所以在小程序中，有一个很忌讳的操作，就是频繁的进行setData，这样会造成系统卡死
二.小程序的运行机制和更新机制
2.1 小程序运行机制
- 冷启动和热启动
- 冷启动就是其一次打开小程序或者被微信销毁过再一次打开，热启动当前正在运行小程序或者切换了后台几分钟之内的状态
- 前台与后台
- 前台就是我们正处于的界面，当把切换到另一个程序的时候，小程序就会被切换到后台
- 小程序销毁
- 当小程序进入后台后会维持一段运行时间，在被销毁，到了时间会被微信主动销毁
2.2小程序更新机制
- 当我们开发完微信小程序的时候，会编译发布到微信服务器
- 当我们首次加载时候会向服务端请求数据和资源包，在本地运行
- 当我们冷启动的时候，会读取缓存，然后自动检查更新
- 当我们热启动的时候，如果需要更新，就需要在页面加载的调用官方的API来进行更新
三.小程序性能与体验优化
- 合理设置可点击元素的响应区域的大小
- 避免渲染页面耗时过长（减小渲染区域）
- 避免执行脚本的时间过长（对脚本逻辑进行优化）
- 对网络请求做有必要的缓存，以避免多余的请求
- 不要引入未被使用的wxss样式
- 所有资源请求建议使用HTTPS
- 在小程序中及时回收定时器
- 避免使用:active伪类来实现点击态（在小程序中体验不好，滑动和滚动时点击态不会消失）
- 可以使用小程序的内置属性hover来实现点击态
- 滚动区域可以开启惯性滚动增强用户体验
- 通常安卓内置开启了惯性滚动
- ios可以配置：-webkit-overflow-scrolling : touch
- 尽量将简单的图片替换成iconfont字体图标来显示
- setData
- 如果某个操作对setData进行频繁的操作，我们应该结合业务需求，优化代码
- 举例：微信小程序内置播放器播放音乐时，会不停的触发onTimeUpdata方法，我们将其进行播放时间与滚动进度联动的时候，不应该直接设置setdata，我们可以设置取到当前的秒数，判断当前如果秒数没有变化，不需要进行setdata，这样，我们就避免了当毫秒数也变化时，多余的设置了setData
- 避免将未绑定的WXML的变量传入setData
- 如果某些变量，它不需要将其显示在渲染层，我们可以将变量设置在头部，而不是setData中
- 小程序内置性能优化方案
- 打开控制台，点击Audits，运行，然后手动进行小程序所有操作，小程序会自动给出一些优化方案
- 也可以在右上角的详情当中，设置自动运行体验评分
四.详解setData
官方：setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值（同步）
什么意思？为什么又是异步又是同步？
我们在data中定义一个变量
data：{
testData：0
}
然后再取设置和显示这个值
console.log(this.data)
this.setData({
testData:1
},()=>{
console.log('回调执行')
})
console.log(this.data)
结果：
//0
//1
//回调执行
意思就是，设置值的时候，setData将异步的发送数据到视图层，但是刚设置完，就可以同步的马上在当前页面通过this.data获取到值
在修改setdata的值的时候，需要注意什么？
五.场景值scene的作用与应用场景
进入小程序有几十种方式，而每一种进入的方式就带有不同的scene值
- 在小程序的app.js中，有几个生命周期函数，onLaunch（）监听小程序初始化，onShow（）监听小程序切前台等
- 我们打印出这些函数中带有的参数onLaunch（options），，onShow（options），会发现其中都带有scene值
- 我们可以根据不同的scene值来对用户进行分流和数据统计
- 页面收录sitemap.json的作用和使用方法
六.页面收录sitemap.json的作用与使用方法
类似与网页中的seo，小程序也可以通过内容被搜索到
在小程序信息中的查看详情配置（页面收录设置）
没有 sitemap.json 则默认所有页面都能被索引 ，其他配置查看官方文档