【2025年1月2日】关于腾讯云小程序平台更名为腾讯云超级应用服务的公告
控制台更新动态
Android SDK 更新动态
iOS SDK 更新动态
Flutter 更新动态
IDE 更新动态
基础库更新动态
JavaScript引擎为小程序提供开发JavaScript代码的运行环境以及小程序的特有功能。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)}})
文档反馈