小程序:Mini Program
,是一种不需要下载安装即可使用的应用。
相比于 H5、APP,小程序的优势:
- 相比于 H5:小程序的体验要好很多。
- 相比于 APP:小程序使用起来更加方便,不需要在应用商店下载安装,甚至注册登录等操作;传统的 APP 更新需要先打包,上架到应用商店之后需要经过审核,但是小程序可以在 APP 不更新的情况下,动态地为自己的应用添加新的功能。
使用步骤:
申请账号:
开发小程序的第一步,需要拥有一个小程序账号,通过这个账号就可以管理小程序。
-
访问微信公众平台
https://mp.weixin.qq.com/
点击立即注册进入小程序注册页,根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。
-
在微信公众平台,就可以管理小程序的权限,查看数据报表,发布小程序等操作。
小程序的 AppID 相当于小程序平台的一个身份证,会在很多地方用到。
安装开发工具:
前往https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
开发者工具下载页面,根据自己的操作系统下载对于的安装包进行安装。
新建项目:
-
新建一个空白文件夹。
-
打开微信开发者工具 --> 选择新建的目录(会自动获取项目名称)–> 填入 appId --> 选择不使用云服务 --> 点击新建。
-
即可新建一个带有默认模板的项目。
-
编译、预览、真机调试:点击微信开发者工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现;也可以点击预览按钮,通过微信的扫一扫在真机上体验小程序;也可以点击真机调试按钮,通过微信的扫一扫在真机上调试小程序。
编译:可以在微信开发者工具的模拟器上看到小程序的效果。
预览:可以在手机上看到小程序的效果。如果打开调试模式,可以在手机上看到调试信息。
真机调试:可以在手机上看到小程序的效果。可以在微信开发者工具上看到调试信息。 -
发布项目:点击微信开发者工具的上传即可。
目录结构:
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
- 一个小程序主体部分由三个文件组成,必须放在项目的根目录下:
app.js
小程序全局逻辑、app.json
小程序公共配置、app.wxss
小程序公共样式表。 - 一个小程序页面由四个具有相同的路径与文件名的文件组成,分别是:
.wxml
页面结构、.json
页面配置、.js
页面逻辑、.wxss
页面样式表。
WXML 模板:
WXML 充当的是类似 HTML 的角色。
WXSS 样式:
WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。
JS 逻辑交互:
通过 JS 来实现业务逻辑。
在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。
JSON 配置:
通过 JSON 来进行静态配置。
小程序的 MVVM 架构:
MVVM 架构的优点:
- DOM Listeners:ViewModal 层可以将 DOM 的监听绑定到 Model 层。
- Data Bindings:ViewModal 层可以将数据的变化响应式地反应到 View 层。
小程序的双线程模型:
目前,在 WebView 渲染外,还新增了一种 skyline 渲染引擎,更高效,可查看文档。
- WAML 模块和 WXSS 样式运行于渲染层,渲染层使用 WebView 渲染。
一个页面对应一个 WebView。
- JS 脚本运行于逻辑层,逻辑层使用 JsCoew 运行 JS 脚本。
- 这两个线程经由 Native 微信客户端进行中转交互。
为什么微信小程序要采用双线程模型?
因为 WebView 的 JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint 和 Composite 都是在同一个线程上。那么如果在 WebView 上执行过多的 JS 逻辑可能会阻塞渲染,导致页面卡顿。因此,微信小程序在考虑了性能与安全的前提下,采用了双线程模型的架构。
微信小程序开发与普通网页开发的区别:
小程序的主要开发语言是 JavaSciript,小程序的开发同普通的网页相比有很大的相似性,对于前端开发者而言,从网页开发迁移到小程序的开发成本并不高,但是二者还是有一些区别的:
- 网页开发渲染线程和脚本线程是互斥的;而在小程序中小程序的逻辑层和渲染层是分开的,可以同时运行。
- 网页开发者可以使用到各种浏览器暴露出来的 DOM API 进行 DOM 操作,而小程序的逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的 DOM API 和 BOM API;同时 JSCore 的环境同 NodeJS 环境也是不尽相同,所以一些 NPM 的包在小程序中也是无法运行的。
- 网页开发者需要面对的环境是各式各样的浏览器,PC 端需要面对 IE、Chrome、QQ浏览器等,在移动端需要面对 Safari、Chrome 以及 iOS、Android 系统中的各式 WebView ;而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端,以及用于辅助开发的小程序开发者工具。
小程序中三大运行环境也是有所区别的。
- 网页开发者在开发网页的时候,只需要用到浏览器,并且搭配上一些辅助工具或者编辑器即可;小程序的开发则有所不同,需要经过申请小程序账号、安装小程序开发工具、配置项目等过程方可完成。
基础库:
基础库存在于微信客户端中,是小程序运行的必要环境,封装了微信和手机的能力提供给小程序使用。
微信客户端是微信小程序的宿主环境,微信小程序运行在微信客户端上。
基础库和微信客户端一样,有其自己的版本,每个版本都会有一些新特性。微信官方为了使得基础库的版本和微信客户端的版本同步,采取了一个微信客户端版本对应一个基础库版本的方式。
基础库版本:小程序基础库的版本。
客户端版本:微信 APP 的版本。
小程序版本:小程序发布在线上的版本。
小程序是通过基础库运行在手机及微信上的。
低版本兼容:
版本号比较:
开发者可以在小程序中通过调用 wx.getSystemInfo
或者 wx.getSystemInfoSync
获取到当前小程序运行的基础库的版本号。通过版本号比较的方式进行运行低版本兼容逻辑。这种方式适用于所有情况。
微信客户端和小程序基础库的版本号风格为
Major.Minor.Patch
(主版本号 . 次版本号 . 修订版本号)。
function compareVersion(v1, v2) {
v1 = v1.split('.')
v2 = v2.split('.')
const len = Math.max(v1.length, v2.length)
while (v1.length < len) {
v1.push('0')
}
while (v2.length < len) {
v2.push('0')
}
for (let i = 0; i < len; i++) {
const num1 = parseInt(v1[i])
const num2 = parseInt(v2[i])
if (num1 > num2) {
return 1
} else if (num1 < num2) {
return -1
}
}
return 0
}
const version = wx.getSystemInfoSync().SDKVersion
if (compareVersion(version, '1.1.0') >= 0) {
wx.openBluetoothAdapter()
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
API 存在判断:
对于新增的 API,可以通过判断该 API 是否存在来判断是否支持用户使用的基础库版本。
if (wx.openBluetoothAdapter) {
wx.openBluetoothAdapter()
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
wx.canIUse
:
可以通过 wx.canIUse
来判断是否可以在该基础库版本下直接使用。
- API 参数或返回值:
wx.showModal({ success: function(res) { if (wx.canIUse('showModal.success.cancel')) { console.log(res.cancel) } } })
- 组件:
Page({ data: { canIUse: wx.canIUse('cover-view') } }) <video controls="{{!canIUse}}"> <cover-view wx:if="{{canIUse}}">play</cover-view> </video>
设置最低基础库版本:
开发者可以登录小程序管理后台,进入「设置 - 基本设置 - 基础库最低版本设置」进行配置。设置后,若用户基础库版本低于设置值,则无法正常打开小程序,并提示用户更新客户端版本。
小程序的运行机制和更新机制:
- 微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。
- 紧接着通过
app.json
的 pages 字段就可以知道当前小程序的所有页面路径,而写在 pages 字段的第一个页面就是这个小程序的首页,于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。微信客户端会先根据页面的 JSON 配置生成一个界面,紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式,最后客户端会装载 JS。
- 小程序启动之后,在
app.js
定义的 App 实例的 onLaunch 回调会被执行。
运行机制:
小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」。
- 热启动:假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台的小程序切换到前台。
当用户点击右上角退出按钮,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是从前台进入了后台。
当再次打开小程序,并不是进入主页面,而是进入离开小程序时缓存的页面,又会从后台进入了前台。 - 冷启动:指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。
只有当小程序进入后台一定时间,或者系统资源占用过高,小程序才会被真正的销毁。
更新机制:
小程序冷启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。
如果需要马上应用最新版本,可以使用 wx.getUpdateManager()
API 进行处理。
const updateManager = wx.getUpdateManager()
// 新版本下载成功后回调
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好,是否重启应用?',
success: res => {
if (res.confirm) {
// 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})