微信小程序入门介绍

微信小程序简单介绍

最近公司打算把已经嵌入到微信公众号里的H5页面(施工流程管理)项目想另外再做一个微信小程序版本的，于是我边看官方文档边做项目…

认识微信小程序

首先，小程序类似Web，但不同于我们所认识的HTML，它有属于自己的开发语言及工具

小程序与普通网页开发的区别

小程序的主要开发语言是 JavaScript，同普通的网页开发来做对比两者有很大的相似性。在网页开发中，渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行DOM选中和操作。由于小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

网页开发的环境：
PC端：IE、Chrome、QQ浏览器等
移动端：Safari、Chrome以及 iOS、Android 系统中的各式 WebView

小程序的运行环境：

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	X5 JSCore	X5浏览器
小程序开发者工具	NWJS	Chrome WebView

小程序中的 JavaScript同浏览器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的：

图1 浏览器中的 JavaScript

图2 node.js中的 JavaScript

图3 小程序中的 JavaScript

小程序的执行环境

三大平台：iOS平台，Android平台， 小程序IDE。实现的 ECMAScript 的标准有所不同。截止到当前一共有七个版本的ECMAScript 标准，目前开发者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标准，但是在小程序中， iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准，一些 ECMAScript 6 中规定的语法和关键字是没有的或者同标准是有所不同的，例如：
箭头函数
let const
模板字符串
…
所以一些开发者会发现有些代码在旧的手机操作系统上出现一些语法错误。开发者需要l利用微信开发者工具在项目设置中，勾选 ES6 转 ES5 开启此功能就可以解决这类问题，从而在所有的环境都能得到很好的执行。