浅析触手可及的微信小程序

 概述

众所周知，互联网行业从来都是“唯快不破”。自2016年9月21日微信小程序正式开启内测，在微信生态下，触手可及、用完即走的微信小程序引起广泛关注，本文从以下几个方面浅谈一番微信小程序。

生命周期

为了使开发更为便捷，许多主流前端技术栈都有着各自的钩子函数，如React,Vue等。小程序亦如此，有一套清晰易懂的生命周期函数。如图所示：

onLaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。

onLoad：小程序页面加载时触发，一个页面只会调用一次，可以获取wx.navigateTo和wx.redirectTo及中的 query。

onShow：当小程序启动，或从后台进入前台显示，会触发 onShow。

onHide：和onShow函数对应，当小程序从前台进入后台，会触发 onHide。

onReady：一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

onUnload：当redirectTo或navigateBack的时候调用。

除以上常规的生命周期函数之外，还有页面相关事件处理函数，如：

onError：当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息。

onPullDownRefresh：监听用户下拉动作。

onReachBottom：页面上拉触底事件的处理函数。

onShareAppMessage：用户点击右上角分享。

这些声明周期函数和相关事件处理函数即是小程序的灵魂，开发者可以根据场景方便的调用。

组件及API

组件是视图层的基本组成单元，它会自带一些功能与微信风格的样式。小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

相对于H5标签来讲，小程序的组件显得更为灵活，功能也更为明了，如视图容器、表单组件、媒体组件等，这里不妨举一示例，如image组件：

image组件有一个mode属性，用来定义图片裁剪、缩放的模式。mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。开发者可根据需求选择需要的模式。

另外，需要注意的是：

（1）其中组件与属性都是小写，如需分隔以连字符-连接。

（2）小程序的有些组件与属性是在某个基础库才开始支持的，低版本需做兼容处理。

如果说组件是小程序的“骨架”，那么API就是小程序的“灵魂”。框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

同时，需要注意的是：

（1）小程序也在不断更新完善，有些接口已经（即将）废弃，请绕行避免雷区，如“大名鼎鼎”的getUserInfo接口，使用该接口将不再出现授权弹窗，当用户未授权过，调用该接口将直接报错，当用户授权过，可以使用该接口获取用户信息；

（2）关于小程序分享功能，为了进一步提升用户的体验感，创造良好自主分享氛围，减少“强制分享至不同群”等滥用分享能力，微信官方对小程序，甚至网页及App都做出了具体的调整，开发者将无法获知用户是否完成分享，更不会在分享完后立即获得群ID等。

（3）小程序的有些API是在某个基础库才开始支持的，低版本需做兼容处理。

插件

随着小程序功能的逐渐扩展，官方提供了小程序的插件功能。插件是对一组 js 接口、自定义组件或页面的封装，用于嵌入到小程序中使用。

1.开发插件

首先需要在开发者工具创建插件，如图所示：

创建生成的默认代码结构如下：

新建插件类型的项目后，项目中将包以下目录：

miniprogram 目录内容可以当成普通小程序来编写，用于插件调试、预览和审核。plugin即是插件代码目录：

2.使用插件

使用插件之前，需要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。然后开发者需要要在 app.json 中声明需要使用的插件：

当然，plugins 定义段中可以包含多个插件声明，每个插件声明以一个使用者自定义的插件引用名作为标识，并指明插件的 appid 和需要使用的版本号。

在自定义的组件的 json 文件定义需要引入的自定义组件时，使用 plugin:// 协议指明插件的引用名和自定义组件名，例如：

使用插件的 js 接口时，可以在自定义的组件的 js 文件中使用 requirePlugin 方法：

需要注意的是：

（1）插件的页面从小程序基础库版本 2.1.0 开始支持。

（2）插件不能独立运行，必须嵌入在其他小程序中才能被用户使用；而第三方小程序在使用插件时，也无法看到插件的代码。因此，插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。

分包加载

分包加载是小程序功能的又一重要突破。在构建时打包成不同的分包，用户在使用时可以实现按需进行加载，优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

小程序官方提供一个分包加载的DEMO示例项目，可以通过这个示例很好的理解小程序分包加载。 首先看一下DEMO的代码结构：

示例对page目录下的 API 和 component 两个文件夹下的自定义组件进行了分包加载，其中在 app.json 文件中分包配置如下：

需要注意的是：

（1）packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源。

（2）目前小程序分包大小有以下限制：

具体分包加载示例请点击这里https://developers.weixin.qq.com/miniprogram/dev/demo/demo-subpackages.zip

组件化开发框架WePY

WePY 是腾讯开源的一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序，让开发小程序项目变得更加简单，高效。

首先全局安装或更新WePY命令行工具：

WePY的代码结构如下：

相对小程序原生开发，使用组件化开发框架WePY优势更为明显，由于WePY借鉴了Vue.js的语法风格和功能特性，因此更容易上手。通过build指令自动编译生成的dist目录结构如下：

关于WePY框架，也可以参考官方入门指南、主要功能特性、代码规范等详细介绍。

遇到过的坑

踩坑让我们越挫越勇。面对小程序这个新生事物，在开发过程中，难免会遇到这样那样的问题，官方文档是最好的参考资料，当然也可以在小程序开发者社区中参与讨论或寻找答案。以下是笔者在开发中曾遇到的一些坑：

1.项目设置按需选中（ES6 转 ES5、上传代码时样式自动补全、上传代码时自动压缩等）；

2.预先配置需要的域名信息，如请求需要配置相关request 合法域名，获取图片信息，如果为网络图片，需先配置download域名才能生效等。

3.使用组件实现小程序跳转H5页面，在iOS中，若存在JSSDK接口调用无响应的情况，可在的src后面加个#wechat_redirect解决。

4.有些组件如 video, canvas 是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。

5.绘制图像到画布，用drawImage添加的图片，需要预先获取图片的tempFilePath；

6.有些组件和 API 是从某个版本的基础库才开始支持，低版本需做兼容处理。

7.iPhone X 机型底部样式留白适配。

8.（即将）废弃的接口慎用，另外微信对分享功能已做调整，开发者将无法获知用户是否完成分享。

9.小程序有代码大小限制，大文件最好使用网络资源或使用分包加载功能。

10.小程序目前页面路径最多只能十层，合理使用navigateTo、redirectTo、navigateBack、reLaunch。