微信小程序开发知识点集锦

一 小程序的生命周期

代码生命周期就是一个对象的生老病死，通常指程序从创建、开始、暂停、唤起、停止、卸载的过程。小程序的生命周期又可分为应用生命周期和页面的生命周期微信小程序组件传值，先单独分析，在结合两者分析

应用生命周期

应用生命周期指得是小程序本身的初始化加载、方法以及最终被销毁的过程。

用户首次打开小程序，触发onLaunch,用于监听小程序初始化,整个应用生命周期中只触发一次；

初始化之后，触发onShow监听小程序显示，小程序启动或从后台进入前台显示，会触发 onShow；

小程序用前台进入后台，触发onHide方法；

小程序在后台允许一定时间，或系统资源占用过高，会被销毁；

在上面提到的前台和后台，给出的解释是：用户点击右上角关闭、按home健离开微信返回主页，这些情况属于小程序进入后台但没有直接销毁，只有在小程序进入后台一段时间，或者系统资源占用过高的情况才会被销毁，就是说小程序的销毁是需要额外的条件，而非是直接进入后台就销毁；当再次打开微信或打开小程序就称为从后台进入前台；

页面的生命周期

小程序的页面生命周期是指程序内部某个页面从进入到离开或某个页面到另一个页面的过程

小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次。

页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次。

首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

当小程序后台运行或跳转到其他页面时，触发onHide方法。

当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

wx.navigateTo跳转状态下，页面A和页面B的生命周期逻辑

进入A页面：A执行onLoad()-->onShow()-->onReady()；

A页面navigateTo B页面：A执行onHide()，B执行onLoad()-->onShow()-->onReady()；

B页面返回A页面：B执行onUnload()，A执行onShow()；

退出A页面：A执行onUnload()。

应用生命周期和页面生命周期

小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。

当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。

当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

应用生命周期和页面生命周期不是分开的，两者一起进行，相互交叉使用，会用到相同的方法，比如onShow和onHide

二 小程序框架的选择和对比

开源框架

1、 mpvue

mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

2、Tina.js

Tina.js 一款轻巧的渐进式微信小程序框架。

特性： 轻盈小巧。 极易上手，保留 MINA (微信小程序官方框架) 的大部分 API 设计；无论你有无小程序开发经验，都可以轻松过渡上手。 渐进增强，既有状态管理器，也有路由增强，还可以自己编写插件。

3、Taro

Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。我要没记错的话，是最近刚刚开源的。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能，有效地提升了开发体验和开发效率。

4、wepy

WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions 的引入都是为了能让开发小程序项目变得更加简单，高效。

特性：

5、weweb

weweb 是一个兼容小程序语法的前端框架，你可以用小程序的写法，来写 web 应用。如果你已经有小程序了，通过它你可以将你的小程序运行在浏览器中。

特性： 跨平台，一套代码多端运行（小程序、h5、未来直接打包成安卓、ios app 也不是梦) 自带常用组件，完美继承了小程序内置组件 兼容小程序 rpx 语法，使页面更容易适配各种机型

5、Touch WX

Touch WX 是一套完全免费的微信小程序开发框架，包含丰富的 UI 控件用于官方组件的补充。

特点如下：

组件扩充：增加了 30 多种常用的组件用于官方组件的补充。

功能扩充：兼容阿里的 iconfont 图标库，海量矢量图标随意使用；补充了常用样式库、支持 less 语法、支持全局配置主题色等

开发体验改善：四文件方式改为单文件方式，通过 VSCode 编辑器 + 插件的方式开发，拥有 web 开发体验；

小程序转为 H5 应用：可以与 H5 开发框架 Touch UI 工程相互转换，发布成 webApp。开发一套代码，拥有两套应用。

这套框架的原理是：

将 Touch WX 工程中所写的代码进行编译，直接输出为微信小程序工程原始代码。扩充的 30 多种组件，完全是基于小程序官方的自定义组件机制实现（row&col 除外）。

所以它支持小程序的全部语法，怎么开发小程序，就怎么开发 Touch WX。

不过因为是单文件的开发方式，在文件的代码结构上稍有不同。请注意这一点。

这样好处在于：

开发者迁移成本很小。可以轻松的将已有的小程序移植为 Touch WX 工程，来使用它的扩展能力；

便于排查错误。当遇到问题时，开发者也可以随时查看输出的小程序原始代码来定位问题所在。不会搞不清楚到底是框架问题还是自己代码的问题；

按需编译。由于小程序对体积有限制，在使用框架开发时，只有使用到的组件才会编译输出为小程序源码。没用到的不会输出。

不会对框架产生依赖。以后不想用了这套框架，可以直接对已经输出的小程序工程进行维护。

组件库

还有各种开源的组件库，比如有以下这几个：

有赞的 zanui-weapp 和 iview 这两个比较出名。

三 常见的面试知识点

微信小程序的相关文件类型

WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，

js 逻辑处理，网络请求

json 小程序设置，如页面注册，页面标题及tabBar。

注：

app.json

必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。

app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

封装微信小程序的数据请求

将所有的接口放在统一的js文件中并导出

在app.js中创建封装请求数据的方法

在子页面中调用封装的方法请求数据

参数传值的方法

给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象

设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值

在navigator中添加参数传值

提高微信小程序的应用速度

提高页面加载速度

用户行为预测

减少默认data的大小

组件化方案

小程序与原生App比较

程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度 的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。

微信小程序原理

微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。

JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理微信小程序组件传值，微信提供的独有的某些API，H5也不支持或支持的不是特别好。

WXML：WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。

WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档。

微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。

小程序分为两个部分webview和appService。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理

微信小程序的优劣势

优势：

1、无需下载，通过搜索和扫一扫就可以打开。

2、良好的用户体验：打开速度快。

3、开发成本要比App要低。

4、安卓上可以添加到桌面，与原生App差不多。

5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。

劣势：

1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。

2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。

3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。

4、依托于微信，无法开发后台管理功能。

微信小程序与H5的区别

第一条是运行环境的不同

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

第二条是开发成本的不同

只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG

第三条是获取系统级权限的不同

系统级权限都可以和微信小程序无缝衔接

第四条便是应用在生产环境的运行流畅度

长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立

小程序的双向绑定和vue的区别

小程序直接this.data的属性是不可以同步到视图的，必须调用：this.setData

小程序的异步请求问题

在回调函数中调用下一个组件的函数

回调函数外自定义保留this指向