微信小程序体验并构建自己的微信小程序——Lite天气

小程序已经出来很久了，最近又在学习JavaScript，而小程序的开发语言也是基于JavaScript，所以就打算学习一下微信小程序开发。
大家可以在微信小程序里搜搜索Lite天气即可体验。

原理

微信小程序的原理，看一下微信官方的文档写到：

三端的脚本执行环境聚以及用于渲染非原生组件的环境是各不相同的：

• 在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10
• 在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5基于 Mobile Chrome 53 内核来渲染的
• 在 开发工具上， 小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的

据我猜测，我觉得微信小程序能够提供如此完整的API，并且性能也有如此之好的体验，其原理应该是和React Native的原理类似，通过微信自己的JavaScript运行引擎，最终将其中的代码翻译成Native的原生控件并展示出来，以达到媲美原生APP的性能以及用户体验。

再说开发工具，文中提到了nw.js，这个nwjs据我所知就是node.js与Browser运行时的合并，据我所知这个nw.js就是一个专门用于跨平台开发的工程，其可利用node.js访问系统原生的API。但是经过我google，我发现现在有一个叫做Electron的项目比nw.js更为火热，其中atom和vscode也是基于Electron开发的。至于微信为什么采用nw.js开发，我也是不是很了解。

其中大概的原理就讲到这里，有兴趣的可以参考一下文章

1. 微信小程序底层的实现原理是怎样的？
2. 微信小程序剖析 | 运行机制及框架原理

开发准备

我这里就不过多介绍微信小程序的详细教程，因为微信提供的官方文档已经十分详细地介绍了微信小程序的文件类型、项目结构框架、具体API。

不过我建议在编写微信小程序之前应该要有一下的基础：

1. JavaScript基础，node.js、ES6基础
2. XML文件、Html文件基础、CSS基础
3. 了解flex布局

有了以上的基础知识，在官方文档的指导下，绝对能够快速地进行小程序的开发。

项目实战