微信小程序开发总结

概述

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。在公司有开发过几个微信小程序，前前后后已有一年时间，收获颇多，也踩过许多坑，也知道自己的短板在哪。

小程序框架

• 页面 Page
• 组件 Comonent
• 模块化 require， module， exports
• wxml
• wxss
• wxs

宿主环境

事件系统

事件是视图层到逻辑层的通讯方式。

• WXS函数响应事件：有频繁用户交互的效果在小程序上表现是比较卡顿的交互，应使用WXS响应事件 。让开发者的代码运行在视图层。
  在wxml调用：

在wxs写法：

module.exports = {
   touchmove: function(event, instance) {
       console.log('log event', JSON.stringify(event))
   },
   propObserver: function(newValue, oldValue, ownerInstance, instance) {
       console.log('prop observer', newValue, oldValue)
   }
}

• 简易双向绑定

WXML API

• IntersectionObserver：用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
• NodesRef： 用于获取 WXML 节点信息的对象
• SelectorQuery：查询节点信息的对象

WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

• ES6的语法不能使用；ex：数组没有forEach,map, indexOf方法

setData的使用及注意事项

不是wxml中使用的变量，不要使用setData，setData不要频繁使用
参考小程序性能优化

小程序窗口高宽获取及menurect

只有在页面load之后，才能够准确获取页面各项的高度

优化

• trace性能分析： 需安装安卓调试工具：ADB
• audits体验评分工具
• 小程序助手

参考资料

小程序开发指南