**微信小程序(miniprogram)概述** [TOC] ## 1 微信小程序(miniprogram)简介 一个网页主要 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 是用来处理这个页面和用户的交互。小程序的页面跟这个完全相同 ，不一样的就是改了个名字 。 | miniprogram | Web | | --- | --- | | \*.wxml | \*.html | | \*.wxss | \*.css | | \*.js | \*.js | ## 2 官方文档 ### 2.1 [官方简易教程](https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getting-started.html) ### 2.2 [官方教程指引](https://developers.weixin.qq.com/home?action=get_specific_blog_list&lang=zh_CN&token=&blogcategory=4) ### 2.3 [官方开发指南](https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=0008aeea9a8978ab0086a685851c0a) ## 3 构成 ### 3.1 框架 - **视图层**：`*.wxml`文件和`*.wxss`文件 - **逻辑层**：`*.js`文件 - **数据传输和事件系统** 框架提供了自己的视图层描述语言`WXML`(类比HTML) 和 `WXSS`（类比CSS），以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。 ### 3.2 组件 ### 3.3 API 2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的 Web 开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情了。 JS-SDK是对之前的 WeixinJSBrige 的一个包装，以及新能力的释放，并且由对内开放转为了对所有开发者开放，在很短的时间内获得了极大的关注。从数据监控来看，绝大部分在微信内传播的移动网页都使用到了相关的接口。 JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，然而在更多的能力之外，JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。 ### 3.4 微信开发者工具 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，集成了公众号网页调试和小程序调试两种开发模式。 虽然在开发语言层面小程序与传统的网页差别不大：是使用JavaScript 脚本语言编写逻辑代码、使用类似于HTML的WXML来描述页面的结构、使用类似于CSS的WXSS来描述节点的样式，但是由于小程序渲染和逻辑分离的运行机制与传统的网页存在差异，所以无法使用传统的网页的开发调试工具，因此我们推出了小程序开发生态一站式IDE——微信开发者工具。开发者可以借助微信开发者工具完成小程序的代码开发、编译运行、界面和逻辑调试、真机预览和提交发布版本等功能。 - 使用公众号网页调试 开发者可以调试微信网页授权和微信JS-SDK - 使用小程序调试， 开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。 还可以， 1. 使用腾讯云，快速搭建小程序后台运行环境； 2. 申请测试报告，了解小程序在真实的移动设备上运行性能和运行效果。 注意：因为申请测试会占用测试机器资源，所以一个 APPID 一天只能申请一次测试报告。 ### 3.5 腾讯云 ## 4 小程序与普通网页开发的区别 小程序的主要开发语言是 JavaScript ，所以通常小程序的开发会被用来同普通的网页开发来做对比。两者有很大的相似性，对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。 网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。 网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，如表1-1所示。 :-: 表1-1 小程序的运行环境 | 运行环境 | 逻辑层 | 渲染层 | | --- | --- | --- | | iOS | JavaScriptCore | WKWebView | | 安卓 | X5 JSCore | X5浏览器 | | 小程序开发者工具 | NWJS | Chrome WebView| 网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。 ## 5 小程序的特色 - 普通用户 小程序实现了应用的触手可及，只需要通过扫描二维码、搜索或者是朋友的分享就可以直接打开，加上优秀的体验，小程序使得服务提供者的触达能力变得更强。 - 开发者 小程序框架本身所具有的快速加载和快速渲染能力，加之配套的云能力、运维能力和数据汇总能力，使得开发者不需要去处理琐碎的工作，可以把精力放置在具体的业务逻辑的开发上。 - 小程序的模式 使得微信可以开放更多的数据，开发者可以获取到用户的一些基本信息，甚至能够获取微信群的一些信息，使得小程序的开放能力变得更加强大。