小程序原理与优化

一.渲染层和逻辑层如何进行交互

1.1小程序运行环境

不同的运行环境也带来了一些差异性，所以我们完成小程序后也应该尽量在真机上测试

1.2渲染页面的技术选型

对于前端的渲染页面，分别有几种不同的技术选型方式

• 纯客户端原生技术（android，ios）
• 纯Web技术（html,css,js）
• 纯客户端原生技术与web技术结合的混合开发（Hybrid）

而小程序就是使用了第三种，混合开发的方式，来进行开发

为什么不使用前两种？

• 小程序的运行环境是微信，如果用原生开发，小程序代码每次都需要和微信代码一起发布，非常麻烦
• 如果使用纯web技术，纯web开发在复杂的交互上，存在一些性能问题，因为渲染层和逻辑层都是在一个单线程上执行的，会出现一些业务和渲染抢占资源的情况

1.3小程序的渲染层和逻辑层

小程序如果通过混合开发技术将渲染层和逻辑层进行交互？

渲染层触发事件 (传递) --> 系统层 （转发） --> 逻辑层进行处理

逻辑层处理完数据（返回给）--> 系统层 (传递给) --> 渲染层

所以在小程序中，有一个很忌讳的操作，就是频繁的进行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 则默认所有页面都能被索引 ，其他配置查看官方文档

原文：https://www.cnblogs.com/JCDXH/p/11881895.html