导航

• 从继承角度解析html元素及知识关联
• JavaScript之事件原理完整篇
• 小程序优化之组件及wxs使用技巧

一、利用组件来优化

二、利用wxs来优化

• 解密wxs的前世，从html的本质谈起

• html其实会转化为JavaScript(DOM对象)，所以html其实本质是js对象
• 小程序采用自己的标签，用精简版wxs编写的xml。所以其实小程序页面是wxs对象
• 但有需要js的完整能力，于是有两个独立线程(逻辑层js和渲染层wxs)
• wxs和js是独立隔离的，并用Native来做中转，所以存在延时(需要通信)

• js对wxs通信

• setData()/其实onload时js执行了this.setData(data)=>所以设置值到页面是异步的

• 其它比如wx.showToast、wx.setNavigationBarTitle这类和界面相关的，相当于是给页面默认的一个toast控件、NavigationBa，setdata() √

• 获取视图、节点信息 wx.getSystemInfo、wx.createSelectorQuery、wx.createIntersectionObserver=>所以获取视图节点信息是异步的

• wxs对js通信

• 事件 <==页面本质是js/wxs，且继承于事件==>页面的事件是属于渲染层的
  像page生命周期ready是页面事件，其它是微信赋予js的事件，不是wxs的原生事件
  官网生命周期介绍

• setData({},()=>{})的第二个参数，是setData的回调函数，相当于事件
• 重复一遍：页面的事件，如果执行函数在js中，则执行是wxs对js通信

• wxs中执行callMethod可以调用js的函数数据：√

• 那wxs能做什么？：如果某项操作，页面交互比重大于js操作(或者交互方面操作多于js的操作)，则推荐使用wxs

• 由上图可知：小程序最大的优化点就是这两条线的通信
• js对wxs的通信部分的优化：

• 避免频繁setdata
• 更新局部数据：setData({
  ['List[' + index + ']']: newItem,
  'obj.name':'hcl'
  })
• 如果页面交互比重大于js操作，则获取页面节点信息操作可以让wxs来执行wxs优化点之一 √

• wxs对js的通信部分优化：

• 页面事件，如果页面交互比重大于js操作，则推荐事件绑定wxs函数

1.事件绑定js中的函数：
catch:tap="submitTap"
// 注意：这里绑定函数其实是字符串，执行时是根据这个字符串查找js中的对应函数

2.事件绑定wxs中的函数
catch:tap="{{m1.submitTap}}"
//这里是执行m1作用域中的submitTap函数。注意这里是变量。、
//对比以上，可以理解为还有个main作用域，是wxs中通信js的副本。

• 其它如定时器/倒计时、动画 ，如果页面交互比重大于js操作也推荐采用wxs

---

总结
wxs是小程序页面原生脚本，所以页面相关的处理，wxs是同步的实时的
如果你的小程序纯粹js来处理来处理逻辑，wxs是可以优化的方向！
wxs除了用于较少通信，还可以用于过滤器filter:
小程序页面xml本质就是wxs嘛，所以可以直接访问wxs数据，而不能同步访问js数据

• 左右互搏--老顽童

• 本篇文章其实是认识小程序页面的原理，及双线程的原因及认识js和wxs直接的关系
• 目的是希望：js和wxs能够左右互搏，两只手都发挥最大作用，进而提升小程序的效率！