微信小程序
2020-01-03 本文已影响0人
北风吹_yfy
简介
小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
申请账号
申请账号.png登录 小程序后台 ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。这个AppID是小程序的唯一标识,这里要区别于公众号的AppID。
安装开发者工具
前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。
打开开发者工具,新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID和项目名称,点击确认后即可创建一个微信小程序。
项目结构解析
目录结构.png渲染层和逻辑层
小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示。
通信模型图.png
逻辑层 App Service
在 JavaScript
的基础上,我们增加了一些功能,以方便小程序的开发:
- 增加
App
和Page
方法,进行程序注册和页面注册。 - 增加
getApp
和getCurrentPages
方法,分别用来获取App
实例和当前页面栈。 - 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
- 提供模块化能力,每个页面有独立的作用域。
注意:小程序框架的逻辑层并非运行在浏览器中,因此JavaScript
在 web 中一些能力都无法使用,如window
,document
等。
小程序APP
- App(Object object)---注册小程序
注意:App() 必须在 app.js 中调用,且只能调用一次。
App({
// 生命周期回调——监听小程序初始化,全局只触发一次。
onLaunch (options) {
// Do something initial when launch.
},
// 生命周期回调——监听小程序启动或切前台。
onShow (options) {
// Do something when show.
},
// 生命周期回调——监听小程序切后台。
onHide () {
// Do something when hide.
},
// 错误监听函数。
onError (msg) {
console.log(msg)
},
// 页面不存在监听函数。
onPageNotFound(res) {
wx.redirectTo({
url: 'pages/...'
}) // 如果是 tabbar 页面,请使用 wx.switchTab
},
// 全局数据
globalData: 'I am global data'
})
- getApp(Object object)---获取到小程序全局唯一的 App 实例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注意:
不要在定义于 App() 内的函数中,或调用 App 前调用 getApp() ,使用 this 就可以拿到 app 实例。
通过 getApp() 获取实例之后,不要私自调用生命周期函数。
页面
- Page(Object object)---注册小程序中的一个页面。
...未完待续