JavaScript
引擎为小程序提供开发JavaScript
代码的运行环境以及 TCMPP 小程序的特有功能。JavaScript
的基础上,我们增加了一些功能,以方便小程序的开发:getApp
和getCurrentPages
方法,分别用来获取App
实例和当前页面栈。app.js
中调用App(Object)
方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。// app.jsApp({onLaunch (options) {// Do something initial when launch.},onShow (options) {// Do something when show.},onHide () {// Do something when hide.},onError (msg) {console.log(msg)},globalData: 'I am global data'})
getApp
方法获取到全局唯一的 App 实例,获取 App 上的数据或调用开发者注册在 App 上的函数。// xxx.jsconst appInstance = getApp()console.log(appInstance.globalData) // I am global data
Page(Object)
进行构造。//index.jsPage({data: {text: "This is page data."},onLoad: function(options) {// 页面创建时执行},onShow: function() {// 页面出现在前台时执行},onReady: function() {// 页面首次渲染完毕时执行},onHide: function() {// 页面从前台变为后台时执行},onUnload: function() {// 页面销毁时执行},onPullDownRefresh: function() {// 触发下拉刷新时执行},onReachBottom: function() {// 页面触底时执行},onShareAppMessage: function () {// 页面被用户分享时执行},onPageScroll: function() {// 页面滚动时执行},onResize: function() {// 页面尺寸变化时执行},onTabItemTap(item) {// tab 点击时执行console.log(item.index)console.log(item.pagePath)console.log(item.text)},// 事件响应函数viewTap: function() {this.setData({text: 'Set some data for updating view.'}, function() {// this is setData callback})},// 自由数据customData: {hi: 'MINA'}})
Page
构造器适用于简单的页面。但对于复杂的页面,Page
构造器可能并不好用。Component
构造器来构造页面。Component
构造器的主要区别是:方法需要放在methods: { }
里面。Component({data: {text: "This is page data."},methods: {onLoad: function(options) {// 页面创建时执行},onPullDownRefresh: function() {// 下拉刷新时执行},// 事件响应函数viewTap: function() {// ...}}})
框架
进行管理。路由方式 | 页面栈表现 |
初始化 | 新页面入栈 |
打开新页面 | 新页面入栈 |
页面重定向 | 当前页面入栈,新页面入栈 |
页面返回 | 页面不断出栈,直到目标返回页 |
Tab切换 | 页面全部出栈,只留下新的Tab页面 |
重加载 | 页面全部出栈,只留下新的页面 |
App.onLaunch
的时候调用 getCurrentPages()
,此时 page
还没有生成。路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
初始化 | 小程序打开的第一个页面 | - | onLoad, onShow |
打开新页面 | 调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/> | onHide | onLoad, onShow |
页面重定向 | 调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/> | onUnload | onLoad, onShow |
页面返回 | 调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮 | onUnload | onShow |
Tab 切换 | 调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab | - | 各种情况请参考下表 |
重启动 | 调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/> | onUnload | onLoad, onShow |
Tabbar
页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):当前页面 | 路由后页面 | 触发的生命周期(按顺序) |
A | A | Nothing happend |
A | B | A.onHide(), B.onLoad(), B.onShow() |
A | B(再次打开) | A.onHide(), B.onShow() |
C | A | C.onUnload(), A.onShow() |
C | B | C.onUnload(), B.onLoad(), B.onShow() |
D | B | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() |
D(从转发进入) | A | D.onUnload(), A.onLoad(), A.onShow() |
D(从转发进入) | B | D.onUnload(), B.onLoad(), B.onShow() |
exports
是 module.exports 的一个引用,因此在模块里边随意更改exports
的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口,除非您已经清晰知道这两者的关系。node_modules
, 开发者需要使用到 node_modules
时候建议拷贝出相关的代码到小程序的目录中,或者使用小程序支持的 npm
功能。// common.jsfunction sayHello(name) {console.log(`Hello ${name} !`)}function sayGoodbye(name) {console.log(`Goodbye ${name} !`)}module.exports.sayHello = sayHelloexports.sayGoodbye = sayGoodbye
require
将公共代码引入:var common = require('common.js')Page({helloMINA: function() {common.sayHello('MINA')},goodbyeMINA: function() {common.sayGoodbye('MINA')}})
getApp
可以获取全局的应用实例,如果需要全局的数据可以在 App()
中设置,如:// app.jsApp({globalData: 1})
// a.js// The localValue can only be used in file a.js.var localValue = 'a'// Get the app instance.var app = getApp()// Get the global data and change it.app.globalData++
// a.js// The localValue can only be used in file a.js.var localValue = 'a'// Get the app instance.var app = getApp()// Get the global data and change it.app.globalData++
require
引入模块时,需要使用相对路径
。on
开头的 API 用来监听某个事件是否触发,如:wx.onSocketOpen,wx.onCompassChange 等。wx.onCompassChange(function (res) {console.log(res.direction)})
Sync
结尾的 API 都是同步 API, 如 wx.setStorageSync,wx.getSystemInfoSync 等。此外,也有一些其他的同步 API,如 wx.createWorker,wx.getBackgroundAudioManager 等,详情参见 API 文档中的说明。try {wx.setStorageSync('key', 'value')} catch (e) {console.error(e)}
Object
类型的参数,这个参数都支持按需指定以下字段来接收接口调用结果:参数名 | 类型 | 必填 | 说明 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用成功的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
其他 | any | - | 接口定义的其他参数 |
success
,fail
,complete
函数调用时会传入一个Object
类型参数,包含以下字段:属性 | 类型 | 说明 |
errMsg | string | 错误信息,如果调用成功返回 ${apiName}:ok |
errCode | number | 错误码,仅部分 API 支持,具体含义请参考对应 API 文档,成功时为 0 。 |
其他 | any | 接口返回的其他数据 |
wx.login({success(res) {console.log(res.code)}})
本页内容是否解决了您的问题?