258资源分享网

小程序已经出来很久了，最近又在学习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开发，我也是不是很了解。

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

微信小程序底层的实现原理是怎样的？

微信小程序剖析 | 运行机制及框架原理

开发准备

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

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

JavaScript基础，node.js、ES6基础

XML文件、Html文件基础、CSS基础

了解flex布局

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

项目实战

项目结构：

现在只开发了一个简单的天气页面，因此只写了index页面建立了weather相关的页面。

 

项目结构

app.js：

这个文件相当于Android 程序中的application，整个程序只有一个app.js到单例，因此程序的各种生命周期的回调都在这里，并且可以存储一下程序的全局数据以及变量，例如用户数据等。

App({ onLaunch: function () { }, onShow: () => { console.log('onshow'); }, onHide: () => { console.log('onHide'); }, getUserInfo: function (cb) { var that = this if (this.globalData.userInfo) { typeof cb == "function" && cb(this.globalData.userInfo) } else { //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData: { userInfo: null } })

app.json:

这个相当于是程序的路由表以及配置表，包括程序的页面注册、网络配置、底部导航栏、顶部导航栏的配置都可以在这里编写，具体的可以在官方文档里进行查看。

{ "pages": [ "pages/weather/index/weather", "pages/weather/city/city", "pages/weather/detail/detail", "pages/weather/setting/setting" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#09bb07", "navigationBarTitleText": "Lite天气", "navigationBarTextStyle": "white", "enablePullDownRefresh": true }, "tabBar": { "list": [ { "pagePath": "pages/weather/index/weather", "text": "天气", "iconPath": "/resources/weather_icon_normal.png", "selectedIconPath": "/resources/weather_icon_selected.png" }, { "pagePath": "pages/weather/setting/setting", "text": "我的", "iconPath": "/resources/setting_icon_normal.png", "selectedIconPath": "/resources/setting_icon_selected.png" } ], "color": "#dbdbdb", "selectedColor": "#09bb07", "backgroundColor": "#ffffff", "borderStyle": "black" }, "networkTimeout": { "request": 5000, "connectSocket": 20000, "uploadFile": 20000, "downloadFile": 20000 } }

之前都是app的全局配置，现在来编写具体的页面。

预期的页面是这个样子的设计。