微信小程序开发

小程序介绍

小程序的理念是触手可及、用完即走。无需安装，扫一扫或搜一下即可快速使用。全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序开发完成后，通过审核并发布后，即可使用。 此外，微信官方提供了完备的调试、开发、部署、运营、客服功能。

小程序的开发

技术上来说，小程序的运行环境是一个封闭的web容器（由微信APP提供）, 支持MVVM的开发模式, 熟悉React、VUE的开发者可以很快上手。 新建一个小程序，会有如下四中后缀的文件：

• .json 后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JS 脚本逻辑文件

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。 这里WXML扮演HTML的角色，WXSS扮演CSS的角色，只是做了少量修改。其中：

• WXML重新封装了标签，提供给开发者一些基本的组件，例如view、button、text、map、video、audio、image、map、canvas等
• WXML 提供了“wx:”开头的属性，用于操作DOM。小程序也支持MVVM的模式，提倡把渲染和逻辑分离，JS只用来管理状态
• WXSS具有CSS大部分的特性，小程序做了一些扩充和修改：
  a. 增加了尺寸单位： rpx ；省去了不同设备之间的换算
  b. 提供了全局样式和局部样式： 根木下的app.wxss是全局样式；每个page下的page.wxss只作用于当前页面
  c. WXSS仅支持部分选择器

对于每个小程序，一般都会有如下几个文件：

• app.json 对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
• project.config.json 对IDE的个性化定制
• app.wxss 全局的样式的文件
• app.js 定义App, 初始化全局数据，对小程序生命周期进行管理
• 每个目录下的文件：影响只作用于该目录

小程序的部署

你在本地写的WeApp会被IDE自动打包，上传到微信服务器，然后被微信服务器分发到cdn网络上。上传的过程大致如下：

• APP会被打包成以日期命名 + .wx文件
• IDE会检测包的大小，并提示：代码包大小为 xx kb，超过限制 xx kb，请删除文件后重试。
• APP将会上传到 https://servicewechat.com/wxa-dev/commitsource/?appid=xx&user-version=&user-desc=xx

小程序的框架

TODO

小程序服务端解决方案

小程序本身只是个前端App，用于展示数据，获取用户反馈，同时它需要与第三方服务端交互，才能完成整个服务。
小程序的API提供了丰富的API来完成与服务端你的交互：

• wx.request支持HTTP请求
• wx.uploadFile和wx.downloadFile支持文件的上传、下载
  -支持WebSocket

参考资料

• 微信小程序官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201822
• 资料整理 https://github.com/Aufree/awesome-wechat-weapp/blob/master/README.md
• 微信IDE原理 https://github.com/phodal/weapp-quick
• 小程序的入口 https://www.zhihu.com/question/263328905
• 小商城示例 https://github.com/skyvow/m-mall