## 微信小程序 ### 开发语言 小程序采用 WXML + WXSS + JS 三种开发语言组合，其和网页编程采用的 HTML + CSS + JS 类似，WXML 用来描述当前这个页面的结构，WXSS 用来描述页面的样式，JS 用来处理这个页面和用户的交互。 #### WXML WXML（WeXin Markup Language）和 HTML 类似，也有标签和属性，但针对小程序平台做了些优化。 相较 HTML，小程序的标签显得更加简洁，比如 `div`、`section` 、`header`等块级标签统一为 `view`，`p`、`span`、`b` 等文案类标签统一为 `text`，同时也新增了很多实用标签，比如 `picker` 滚动选择器、`map` 地图、`web-view` 网页容器等。 可以简单理解为，小程序所有的标签都是[原生组件](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fcomponent%2F)。 WXML 支持数据绑定： ~~~ <view> {{message}} </view> ~~~ 在 JS 中定义 `message` 变量： ~~~ Page({ data: { message: 'Hello MOBIKE!' } }) ~~~ 更多关于 WXML 的介绍请见 [WXML · 小程序](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fview%2Fwxml%2F)。 #### WXSS WXSS（WeXin Style Sheets）是微信定义的一套样式语言，其具有 CSS 大部分特性，同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。 小程序使用 rpx（responsive pixel）作为尺寸单位。屏幕宽度固定为 750rpx，设置了 rpx 单位的元素可以根据屏幕宽度进行自适应，所以设计稿统一以 750px 输出（iPhone 6 标准）。 小程序没有 `html` 、`body`标签，如果想要设置页面的样式，可以直接使用 `page` 选择器： ~~~ page{ background: #FFFFFF; } ~~~ WXSS 对选择器的支持并没有 Web 那么丰富，比如属性选择器 `[attr]`、相邻选择器 `h1 + p` 等都不被支持，只支持以下几种：  同时，我们也可以在 WXML 中写内联样式： ~~~ <view style="color: #FF9900;" /> ~~~ 也支持变量： ~~~ <view style="color: {{color}};" /> ~~~ 更多关于 WXSS 的介绍请见 [WXSS · 小程序](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fview%2Fwxss.html)。 #### JS 小程序 JS 中没有 `window`、`document` 等变量，大部分浏览器中全局方法会被禁用，比如 `alert`。但也有部分被支持，比如 `setTimeout`、`encodeURIComponent`等，具体可以在开发者工具中尝试使用，官方文档并没有详细的介绍。 小程序 JS 添加了“全局”的 `wx` 命名空间，其挂载了很多实用的函数方法，比如 `wx.request` 用来发送网络请求，`wx.setStorage` 用来本地存储，`wx.getLocation` 用来获取用户位置信息等。 更多 `wx` 提供的方法请见 [API · 小程序](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2F)。 ### 生命周期 和大多数前端框架类似，小程序也有生命周期。 #### App 生命周期 整个小程序的生命周期如下图所示：  说明： | 属性 | 类型 | 描述 | 触发时机 | | --- | --- | --- | --- | | onLaunch | Function | 生命周期函数--监听小程序初始化 | 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） | | onShow | Function | 生命周期函数--监听小程序显示 | 当小程序启动，或从后台进入前台显示，会触发 onShow | | onHide | Function | 生命周期函数--监听小程序隐藏 | 当小程序从前台进入后台，会触发 onHide | App 的生命周期是在小程序启动后全局监控的，不随着页面切换变化而变化。通过 `App()` 注册小程序，传入对应的生命周期函数，具体文档见[注册程序](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fapp-service%2Fapp.html)。 #### Page 生命周期 除了整个小程序 App 的生命周期，每个页面（Page）也有自己的生命周期：  说明： | 属性 | 类型 | 描述 | | --- | --- | --- | | onLoad | Function | 生命周期函数--监听页面加载 | | onReady | Function | 生命周期函数--监听页面初次渲染完成 | | onShow | Function | 生命周期函数--监听页面显示 | | onHide | Function | 生命周期函数--监听页面隐藏 | | onUnload | Function | 生命周期函数--监听页面卸载 | 当页面状态发生变化时，会触发对应的生命周期函数，可以通过 `Page()` 注册页面并传入监听函数。具体文档见[注册程序 · 小程序](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fapp-service%2Fpage.html)。 * * * * * [摩拜单车小程序开发实践与框架分析 - 摩拜前端团队 - 掘金小册](https://juejin.im/book/5b30c3b351882574957a788f/section/5b337860f265da59bf7a09b9?from=singlemessage) [mobikeFE/xiaoce-demo: 掘金小册 demo (🚧施工中)](https://github.com/mobikeFE/xiaoce-demo) * * * * * [简易教程 · 小程序](https://developers.weixin.qq.com/miniprogram/dev/) * * * * * last update：2018-7-29 19:17:28