小程序

为什么小程序不使用浏览器的线程模式？而使用双线程模式？

浏览器并不是单线程而是多线程的
GUI渲染线程(图形用户界面)：负责把html渲染成可视化ui  
Javascript引擎线程：负责解析和运行代码逻辑
定时触发器线程：负责处理setTimeout/setInterval定时器
web Worker由于worker的线程安全特性，worker内的Javascript代码无法获取window和document对象也无法操作dom

shadow dom 是Web components规范的一部分，将shadowRoot的模式设置为closed就可以禁止获取到ShadowRoot节点，从而也无法操作内部的dom

shadow DOM兼容性更差，所以使用web Worker

小程序的双线程指的就是渲染线程和逻辑线程，这两个线程分别承担ui的渲染和执行Javascript代码的工作,由Native作为中间媒介进行转发

渲染线程使用webview=》渲染ui
逻辑线程=》逻辑处理，数据请求，接口调用
采用逻辑驱动通信方式
渲染层（视图层），通过用户的交互触发指定的事件event，event传递给逻辑层
逻辑层继而通过一系列操作（逻辑处理、数据请求，接口调用）将加工好的数据data传递给渲染层，渲染层将data渲染成ui
小程序双线程规避了web worker的性能，达到了与之相同的安全
双线程受限于浏览器现有的进程和线程管理模式

小程序登录流程
六个术语
code 临时登录凭证  在客户端通过wx.login api获取code,然后通过http请求发送给开发者服务器，有效期5分钟，并且只能使用一次
appid 小程序id
appsecret   小程序秘钥，可以在微信公众平台的后台管理系统中获取，携带此信息的网络请求限制在只能通过开发者服务器发送给微信接口服务
openid  登录成功后用户的唯一id

session_key   对用户数据进行加密的签名的秘钥
token  登录令牌，指自定义登录态

小程序自定义组件

 每个自定义组件资源必须包括四个基本文件
1用于描述组件结构的wxml文件

2用于描述组件样式的wxss文件

3用户描述组件行文的js文件(生成组件的构建实体

Component({
   /*behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”*/
   behaviors:[
     
   ],
   /*用于接收外层传入的数据*/   
   properties:{
    
   },
   /*定义组件私有属性*/
   data:{
     
   },
   lifetimes:{
      // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
     attached: function () { },
     moved: function () { },
     detached: function () { },
   },
   // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
   attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
   pageLifttimes:{
        // 组件所在页面的生命周期函数
       show: function () { },
       hide: function () { },
       resize: function () { },
   },
   methods:{
      //组件自定义方法
   }      
})

可用的全部生命周期如下表所示。

生命周期	参数	描述	最低版本
created	无	在组件实例刚刚被创建时执行	1.6.3
attached	无	在组件实例进入页面节点树时执行	1.6.3
ready	无	在组件在视图层布局完成后执行	1.6.3
moved	无	在组件实例被移动到节点树另一个位置时执行	1.6.3
detached	无	在组件实例被从页面节点树移除时执行	1.6.3
error	Object Error	每当组件方法抛出错误时执行	2.4.1

4用于声明组件配置的json文件（在json文件中必须声明组件为自定义组件）
{

　　"component":true

}
小程序自定义组件之间通信流程
子组件通过抛出事件将数据传递给父组件
父组件通过properties将数据传递给子组件

借助小程序开发工具提升小程序性能
小程序开发工具里面的
Audits-》运行就可以出现评分
1.避免过大的wxml节点数目
wxml是基于HTML的一种DSL，常规组件最终会被小程序的渲染线程通过webview渲染成HTML，大部分性能优化方案均适用于wxml
尽量减少节点数目
html=>html解释器
js =>javascript引擎
上面两者解析成dom树，DIff算法是基于这种数据进行的树结构的复杂度会直接影响算法的执行耗时
css =>css解释器
2.执行脚本耗时过长
3小程序加载完首次渲染时间（JavaScript是单线程的，长时间占用会影响交互行为的时间或者卡顿）

加快首屏加载的时间

代码优化
降低wxml的结构复杂度
降低首次渲染的数据规模
展示手机加载loading
网络优化
减少网络请求所携带的数据体积
提高服务器处理网络请求的速度
4小程序运行过程中处理用户交互时期
优化setData
避免setData调用过于频繁
避免setData数据量太大

微信小程序在基础库2.2.1开始支持使用第三方npm包
小程序通过微信IDE将原始的npm构建成小程序可用的miniProgram_npm
小程序构建npm过程：

将原始模块的所有散列文件打包成一个单js文件，然后将这个js文件作为模块入口暴露出去

统一构建和开发一致性可以从以下方向作为入口
1管理第三方npm模块
2使用Typescript 编写源码
3使用预处理器编写模块化的样式

4使用lint工具统一源码规范

5图片压缩

6多环境支持

 小程序自定义测试组件miniprogram-simulate工具