第一章 小程序起步提示：本套教程以微信官方小程序文档做为学习导引，因为只有官方的，才是最权威最准确的。如果本人整理或扩展的知识内容有误，请火速留言转答。我是一个喜欢IT程序的小白。
本章节会以理论知识结合实际代码做为学习主导(理论知识比实际代码多一些)，需要理解什么是小程序，为什么会出现小程序，小程序代码的构成和宿主环境，以及团队间开发小程序是如何协同工作和发布，这些都是在写小程序代码之前需要知道和了解的，是必备的前题知识。
如果读者没有使用过基于MVVM开发模型的Web前端框架，那么本章节中的理论知识的确需要慢慢理解和深入思考。如果不提前理解这些理论知识，冒然就开始写小程序的代码，当遇到疑问而不解时，就会知道理论知识有时还是挺有用的：）。
1.1 小程序简介小程序是一种全新的连接用户与服务商的方式，它可以在微信内部被便捷地获取和传播，同时具有非常出色的使用体验。任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布。
小程序-服务商-用户，这三者之间的关系如图1-xx所示。
图1-xx 三者之间的关系
互联网服务商使用微信小程序平台开发小程序应用供用户使用，微信小程序为互联网服务商和用户之间搭建了沟通的桥梁。
在手机中安装常见的APP，比如货拉拉，中国移动，知乎等等各种类型的应用都是基于主流的两大开发平台Android和iOS上进行开发的，但是，现在的开发平台又多了一种选择，那就是基于微信平台的小程序，很多高频使用的APP都已经有了对应的小程序版本，如图1-xx所示。
图1-xx 高频使用的小程序
中小型公司在搭建APP平台时，需要开发双平台(Android和iOS)的版本，这无疑是增加了财务支出成本。如果选择小程序，则会兼容双平台，大大减少了财务支出成本。这也是为什么小程序在近几年逐渐成为主流技术的主要原因。
1.1.1 小程序技术发展史提示：微信中的WebView组件相当于HTML页面中的iframe，它允许开发者在小程序中打开一个H5页面。
从技术的维度看，小程序并非凭空冒出来的一个概念。当微信中的WebView组件逐渐成为移动Web的一个重要入口时，微信就有相关的JS API了，比如微信提供的WeixinJSBridge对象和JS-SDK库。
为什么微信要提供WeixinJSBridge对象？主要的目的是为了在微信中实现Web页面与微信之间的交互，比如数据传输，视图展示等等扩展的功能。
JS-SDK库是对WeixinJSBridge对象的封装。
1.1.1.1 WeixinJSBridge对象
使用WeixinJSBridge对象实现预览图片的示例代码如下：
WeixinJSBridge.invoke('imagePreview', {
current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
urls: [ // 所有图片的URL列表，数组格式
'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
]
}, function (res) {
console.log(res.err_msg)
})
上面代码是一个调用微信原生组件浏览图片的JS API，相比额外引入一个JS图片预览组件库，这种调用方式显得非常简洁和高效。
而实际上，微信官方并没有正式的对外暴露过如此调用，此类API最初是提供给腾讯内部的一些业务使用，很多外部开发者发现了之后，依葫芦画瓢地使用了，逐渐成为微信中网页的事实标准。
1.1.1.2 JS-SDK库
在2015年初，微信发布了一整套网页开发工具包，称之为JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的Web开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情。
使用JS-SDK库实现预览图片的示例代码如下：
wx.previewImage({
current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
urls: [ // 所有图片的URL列表，数组格式
'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
],
success: function (res) {
console.log(res.err_msg)
}
})
JS-SDK库是对之前的WeixinJSBridge对象的一个包装以及新能力的释放，并且由对内开放转为对所有开发者开放，在很短的时间内获得了极大的关注。从数据监控来看，绝大部分在微信内传播的移动网页都使用到了相关接口。
JS-SDK解决了移动网页能力不足的问题，通过暴露微信的接口使得Web开发者能够拥有更多的能力。然而在更多的能力之外，JS-SDK库并没有解决使用移动网页遇到的体验不良的问题，比如用户在访问网页的时候，在浏览器开始显示之前都会有一个白屏的过程，在移动端，受限于设备性能和网络速度，白屏会更加明显。
1.1.1.3 WeixinJSBridge和JS-SDK的测试
前面章节简要展示了使用WeixinJSBridge对象和JS-SDK库的DEMO代码片段，在本章节将搭建两者的运行环境，看一下它们运行的效果。
使用任何支持创建Web项目的IDE创建名称为WeixinJSBridge_JSSDK的Web项目(笔者使用HBuilderX)。
项目结构如图1-xx所示。
图1-xx 项目结构
文件WeixinJSBridge.html代码如下：
WeixinJSBridge.html
style="width: 200px; height: 200px; font-size: 40px;">
文件JSSDK.html代码如下：
JSSDK.html
style="width: 200px; height: 200px; font-size: 40px;">
在win11设置中开启移动热点，如图1-xx所示。
图1-xx 开启移动热点
手机连接此热点。
在win11中启动Web服务器，在pc中使用浏览器访问这2个html文件的运行效果如图1-xx所示，证明Web服务器状态正常。
图1-xx Web服务器成功启动
将如下2个网址发送给微信：
http://192.168.0.120:8848/WeixinJSBridge_JSSDK/WeixinJSBridge.html
http://192.168.0.120:8848/WeixinJSBridge_JSSDK/jssdk.html
在微信中打开如下网址：
http://192.168.0.120:8848/WeixinJSBridge_JSSDK/WeixinJSBridge.html
显示界面1如图1-xx所示。
图1-xx 显示界面
点击按钮后的效果如图1-xx所示。
图1-xx 显示对话框
点击“确定”按钮，显示内容如图1-xx所示。
图1-xx 成功预览图片
在微信中打开如下网址：
http://192.168.0.120:8848/WeixinJSBridge_JSSDK/jssdk.html
显示界面1如图1-xx所示。
图1-xx 显示界面
点击按钮后的效果如图1-xx所示。
图1-xx 显示对话框
点击“确定”按钮，显示内容如图1-xx所示。
图1-xx 成功预览图片
至此，成功使用WeixinJSBridge对象和JS-SDK库实现预览图片。
1.1.1.4 微信Web资源离线存储
微信技术团队把很多技术精力放置在如何帮助平台上的Web开发者解决常见的问题(比如白屏)，因此微信技术团队设计了一个JS-SDK的增强版本，其中有一个重要的功能，称之为“微信Web资源离线存储”。
什么是微信Web资源离线存储？它是面向Web开发者提供的基于微信内的Web加速方案。通过使用此技术，Web开发者可以借助微信提供的资源存储能力，直接从微信本地加载Web资源而不需要再从服务端拉取，从而减少网页加载时间，减少白屏出现的时长，为微信用户提供更优质的网页浏览体验。每个公众号下所有Web App累计最多可缓存5M的资源。
微信Web资源离线存储有点类似HTML5的Application Cache，但在设计上规避了一些Application Cache的不足。
在内部测试中，微信技术团队发现离线存储能够解决一些问题，但对于一些复杂的页面依然会有白屏问题，例如页面加载了大量的CSS或者是JavaScript文件。除了白屏，影响Web体验的问题还有缺少操作的反馈，主要表现在两个方面：页面切换的生硬和点击的迟滞感。
对于一些有经验的Web开发者而言，会使用一些SPA(Single Page Application)的框架，来模拟客户端原生页面的切换过渡。通常的方式是在一个WebView中去模拟多个页面，通过CSS处理，加之精细化的脚本代码做到点击反馈和页面切换来获得较好的体验。然而并不是所有的开发者都有足够的时间和精力来使得页面的体验变得出色。
1.1.1.5 小程序的由来
微信面临的问题是如何设计一个比较好的系统，使得所有开发者在微信中都能获得比较好的体验。这个问题是之前的WeixinJSBridge对象和JS-SDK库所处理不了的，需要一个全新的系统来完成，它需要使得所有的开发者都能做到：
（1）快速的加载
（2）更强大的能力
（3）原生的体验
（4）易用且安全的微信数据开放
（5）高效和简单的开发
这就是小程序的由来。
1.1.2 小程序与普通网页开发的区别开发小程序的主要语言是JavaScript。小程序的开发与普通的网页开发有不少相似之处，对于前端开发者来说，从网页开发迁移到小程序开发的成本并不高，但是两者还是有些区别的：
在网页开发中，渲染任务和脚本任务是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，两者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的DOM API进行DOM操作。小程序的逻辑层和渲染层是分开的，逻辑层运行在不同于渲染层的独立JS运行时中，因此并不能直接使用DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如jQuery、Zepto等，在小程序中是无法运行的。（3）逻辑层的JS运行时与NodeJS环境也不尽相同，所以一些NPM的包在小程序中也是无法运行的。
网页开发者需要面对的环境是各式各样的浏览器，PC端需要面对IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及iOS、Android系统中的各式WebView。而小程序开发过程中需要面对的是两大操作系统iOS和Android的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，如图1-xx所示。
图1-xx 三大运行环境的区别
网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者代码编辑器即可。而小程序的开发则有所不同，需要经过申请小程序账号、安装小程序开发者工具、配置项目等等过程方可完成。
1.1.3 小程序的特色对于普通用户，小程序实现了应用的触手可及，只需要通过扫描二维码、搜索或者是朋友的分享就可以直接打开，加上优秀的体验，小程序使得服务提供者的触达能力变得更强。
对于开发者而言，小程序框架本身所具有的快速加载和快速渲染能力，加之配套的云能力、运维能力和数据汇总能力，使得开发者不需要去处理琐碎的工作，可以把精力放置在具体的业务逻辑的开发上。
小程序的模式使得微信可以开放更多的数据，开发者可以获取到用户的一些基本信息，甚至能够获取微信群的一些信息，使得小程序的开放能力变得更加强大。
1.1.4 体验小程序小程序开发者可以使用微信客户端(6.7.2及以上版本)扫描如图1-xx所示的二维码，体验小程序的众多功能。
图1-xx 小程序的Demo演示
与小程序配套的官方Demo示例代码的仓库地址如下：
https://github.com/wechat-miniprogram/miniprogram-demo
1.2 实现第一个小程序开发小程序的第一步是需要拥有一个小程序账号，通过这个账号就可以管理你的小程序了。
1.2.1 申请账号进入小程序注册页面，地址如下：
https://mp.weixin.qq.com/wxopen/waregister?action=step1
根据指引填写信息和提交相应的资料，就可以拥有自己的小程序账号。
注册步骤1如图1-xx所示。
图1-xx 注册步骤1
注册步骤2如图1-xx所示。
图1-xx 注册步骤2
注册成功的效果如图1-xx所示。
图1-xx 注册成功的效果
使用刚才注册的小程序账号登陆小程序管理平台，可以管理你的小程序的权限，查看数据报表，发布小程序等操作。小程序管理平台界面如图1-xx所示。
图1-xx 小程序管理平台界面
开发小程序需要拥有一个小程序的AppID，后续的所有开发流程会基于这个AppID来完成。可以在菜单"开发与服务"-"开发管理"-"开发设置"中看到小程序的AppID，如图1-xx所示。
图1-xx 查看小程序的AppID
小程序的AppID相当于小程序在小程序平台的一个身份证，后续会在很多地方要用到AppID(注意这里要区别于服务号或订阅号的AppID)。
有了小程序账号和小程序AppID之后，还需要一个开发者工具来开发小程序。
1.2.2 安装开发者工具在如下网址下载微信小程序的开发者工具：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
笔者使用windows操作系统，所以下载的版本如图1-xx所示。
图1-xx 下载版本
在微信开发者工具下载页面根据自己的操作系统下载对应的安装包进行安装。
有关开发者工具更详细的介绍可以查看如下网址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
打开小程序的开发者工具，用微信扫码登录开发者工具，准备开发第一个小程序吧！
开发者工具的扫码登陆界面如图1-xx所示。
图1-xx 扫码登陆开发者工具
1.2.3 创建第一个小程序项目扫码成功登陆后的开发者工具的初始界面如图1-xx所示。
图1-xx 新建小程序项目
新建的项目类型选择"小程序"项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序AppID，设置项目名称为beginStep，勾选"不使用云服务"，模板选择"JS-基础模板"，配置界面如图1-xx所示。
图1-xx 基础配置
点击"创建"按钮后就得到了第一个小程序项目。
1.2.4 编译预览点击顶部的"编译"按钮就可以在微信开发者工具中预览第一个小程序了(虽然我们一行代码也没有写)，如图1-xx所示。
图1-xx 成功预览第一个小程序
点击"编译"按钮后，可以在开发者工具的左侧模拟器界面中看到这个小程序的运行效果。
也可以点击"预览"按钮，然后通过微信的扫一扫功能在手机上体验第一个小程序的运行效果，如图1-xx所示。
图1-xx 使用手机扫描二维码
扫描二维码后在手机真机上可以看到第一个小程序的运行效果，如图1-xx所示。
图1-xx 真机上的运行效果
至此，已经成功创建了第一个小程序，并且在模拟器和真机中也体验到了它流畅的表现。
作为一个程序员，一个小程序的开发者，以上学习的内容不足以涉足小程序开发的世界(一行代码都没有研究)，那么在下一个章节，一起来看看小程序的代码构成吧！那才是一个程序员应该关注的事情~
1.3 小程序代码构成小程序由配置代码JSON文件、模板代码WXML文件、样式代码WXSS文件以及逻辑代码JavaScript文件所组成。
在前面章节中，通过使用开发者工具创建了一个小程序项目，可以留意到在这个项目里面自动创建了不同类型的文件，如图1-xx所示。
图1-xx 不同的文件类型
在小程序项目中有常见的4种文件类型：
.json：JSON配置文件（2）.wxml：WXML模板文件
（3）.wxss：WXSS样式文件
（4）.js：javascript脚本逻辑文件
下面分别介绍一下这4种文件类型的作用。
1.3.1 JSON配置JSON是一种数据格式，并不是编程语言，在小程序中，JSON扮演的是静态配置的角色。
在项目的根目录下有一个app.json和project.config.json文件，此外在pages/logs目录下还有一个logs.json，下面依次来说明一下这些不同名称的json文件的用途。
1.3.1.1 小程序全局配置app.json
app.json文件是当前小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时时间、底部tab等。
在开发者工具中创建的小程序项目里面会自动创建app.json配置文件，默认内容如下：
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
各个配置项的含义：
pages属性：用于描述当前小程序中的所有页面路径，这是为了让微信客户端知道当前小程序的页面定义在哪个目录里。"pages/index/index"表示首页路径。"pages/logs/logs"表示日志页面路径，一般用于展示用户操作记录。数组的第一个页面是小程序的启动首页。新增页面后需要在数组中添加路径，否则无法被访问。window属性：定义小程序所有页面的顶部背景颜色，文字颜色等。navigationBarTextStyle代表导航栏标题、状态栏的颜色，仅支持black或者white。navigationBarTitleText代表导航栏标题文字的内容。navigationBarBackgroundColor代表导航栏的背景颜色。style属性：从微信客户端7.0开始，UI界面进行了大改版。小程序也进行了基础组件的样式升级。app.json中配置"style":"v2"可表明启用新版的组件样式。componentFramework属性：指定小程序使用的组件框架。glass-easel是一个新的组件框架，是对旧版组件框架exparser的一个重写，拥有比旧版组件框架更好的性能和更多的特性。sitemapLocation属性：指明sitemap.json文件的位置，默认为sitemap.json，和app.json文件在同级目录下。微信现已开放小程序内搜索，开发者可以通过sitemap.json配置，或者管理后台页面收录开关来配置其小程序页面是否允许被微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。lazyCodeLoading属性：目前仅支持值requiredComponents，代表开启小程序“按需注入”特性，表示仅在需要时加载组件相关的代码包。通常情况下，在小程序启动时，启动页面依赖的所有代码包(主包、分包、插件包、扩展库等)的所有JS代码会全部合并注入，包括其他未访问的页面以及未使用到的自定义组件，同时所有页面和自定义组件的JS代码会被立刻执行。这造成很多没有使用的代码在小程序运行环境中注入执行，影响注入耗时和内存占用。自基础库版本2.11.1起，小程序支持通过配置，有选择地注入必要的代码，以降低小程序的启动时间和运行时内存。更多配置项的使用细节可以参考如下网址：
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE
1.3.1.2 开发者工具配置project.config.json
大家在使用开发者工具的时候，通常都会针对各自喜好做一些个性化的配置，例如界面颜色、编译配置等等，但当换了另外一台电脑重新安装开发者工具的时候，还要再重新的配置一遍，比较繁琐和冗余。
考虑到这一点，小程序开发者工具在每个项目的根目录下都会生成一个project.config.json文件，在开发者工具上做的任何配置都会写入到这个文件中，当重新安装开发者工具或者换了另外一台电脑继续工作时，只需要在开发者工具中载入同一个项目的代码包，开发者工具就会自动帮你恢复到当时开发此项目时的个性化配置，包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
更多配置项的使用细节可以参考如下网址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
大多数情况下，配置文件project.config.json不需要手动编辑。
1.3.1.3 页面配置page.json
这里的page.json其实用来表示pages/logs目录下的logs.json这类和小程序页面相关的配置。如图1-xx所示。
图1-xx 页面配置文件
如果整个小程序的界面风格是蓝色调，那么可以在app.json文件里边声明顶部颜色是蓝色的即可。但是实际情况可能不是这样，可能小程序里面的每个页面都有不一样的色调来区分不同功能的模块，因此通过page.json文件可以让开发者独立的定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等配置。
更多配置项的使用细节可以参考如下网址：
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE
1.3.1.4 JSON语法
JSON的对象使用{}来表示。JSON通过key-value键值对的方式来表达数据。JSON的Key必须包裹在一个双引号中。在实践中，编写JSON的时候，忘了给Key值加双引号或者把双引号写成单引号是常见的错误。
JSON的值只能是以下几种数据类型，其他任何的数据类型都会触发报错，例如JavaScript中的undefined。
（1）数字，包含浮点数和整数
（2）字符串，需要包裹在双引号中
（3）Bool值，true或者false
（4）数组，需要包裹在[]方括号中
（5）对象，需要包裹在{}大括号中
（6）Null
还需要注意的是，JSON文件中无法使用注释，试图添加注释将会引发报错。
1.3.2 WXML模板在网页编程领域，通常采用的是HTML+CSS+JS这样的组合，其中HTML用来描述页面的结构，CSS用来描述页面的外观，JS用来处理页面和用户的交互。
同样的道理，在小程序中也有对应的角色，其中WXML充当的就是类似HTML的角色。打开pages/index/index.wxml文件后会看到以下的代码内容：
首先，不需要知道每个标签的含义，但从代码的写法上来看，WXML和HTML非常相似，WXML也由标签、属性等等构成，但是也有很多不一样的地方，比如：
标签的名字有点不一样：往往写HTML的时候，经常用到的标签是div，p，span等等，开发者在写一个页面的时候，可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么不把这些常用的组件包装起来呢，这样会大大的提高开发效率，庆幸的是，微信做到了。在上面示例代码中可以看到，小程序的WXML用的标签是view，button，text等等，这些标签就是小程序给开发者包装好的基础组件，另外小程序还提供了地图、视频、音频等等高级组件。（2）多了一些wx:if这样的属性以及{{}}这样的表达式：在以前的网页开发流程中，通常会通过JS脚本操作DOM树，以引起界面的一些变化来响应用户的行为。例如，用户点击某个按钮的时候，JS会记录一些状态到JS变量里边，同时通过DOM API操控DOM的属性或者行为，进而引起界面的一些变化。但当项目越来越大的时候，在项目代码中会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式或者方式，因此就有了MVVM的开发模式(例如React和Vue)。MVVM提倡把渲染和逻辑分离。简单来说就是不要再让JS直接操控DOM，JS只需要管理状态即可，然后再通过一种模板语法(比如wx:if和{{}})来描述状态和界面结构的关系。
下面详细介绍一下MVVM开发模式。在很早之前的前端技术的开发领域中，开发方式是直接通过dom对象对节点的文本或者属性进行操作，另外还在代码中夹杂着业务和处理UI的代码，造成的后果就是代码内容比较杂乱，不容易后期维护和扩展。这些缺点也是造成此开发方式不再是现在主流的前端开发方式的主要原因。现在流行的开发方式是MVVM，它代码集中，容易后期维护和扩展，不再直接使用dom对象操作节点。
不使用dom对象还能操作节点？这是如何做到的呢？它的理论基础就是MVVM模式。小程序就是使用MVVM模式开发的平台或者说是框架。
那么，什么是MVVM模式？MVVM是Model-View-ViewModel的简写，目的还是分层分工。MVVM中的各个组件分工如下：
（1）Model：来自服务器的数据，通常是JSON对象。
（2）View：前端视图界面。
（3）ViewModel：View和Model不能直接通讯，ViewModel是两者之间的桥梁，是两者之间的中介，它是View和Model进行绑定的整合器组件。ViewModel主要负责两件事情：
（A）由Model生成View：解析Model并生成View。Model改变时，ViewModel组件会把最新的Model同步到View中。实现方式是数据绑定。
（B）由View生成Model：根据View结构生成Model。实现方式是DOM事件监听。
如果这两点都实现了，则称为双向绑定，效果如图1-xx所示。
图1-xx 双向绑定
ViewModel组件负责将Model和View进行双向绑定。
小程序是直接操作data数据(Model)进而影响dom(View)。小程序这种写法可以让程序员把精力集中于实现业务逻辑，并且小程序的代码风格比较集中，不零散，便于后期维护和扩展。
注意：学习小程序一定要在思想观念和意识上有所转变，小程序MVVM开发模式的宗旨就是：data数据驱动view视图。只要拥有这种思想或者习惯这种思想再学习小程序就相对比较简单了，而且写出来的小程序代码风格才是正确的，不歪不偏不奇怪的。
小程序也用到了MVVM开发模式，如果需要把一个HelloWorld的字符串显示在界面上，WXML可以这么写：
JS只需要管理状态即可：
this.setData({ msg: "HelloWorld" });
通过{{}}的语法把一个变量绑定到界面上称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要if/else，for等等类似这样的逻辑控制能力。在小程序里，这些控制能力都用wx:开头的属性来表达。
与WXML有关更多的内容请参考如下网址：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml
下面实现一下把HelloWorld字符串显示在界面上。
创建名称为showHelloWorld的小程序项目。
编辑pages\index\index.wxml文件代码如下：
编辑pages\index\index.js文件代码如下：
Page({
data: {
},
onReady() {
this.setData({ msg: "Hello World ~ ！" })
}
})
运行效果如图1-xx所示。
图1-xx 运行效果
成功使用数据绑定实现数据的展示。
1.3.3 WXSS样式WXSS具有CSS大部分的特性，小程序在WXSS也做了一些扩充和修改：
（1）新增了尺寸单位。在写CSS样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，需要采用一些技巧来换算一些像素单位。而WXSS在底层支持新的尺寸单位rpx，开发者可以免去换算的烦恼，只需要交给小程序底层来换算即可。由于换算采用的是浮点数运算，所以运算结果会和预期结果有一点点偏差。
（2）提供了全局样式和局部样式。和前边app.json全局配置，page.json局部配置的概念相同，可以写一个app.wxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式page.wxss仅对当前页面生效。
（3）此外WXSS仅支持部分CSS选择器。
与WXSS更多内容的介绍请参考如下网址：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
下面实现一下样式的基本使用。
创建名称为showHelloWorld的小程序项目。
编辑pages\index\index.wxml文件代码如下：
编辑pages\index\index.wxss文件代码如下：
#button1{
color:red;
}
.button2{
color:green;
}
运行效果如图1-xx所示。
图1-xx 运行效果
1.3.4 JS逻辑交互一个服务仅仅只有界面展示是完全不够的，还需要和用户进行交互，包含响应用户的点击、获取用户的位置等等。在小程序里可以通过编写JS脚本文件来处理用户的操作。
wxml代码如下：
当点击button按钮的时候，希望把界面上msg显示成“HelloWorld”，于是在button上声明一个属性:bindtap，然后在JS文件里声明clickMe方法来响应这次点击操作。
js代码如下：
Page({
clickMe: function () {
this.setData({ msg: "Hello World" })
}
})
响应用户的操作就是这么简单，更多的事件解释可以参考如下网址：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
此外还可以在JS中调用小程序提供的丰富的API，利用这些API可以很方便的调用微信提供的能力，例如获取用户信息、本地存储、微信支付等。与小程序API相关的文档地址如下：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html
下面实现一下单击交互的基本使用。
创建名称为testClick的小程序项目。
编辑pages\index\index.wxml文件代码如下：
编辑pages\index\index.js文件代码如下：
Page({
data: {
msg: "我是默认的文本"
},
changeTest() {
this.setData({ msg: "我是最新的文本" });
}
})
运行效果如图1-xx所示。
图1-xx 运行效果
通过本章节，了解了小程序涉及到的文件类型以及对应的角色，在下一个章节中，将把本章所涉及到的常用文件通过“小程序的框架”给“串”起来，让他们都工作起来。
1.4 小程序宿主环境微信客户端为运行小程序所提供的环境称为宿主环境。小程序借助宿主环境提供的能力可以完成许多普通网页无法完成的功能。
在前面章节中已经把小程序所涉及到的常用文件类型介绍了一遍，在本章节中将介绍一下这些文件是怎么配合工作的。
1.4.1 渲染层和逻辑层首先来简单了解一下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中WXML模板和WXSS样式工作在渲染层，JS脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理：
渲染层的界面使用WebView线程进行渲染；逻辑层采用JsCore线程运行JS脚本；一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如图1-xx所示。
图1-xx 小程序的通信模型
有关渲染层和逻辑层的详细文档请参考如下网址：
https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
1.4.2 程序与页面微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。紧接着通过app.json配置文件中的pages字段就可以知道当前小程序的所有页面路径：
{
"pages": [
"pages/index/index",
"pages/logs/logs"
]
}
这段配置代码说明在项目中定义了两个页面，分别位于pages/index/index和pages/logs/logs。而写在pages字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。
于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出首页的界面。
小程序启动后，在app.js文件中定义的App实例的onLaunch回调函数会被执行：
App({
onLaunch: function () {
// 小程序启动后会触发此函数
}
})
整个小程序只有一个App实例，是全部页面共享的。
更多的事件回调请参考如下文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
接下来再简单看看小程序的一个页面是怎么写的。
在开发者工具中可以观察到pages/logs/logs下其实是包括了4种文件类型，微信客户端会先根据logs.json配置生成一个界面，顶部的颜色和文字都可以在这个json文件里面进行配置。紧接着客户端就会装载这个页面的WXML结构和WXSS样式，最后客户端会装载logs.js，该文件的大体内容如下：
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后执行
}
})
Page是一个页面构造器，这个构造器生成了一个页面。在生成页面的时候，小程序框架会把data数据和index.wxml一起渲染出最终的结构，于是就看到了小程序的外观样子。
在渲染完界面之后，页面实例就会收到一个onLoad的回调，可以在这个回调中处理其它的逻辑。
关于Page构造器更多详细的文档请参考如下网址：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
1.4.3 组件小程序提供了丰富的基础组件给开发者进行使用，开发者可以像搭积木一样，组合各种组件拼成自己的小程序。
就像HTML中的div，p等等标签一样，在小程序里面，只需要在WXML文件中写上对应的组件标签名字就可以把该组件显示在界面上。例如，需要在界面上显示地图，只需要这样写即可：
使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现。例如，希望地图打开后默认的经纬度是广州，那么需要声明地图的longitude经度和latitude纬度两个属性：
组件的内部行为也会通过事件的形式让开发者可以感知。例如用户点击了地图上的某个标记，可以在js编写markertap函数来进行处理：
当然也可以通过style或者class来控制组件的样式，以便适应界面的宽度高度等等。
更多的组件可以参考如下网址：
https://developers.weixin.qq.com/miniprogram/dev/component/
1.4.4 API为了让开发者可以很方便的调用微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多API给开发者去使用。
要获取用户的地理位置时，只需要使用如下代码：
wx.getLocation({
type: 'wgs84',
success: (res) => {
varlatitude = res.latitude//纬度
varlongitude = res.longitude//经度
}
})
调用微信扫一扫的功能，只需要使用如下代码：
wx.scanCode({
success: (res) => {
console.log(res)
}
})
需要注意的是：多数API的回调都是异步的，所以需要处理好代码逻辑的异步问题。
更多API的能力请参考如下网址：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html#API
通过本章节已经大概了解了小程序运行的一些基本概念，当开发完一个小程序之后就需要发布小程序，那么在下一个章节会知道发布前需要做什么准备工作。
1.5 小程序协同工作和发布在中大型的软件公司里，人员的分工非常仔细，一般会有不同岗位角色的员工同时参与同一个小程序项目。为此，小程序平台设计了不同的权限管理，使得项目管理者可以更加高效的管理整个团队的协同工作。
以往在开发完网页之后，需要把网页的代码和资源放在服务器上，让用户通过互联网来访问。在小程序的平台里，开发者完成开发之后，需要在开发者工具里提交小程序的代码包，然后在小程序后台发布小程序，用户可以通过搜索或者其它入口进入该小程序。
在本章节中会把团队协同工作的注意事项和小程序发布前后所涉及的概念和流程做一些介绍。
1.5.1 协同工作如果只是一个人开发小程序，可以暂时先跳过这部分，如果是一个团队，则需要先了解一些概念。
多数情况下，一个团队多人同时参与同一个小程序项目，每个角色所承担的工作或者权限是不一样的，中大公司的分工更为仔细。为了更形象的表达团队不同角色的关系以及权限的管理，通过虚拟一个项目成员组织结构来描述日常是如何协同合作完成一个小程序的发布，组织关系如图1-xx所示。
图1-xx 虚拟小程序项目组
开发小程序大体的工作流程如下：
（1）项目管理成员组负责统筹整个项目的进展和风险、把控小程序对外发布的节奏
（2）产品组提出需求，产品组与设计组讨论并对需求进行抽象
（3）设计组设计出可视化流程与图形，输出设计方案
（4）开发组依据设计方案，进行程序代码的编写
（5）代码编写完成后，产品组与设计组体验小程序的整体流程
（6）测试组编写测试用例并对小程序进行各种边界测试
（7）发布小程序
项目里一般的成员构成与工作流程如图1-xx所示。
图1-xx 提出需求到发布小程序的流程
这里需要注意的一点就是：小程序的成员管理。小程序成员管理包括对小程序项目成员以及体验成员的管理：
项目成员：表示参与小程序开发、运营的成员，可以登录小程序管理后台，包括运营者、开发者以及数据分析者。管理员可在“成员管理”中添加、删除项目成员，并设置项目成员的角色。体验成员：表示参与小程序内测体验的成员，可以使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员。不同项目成员拥有不同的权限，从而保证小程序开发安全和有序。
项目成员的权限列表如表1-xx所示。
权限
运营者
开发者
数据分析者
开发者权限
√
体验者权限
√
√
√
登录
√
√
√
数据分析
√
微信支付
√
推广
√
开发管理
√
开发设置
√
暂停服务
√
解除关联公众号
√
腾讯云管理
√
小程序插件
√
游戏运营管理
√
表1-xx 项目成员的权限列表
各个权限的功能说明：
开发者权限：可以使用小程序开发者工具以及开发版小程序进行开发体验者权限：可以使用体验版小程序登录：可以登录小程序管理后台，无需管理员确认数据分析：使用小程序统计模块功能查看小程序数据微信支付：使用小程序微信支付(虚拟支付)模块推广：使用小程序流量主、广告主模块开发管理：小程序提交审核、发布、回退开发设置：设置小程序服务器域名、消息推送以及扫描普通链接二维码打开小程序暂停服务设置：暂停小程序线上服务解除关联公众号：可以解绑小程序已关联的公众号小程序插件：可以进行小程序插件的开发管理和设置游戏运营管理：可以使用小游戏管理后台的素材管理、游戏圈管理等功能需要留意，项目管理者控制整个小程序的发布、回退、下架等敏感操作，不应把敏感操作的权限分配给不相关的人员。
1.5.2 小程序的版本一般的软件开发流程，开发者编写代码自测开发版程序，直到程序达到一个稳定并可体验的状态时，开发者会把这个体验版本给到产品经理和测试人员进行体验测试，最后修复完程序的Bug后发布，以供外部用户正式使用。小程序的版本根据这个流程设计了小程序版本的概念，不同版本的介绍如表1-xx所示。
权限
说明
开发版本
使用开发者工具，可以将代码上传到开发版本中。开发版本只保留每人最新一份上传的代码。点击提交审核，可以将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。
体验版本
可以选择某个开发版本作为体验版，并且选取一份体验版。
审核中版本
只能有一份代码处于审核中。有审核结果后可以发布到线上，也可以直接重新提交审核，覆盖原来的审核版本。
线上版本
线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。
表1-xx 小程序版本的概念
考虑到项目是协同开发的模式，一个小程序可能同时由多个开发者进行开发，往往开发者在小程序开发者工具上编写完代码后需要到手机中进行真机体验，所以每个开发者拥有自己对应的一个开发版本。因为处于开发中的版本是不稳定的，开发者随时会修改代码覆盖开发版，为了让测试和产品经理有一个完整稳定的版本可以体验测试，小程序平台允许把其中一个开发版本设置成体验版，因此建议在项目开发阶段特殊分配一个开发角色，用于上传稳定可供体验测试的代码，并把上传的开发版本设置成体验版。
1.5.3 发布上线一个小程序从开发完到上线一般要经过预览->上传代码->提交审核->发布等步骤。
1.5.3.1 预览
使用开发者工具可以预览小程序，帮助开发者检查小程序在移动客户端上的真实表现。
点击开发者工具顶部操作栏的“预览”按钮，开发者工具会自动打包当前项目，并上传小程序代码至微信服务器，成功之后会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。
1.5.3.2 上传代码
同预览不同，上传代码是用于提交体验或者审核使用的。
点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注。需要注意的是，这里的版本号以及项目备注是为了方便管理员检查版本所使用的，开发者可以根据自己的实际要求来填写这两个字段。
上传成功之后，登录小程序管理后台-版本管理-开发版本就可以找到刚刚提交上传的版本了。可以将这个版本设置成体验版或者是提交审核。
1.5.3.3 提交审核
为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过审核的。
在开发者工具中上传了小程序的代码之后，登录小程序管理后台-版本管理-开发版本找到提交上传的版本。
在开发版本的列表中，点击提交审核，按照页面提示，填写相关的信息，就可以将小程序提交审核。
需要注意的是，请开发者严格测试了版本之后，再提交审核，过多的审核如果不通过，可能会影响后续的进度。
1.5.3.4 发布
审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录小程序管理后台-版本管理-审核版本中可以看到通过审核的版本。点击发布后，即可发布小程序。
小程序提供了两种发布模式：全量发布和分阶段发布。
全量发布是指当点击发布之后，所有用户访问小程序时都会使用当前最新的发布版本。分阶段发布是指分不同时间段来控制部分用户使用最新的发布版本，分阶段发布也称为灰度发布。一般来说，普通小程序发布时采用全量发布即可，当小程序承载的功能越来越多，使用的用户数越来越多时，采用分阶段发布是一个非常好的控制风险的办法。
1.5.3.5 小程序码
在很多场景下，用户会通过扫描一个二维码快速进入一个小程序。但是，当用户在扫描一个二维码时，并不知道当前这次扫码会出现什么样的服务，因为二维码的背后有可能是公众号、小程序、网页服务、支付页面、添加好友等不同的服务。为了让用户在扫码之前就有一个明确的预期，因此微信设计了小程序码，如图1-xx所示。
图1-xx “小程序数据助手”的小程序码
小程序码在样式上更具有辨识度和视觉冲击力，相对于二维码来说，小程序的品牌形象更加清晰明显，可以帮助开发者更好地推广小程序。在发布小程序之后，小程序管理平台会提供对应的小程序码的预览和下载，开发者可以自行下载小程序码，用于线上和线下的小程序服务的推广。
1.5.4 运营数据有两种方法可以方便的看到小程序的运营数据：
（1）方法1：Web端，登录小程序管理后台-数据，转发到Web端的"we分析"可以方便的查看运营数据
（2）方法2：移动端，使用"we分析"小程序，在微信中可以方便的查看运营数据
1.6 本章小结本章简单介绍了小程序是什么，小程序的技术发展历史以及开发小程序之前需要做的准备工作。在涉及代码的知识点，介绍了4种文件类型以及代码的简要介绍。实现第1个小程序的案例以及小程序的宿主环境，最后介绍了小程序多人协同工作，发布，不同角色的合理权限的分配。