微信小程序

103 阅读2分钟

一、小程序和web开发的区别

  • 网页开发中渲染线程脚本线程是互斥的,不能穿插执行,只能串行。即其中一个线程执行时,另一个只能挂起等待。这也是脚本线程占用主线程时间过长,可能会导致页面失去响应的原因。
  • 小程序的渲染线程和逻辑线程是分开的。渲染线程使用WebView进行UI的渲染呈现,逻辑层是用JS引擎进行逻辑代码。在不同的环境上,webView和JS引擎有所不同。 image.png

二、小程序的渲染层与逻辑层通信

image.png

小程序的渲染层和逻辑层不是直接传数据或事件的,而是由Native(微信客户端)作为中间媒介进行转发。

通信过程就是典型的事件驱动模式

  • 渲染层通过与用户的交互触发特定的事件event;
  • event被传递给逻辑层
  • 逻辑层通过逻辑处理、数据请求等操作,把处理好的数据传递给渲染层;
  • 最后渲染层将data渲染为可视化的ui。

三、渲染层的界面渲染

image.png

宿主环境会把WXML转换成对应的JS对象。

在逻辑层发生数据变更时,通过setData方法把数据从逻辑层传递到渲染层,经过前后对比,将差异内容应用到原有的DOM树上,渲染出更新后的ui界面。

四、生命周期

微信小程序的生命周期包括APP、Page、Component。

1、APP生命周期

  • onLaunch: 小程序初始化时触发,只会执行一次。
  • onShow: 启动或从后台进入触发。
  • onHide: 行前台进入后台时触发。
  • onError: 发生错误时触发。

2、Page生命周期

  • onLoad: 页面加载时触发;
  • onShow: 页面显示时触发;
  • onReady: 页面初次渲染完成时触发;
  • onHide: 页面隐藏时触发;
  • onUnload: 页面卸载时触发。

3、Component生命周期

  • created:组件实例被创建时触发
  • attached:组件被插入到页面时触发
  • ready:组件布局完成时触发
  • detached:组件被移除出页面时触发

五、自动化构建部署

基于jenkins webhook 实现自动化部署微信

六、分包

在 app.json subPackages 字段声明项目分包结构,分包后packageA加载不到packageB中的组件或js文件,可以使用分包异步化拿到。 基础能力 / 分包加载 / 分包异步化