十九、MVC架构项目二（1）

微信小程序

1 微信小程序开发概况

小程序端的UI设计及接口文档已完成，接下来就是按照微信小程序的开发流程进行前端页面开发和小程
序API接口开发。其中小程序页面开发是在微信小程序工具，小程序API接口开发是在IDEA工程，作为之
前工程的子模块。
微信小程序开发是微信开发生态（公众号开发、企业号开发、微信支付开发、游戏开发）的一部分，每
种类型的开发都有有一个开发流程和开发规范， 小程序是一种全新的连接用户与服务的方式，它可以在
微信内被便捷地获取和传播，同时具有出色的使用体验。任何一个普通的开发者，经过简单的学习和练
习后，都可以轻松地完成一个小程序的开发和发布。
以下关于小程序的介绍、特色及开发准备，引用官方文档：https://developers.weixin.qq.com/minipr
ogram/dev/framework/quickstart/，随之时间推移，以官方最新发布版本为准。

1.1 微信小程序介绍

从技术的维度看，小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一
个重要入口时，微信就有相关的 JS-API 了。2015年初，微信发布了一整套网页开发工具包，称之为 JSSDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的 Web
开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或
者难以做到的事情了。
小程序的主要开发语言是 JavaScript ，所以通常小程序的开发会被用来同普通的网页开发来做对比。两
者有很大的相似性，对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是
有些许区别的。 网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。小
程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相
关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、Vue 等，在小
程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序
中也是无法运行的。网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或
者编辑器即可。
小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可
完成。

1.2 小程序开发准备

开发小程序的第一步，需要拥有一个小程序 AppID，后续的所有开发流程会基于这个 AppID 来完成。
小程序的注册非常简单，只需几个操作。
使用浏览器打开 https://mp.weixin.qq.com/ 点击立即注册，如图1-1所示，在打开的页面中选择小程
序后，填入相关的信息，就可以完成注册了，也可以自己点击https://mp.weixin.qq.com/wxopen/war
egister?action=step1这个链接。注册完成后需要绑定一个微信号作为管理员。

安装开发者工具：
在小程序开发文档中找到小程序开发工具的下载页面，根据自己的操作系统下载对应的安装包进行安
装。https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
需要注意的是，小程序开发工具在 Windows上仅支持 Windows 7 及以上版，在 Mac 上支持 OS X 10.8
及以上版本。Windows 上，双击下载完成的安装文件，根据提示点击下一步，即可完成安装，安装成
功后，可以在桌面或者开始菜单中找到小程序开发工具的快捷方式，打开即可。

2 微信小程序开发环境

2.1 代码结构

json配置：


WXML模板：

JS交互：

2.2 运行环境