前端进阶 -- 微信小程序基础

BillBill -
前端进阶 -- 微信小程序基础
什么是小程序小程序页面本质上是网页,使用了hybrid技术进行原生与web的混合开发,hybrid技术使用webview做渲染,通过js bridge作为web与native的数据交互桥梁使用技术栈与网页开发是一致的,都用到HTML、CSS、JS
区别:不支持浏览器API,比如window、document,只能使用微信提供的API微信小程序的发展历程

微信小程序形态

小程序更像是公众号开发的升级早期微信通过sdk方式增强了开发者开发公众号网页的能力,小程序的诞生是微信迈向平台化超级app的业务行为,并且帮助用户更好的实现了「轻量级APP」

开发标准

最初微信小程序自己定义了一套“标准”,最开始的框架没有组件、npm、和web生态严重脱节由于特殊的双线程模型与四不像语法,小程序开放只是对三方业务的开放

商家涌入

小程序业务的开放性 -> 平台型app比如:支付宝小程序、百度、淘宝、360、快应用小程序设计的目的:大多数选择了和微信类似的架构,框架,更多不是从技术角度考虑,而是想尽可能蹭微信小程序的福利,让开发者更快的投放到自己的平台微信小程序框架

目录结构每个页面文件夹都包含了wxml、wxss、js、json几个后缀的文件,分别是模板文件,样式文件,js脚本文件,json页面配置文件。在目录最外层还有全局的app.js、app.json、app.wxss

小程序类型应用的技术选型渲染页面的技术方案用纯客户端原生技术渲染用纯web技术渲染

用客户端原生技术与web技术结合的混合开发(hybrid)渲染

方案对比开发门槛:web门槛低,原生也有像RN这样的框架支持体验:原生体验比web好太多,hybrid在一定程度上比web接近原生体验版本更新:web支持在线更新,如果小程序用原生开发,则需要打包到微信一起审核

管控与安全:web可跳转或是改变页面内容,存在一些不可控因素和安全风险

方案确定[x] 小程序的宿主环境是微信等手机app,用纯客户端原生技术来编写小程序,那么小程序代码每次都需要与手机app代码一起发版。所以该方案不可取

[x] web支持有一份副本资源包放在云端,通过下载到本地,动态执行后即可渲染出界面,但纯web技术在一些复杂的交互上可能有性能问题。所以该方案不可取

在web技术中,UI渲染跟脚本执行都在一个单线程中执行,这就容易导致一些逻辑任务抢占UI渲染的资源

[ ] 两者结合的hybrid技术来渲染小程序,用一种近似web的方式来开发,并且可以实现在线更新代码

扩展web的能力,比如输入框组件(input、textarea)有更好的控制键盘的能力体验更好,同时减轻webview的渲染工作用客户端原生渲染内置一些复杂组件可以提供更好的性能双线程模型

小程序的渲染层和逻辑层分为两个线程管理

视图层(Web View) -> WebView进行渲染

界面渲染相关的任务都在WebView线程里执行,通过逻辑层代码区控制渲染哪些界面。一个小程序存在多个界面,所以视图层存在多个WebView线程

逻辑层(App Service) -> JsCore线程运行js脚本

创建爱你一个单独的线程去执行js代码,在这里执行的都是有关小程序业务逻辑的代码,负责逻辑处理、数据请求、接口调用等JSBridge:上层开发与Native(系统层)的桥梁,使小程序可通过API使用原生的功能,且部分组件为原生组件实线,从而有良好体验
设计目的:为了管控和安全等问题,阻止开发者使用一些,例如浏览器的window对象,跳转页面,操作DOM、动态执行脚本的开放性接口使用沙箱环境提供纯javascript的解释执行环境客户端系统,在pc运行时用javascript引擎执行js代码ios:在ios系统时使用ios提供的Js core框架执行js代码安卓:在安卓系统时使用腾讯的x5内核提供的JsCore执行js代码数据驱动视图变化问:js逻辑代码放到单独的线程中运行,在WebView线程无法直接操作DOM,开发者如何实现动态更改界面

DOM的更新通过简单的数据通信来实现,逻辑层和视图层的通信由native(微信客户端)做中转,逻辑层发送网络请求也经由native转发。

graph LR
对象模拟DOM树 --> 比较两颗虚拟DOM树的差异 --> 更新有差异的真实DOM树
在渲染层把wxml转化为对应的js对象在逻辑层发生数据变化的时候,通过宿主环境提供的setData方法把数据从逻辑层传递到native,再转发到渲染层经过对比,更新真实dom内容
总结:这部分和mvvm框架类似,转化了ast树,通过native创建了虚拟dom,通过setData的方法更新数据,再通过native做了diff差异化更新真实dom树事件处理微信做了特殊的处理,将所有的事件拦截后丢到逻辑层交给js处理代码描述交互事件视图层用户交互触发事件native拦截丢给逻辑层逻辑层收到回调处理事件

事件的派发处理包括事件捕获和冒泡两种:
交互流程就如同上述的数据驱动视图变化一样,native拦截丢给逻辑层后,通过js响应事件,通过setData修改数据,虚拟dom发生变化,native diff更新真实dom

运行机制冷启动:用户首次打开或者小程序被微信主动销毁后再次打开的情况(当手机系统五秒内两次以上内存告警,小程序会主动销毁),此时小程序需要重新加载启动热启动:加入用户已经打开过某小程序,在一定时间内(目前是五分钟)再次打开该小程序(小程序前后台切换),此时无需重新启动
注意小程序没有重启的概念小程序框架对比小程序原生语法目前小程序已经能够做到前端工程化,并且植入前端生态中已有的一些理念,比如状态管理,CLI工程化等等

前端能力基本在小程序上可以复用,比如状态管理,柯里化管理组件状态,ts等

增强型框架指小程序引入npm后,有了更开放的能力所带来的收益

以微信小程序为例,腾讯开源了omi框架

整体保留了小程序现有语法,在此之上对它进行了扩充和增强比如引入了computed hook,比如能直接通过this.store.data.logs[0] = 'changed'修改状态,彻底将微信小程序vue化转换型框架

能够一码多端的框架,比如rax、taro、uniapp,让开发者几乎不用感受小程序原生语法,更大程度对接前端已有生态,只是最后构建产物为小程序代码
这些框架实际都是通过转换产物1:1转换成对应的小程序代码

graph LR
开发者代码 --> AST树 --> 新AST树 --> 小程序代码
编译时

优势

运行时性能损耗低目标代码明确,开发者所写即所得运行时、编译时优化:比如框架会给予开发者更多的语法支持以及默认的性能优化处理,比如避免多次setData,或者长链表优化等等
劣势

语法限制高:需要完全命中开发者在模板部分所用到的所有语法,语法受限,由于是1:1编译转换,开发者在开发的时候还是不得不去遵循小程序的开发规范,比如一个文件只能定义一个组件之类的

运行时

比起编译时,最大优势是可以几乎没有任何语法约束的去完成代码编写
优势:没有语法限制

微信小程序文档必读

推荐将文档的指南、框架、组件、API、工具相关的通读一遍

基本内容

示例代码github地址:https://github.com/wechat-miniprogram/miniprogram-demo

基础

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/

基础核心
graph
A[小程序冷启动] -- 启动 --> B[前台] -- 切后台 --> C[后台] -- 五秒后 --> D[挂起] --  30分钟后 --> E[小程序销毁]
C -- 切前台 --> B
D -- 切前台 --> B

更新机制

启动时同步更新

定期检查小程序版本长时间未使用小程序

启动时异步更新

打开发现有新版本,异步下载,下次冷启动时加载新版本

开发者手动更新

wx.getUpdateManager

代码注入

按需注入:“lazyCodeLoading”:“requiredComponents”配置路径进行打包用时注入:在开启「按需注入」特性的前提下,指定一部分自定义组件不在小程序启动时注入,而是在真正渲染的时候才进行注入,使用占位组件在需要渲染但注入完成前展示

分包加载

原则

声明subpackages后,将俺subpackages配置路径进行打包,subpackages配置路径外的目录将被打爆到app(主包)中app(主包)也可以有自己的pages(即最外层的pages字段)subpackage的根目录不能是另外一个subpackage内的子目录tabBar页面必须在app(主包)内

独立分包

当小程序从普通的分包页面启动时,需要受限下载主包独立分包运行时,App并不一定被注册,因此getApp()也不一定可以获得App对象。基础库2.2.4版本开始getApp支持[allowDefault]参数,在App未定义时返回一个默认实现,当主包加载,App被注册时,默认实现中定义的属性会被覆盖合并到真正的App中

调试小程序

使用vconsole开启sourceMap配置项实时日志:重写log,使用wx.getRealtimeLogManager封装,在运营后台“开发->开发管理->运维中心->实时日志"查看errno:开发者自己抛出异常,针对API的cb err进行状态码的判断,针对业务场景语义化展示如何兼容版本版本号比较
const version = wx.getSystemInfoSync().SKDVersion
if (compareVersion(version, '1.1.0') >= 0) {
wx.openBluetoothAdapter()
} else {
wx.showModal({
  title: '提示',
  content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试'
})
}
判断API是否存在
if (wx.openBluetoothAdapter) {
wx.openBluetoothAdater()
} else {
wx.showModal({
  title: '提示',
  content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试'
})
}
wx.canIUse

判断当前环境是否能使用api,和jsdk的api权限判断类似

wx.showModal({
success: function(res) {
  if (wx.canIUse('showModal.success.cancel')) {
    console.log(res.cancel)
  }
}
})
最低基础库版本

运营后台设置最低基础库版本

框架

微信原生小程序框架官方文档

小程序配置

全局配置页面配置sitemap配置

框架接口

App:必须在app.js中调用且只能调用一次

一些全局的生命周期getApp:外部访问App中数据的方式

页面

Page

data一些页面中的生命周期getCurrentPages:获取当前页面栈,可以获取当前页面信息,比如路由,也可以通过该方法实现跨页面赋值
// 跨页面赋值
let pages = getCurrentPages() // 当前页面栈
let prePage = pages[pages.length - 2] // 上一页面
prevPage.setData({
// 直接给上一页面复制
})
// 页面跳转后自动刷新
wx.switchTab({
 url: '../index/index',
 success: function (e) {
   const page = getCurrentPages().pop(); // 当前页面
   if (page == undefined || page == null) return;
   page.onLoad(); //或者其他操作
} })

Router

页面路由器有 switchTab reLaunch redirectTo navigateTo navigateBack 五个方法与 wx 对象向同名的五个方法 switchTab reLaunch redirectTo navigateTo navigateBack 功能相同;唯一的区别是,页面路由器中的方法调用时,相对路径永远相对于 this 指代的页面或自定义组件。
Page({
wxNavAction: function () {
  wx.navigateTo({
    url: './new-page'
  })
},
routerNavAction: function () {
  this.pageRouter.navigateTo({
    url: './new-page'
  })
}
})
自定义组件Component:在微信开发工具右键新建组件自动创建了自定义组件模板,整体包裹在一个Component对象下Behavior:behaviors是用于组件间代码共享的特性, 类似一些编程语言中的'mixin'或者'traits',它可以将behavior模块的代码混入组件代码中,一般是抽离出逻辑代码和部分属性
// 官方示例
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})

基础用法,先新建一个组件,再通过组件自带的behaviors属性混入behavior模块,这个属性类似vue的mixins

// 新建个组件
<view>属性: {{myBehaviorProperty}} --- {{myCompProperty}}</view>
<view>数据: {{myBehaviorData}} --- {{myCompData}}</view>
<view bind:tap="myBehaviorMethod">触发behavior的自定义方法</view>
<view bind:tap="myCompMethod">触发组件的自定义方法</view>

// 组件级js
import testBehavior from './testBehavior'
Component({
  behaviors: [testBehavior],
  properties: {
    myCompProperty: {
      type: String,
      value: ''
    }
  },
  data: {
    myCompData: 'myCompData'
  },
  created: function (){
    console.log('[my-component]- created')
  },
  attached: function (){
    console.log('[my-component]- attached')
  },
  ready: function (){
    console.log('[my-component]- ready')
  },
  methods: {
    myCompMethod: function () {
      console.log('[my-component]- method')
    }
  }
})
// behavior.js
export default Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String,
      value:  'myBehaviorProperty'
    }
  },
  data: {
    myBehaviorData: 'myBehaviorData'
  },
  created: function () {
    console.log('[my-behavior]- created')
  },
  attached: function () {
    console.log('[my-behavior]- attached')
  },
  ready: function () {
    console.log('[my-behavior]- ready')
  },
  methods: {
    myBehaviorMethod: function () {
      console.log('[my-behavior]- method')
    }
  }
})
面试会问到的为什么要分包

目前小程序主包有限制大小不能超过2M,整体(包括分包)不能超过20M,对小程序分包可以优化首次启动的下载时间,以及在多团队共同开发时可以更好的解耦

页面通信 -- 组件高阶用法

跨页面赋值

类似vue中的ref,直接操控组件的属性值
let pages = getCurrentPages() // 当前页面栈
let prePage = pages[pages.length - 2] // 上一页面
prevPage.setData({
// 直接给上一页面复制
})
使用behavior进行数据共享

使用wx.nativgateTo打开,这两个页面将建立一条数据通道,类似父子组件,可以通过emiton互相发送

被打开的页面可以通过this.getOpenerEventChannel()方法来获取一个EventChannel对象wx.navigateTosuccess回调中也包含一个EventChannel对象这两个EventChannel对象间可以使用emiton方法互相发送、监听事件seo优化

小程序如何seo优化官方文档

配置小程序sitemap小程序里跳转的页面(url)可被直接打开页面跳转优先采用navigate组件

必要的时候才请求用户进行授权、登录、绑定手机号登

开发中遇到过如果要通过企微群发公众号页面时,企微爬取不到页面信息,因为页面使用了静默授权,爬取页面的时候直接跳转到授权页了,所以获取不到页面信息

设置一个清晰的标题和页面缩略图

性能相关小程序启动流程官方文档小程序切换页面流程官方文档

如何提升小程序性能

启动时性能优化

代码包体积优化(分包)代码注入优化(懒加载模块)首屏渲染优化其他优化

运行时性能优化

合理使用setState渲染性能优化:非必要不监听滚动事件,尽量少用复杂动画效果页面切换优化:避免在onHide/onUnload执行耗时操作,提前发起数据请求资源加载优化:图片资源控制

内存优化:分包、按需注入,内存分析,处理内存告警

内存泄漏:如果页面示例被挂载到全局或者其他地方还有使用到,那么该页面this得不到释放,容易造成内存泄漏,当需要其他页面用到该this时,在该页面unload时需要处理手动释放内存如何进行埋点手动设置自己的埋点系统(需要埋点量少的时候)如果是vue、react等框架则可以在webpack中加载自己写的babel插件,在转化ast这步自动插入埋点小程序中可以用腾讯官方提供的埋点工具,也可以通过开发者工具自定义分析设置埋点上报
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。

Tags 标签

前端微信小程序

扩展阅读

加个好友,技术交流

1628738909466805.jpg