近些年来,小程序在我们生活中的使用频率越来越高,许多APP也都在内部内嵌了小程序,如微信、支付宝等,成为了目前前端er基本绕不开的一个开发类型。本文主要以微信小程序为例,介绍小程序开发的一些重要概念和开发技巧,如有错误或者感兴趣之处,欢迎随时打断讨论。
小程序中的重要概念:
1. 宿主环境:在微信中,微信客户点给小程序所提供的的环境成为宿主环境。
(1)渲染层和逻辑层,像WXML模板和WXSS样式就工作在渲染层,而JS脚本工作在逻辑层。下面是小程序的通信模型,它介绍了小程序如何进行数据的通信和渲染。
(2)组件,小程序提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼合自己的小程序。常用的如view、image、navigator、map及webview等,可以搭配各种属性实现相应的功能。
(3)API,API在小程序的开发中扮演了重要的角色,如获取用户的信息、微信支付、人脸识别等,这些五花八门的API就是微信功能的一个整合,可以让你通过调用API来使用微信的开放能力。
2. UnionID和OpenId
每一个公众平台(小程序)会有唯一的一个appid,而用户呢也有唯一的一个微信号,当用户授权访问一个小程序或者公众号时,微信会根据用户的微信号+所访问的公众平台的appid生成一个加密的openid,那么我们就知道,当用户访问不同的公众号或者小程序时,所产生的的openid是不一样的,多次进入同一个小程序或者公众号时,用户的openid是不会变化的。
那么问题来了,如果我在美团小程序上领到了一个限时优惠券,在我访问美团的公众号去使用的时候,由于openid不一致,就没办法同步到美团的公众号上去使用了,这个时候,微信就需要一个标识去标定一个用户在同一平台的用户信息的唯一性,这个标识就是unionid。简单来说,unionid=用户的openid+开发平台的appid。因此用户访问同一开发平台下不同的小程序时,会有不同的openid,但是有相同且唯一的unionid。
3.页面生命周期
在vue或者react中都有生命周期这个概念,而小程序中也是一样的,只是有一些不同。
onLoad:在加载页面时触发,一个页面只会调用一次。
onShow:页面显示/切入前台时触发。
onReady:页面初次渲染完成时触发,代表页面已经准备妥当,可以和视图层进行交互。
onHide:页面隐藏/切入后台时触发。
onUnload:页面卸载时触发。
4.页面跳转
wx.navigateTo():保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo():关闭当前页面,跳转到新的页面(类似重定向)。但是不允许跳转到 tabbar 页面
wx.switchTab():跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.navigateBack():关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
wx.reLaunch():关闭所有页面,打开到应用内的某个页面
5.小程序的更新机制
说到更新机制,我们首先要了解两个概念:冷启动和热启动。
冷启动:如果用户首次打开或者小程序销毁后被用户再次打开,此时小程序需要重新加载所有的数据及页面,此乃冷启动。
热启动:如果用户已经打开过小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入到前台状态,这个过程就是热启动。
当小程序在每次冷启动的时候都会异步的检测是否会存在新版本,如果有新版本的话会异步下载,但是本次启动还是用的旧的代码包,而新的包则会在下次冷启动时才会更新。
那么问题来了,如何在用户打开小程序时就让ta使用到最新版本呢?答案就是wx.getUpdateManager(),在小程序onLaunch的阶段进行检查,如果有新版本,则提示用户进行更新即可。
小程序的开发技巧
1.setData
在小程序中直接调用this.data是无法改变页面状态的,需要用this.setData(Object data, Function callback),其中Object data是要改变的数据对象,必传,Function callback是setData引起的界面更新渲染完毕后的回调函数,非必填。
但在使用setData时,要注意几个问题:
(1).仅支持设置可JSON化的数据,如果不是JSON对象数据格式,需要将数据进行转化成JSON对象。
(2).单次设置的数据不能超过1024kb,不要一次设置过多的数据。由于小程序运行逻辑线程与渲染线程之上,setData的调用会把数据从逻辑层传到渲染层,数据太大会增加通信时间,会增加脚本的编译执行时间,占用 WebView JS 线程
(3).避免setData调用过于频繁,因为setData接口的调用涉及逻辑层与渲染层间的线程通信,通信过于频繁可能导致处理队列阻塞,界面渲染不及时而导致卡顿,应避免无用的频繁调用。
(4). 后台态页面进行setData(比如退出小程序),当页面进入后台态(用户不可见),不应该继续去进行 setData,后台态页面的渲染用户是无法感受到的,另外后台态页面去 setData 也会抢占前台页面的执行
2.关于分包
由于小程序体积限制在2M以内,而随着小程序承载功能的多样化,很显然2M的代码大小远远不能够满足产品的复杂需求。这个时候就需要将小程序划分为主包和分包,分包后可以优化小程序首次启动的下载时间,以及在多团队共同开发时更好的解耦操作。
主包主要承载小程序的主要逻辑和进入即可见的部分,分包则承载了构成小程序的各个功能块。目前单个主包/分包大小不能超过2M,整个小程序所有分包大小不能超过20M。
分包里有一种特殊类型的包,叫做独立分包,它可以独立于主包和其他分包运行,从独立分包页面进入小程序,不需要加载主包,可以快速显示当前包的页面,常用于运营活动页等。
分包亦有主次之分,在一些重点常用但是体积比较大的分包页面,可以用preloadRule在小程序的某个页面提前加载该分包,即可快速进入该分包页。
参考文章
1.微信小程序官方文档
2.微信小程序中setData详解
3.小程序版本更新机制
4.小程序分包技巧