JavaScript
engine is used to provide a Mini Program with features specific to TCMPP Mini Programs and an environment for running JavaScript code written by developers.JavaScript
file, which runs when the Mini Program is started until the Mini Program is destroyed. This behavior is similar to ServiceWorker. Therefore, the logic layer is also referred to as an App Service
.JavaScript
, we have added some features to facilitate the development of Mini Programs:// 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
method, and then obtain data in the app or call a function registered with App by the developers.// xxx.jsconst appInstance = getApp()console.log(appInstance.globalData) // I am global data
// index.jsPage({data: {text: "This is page data."},onLoad: function(options) {// Do some initialize when page load.},onReady: function() {// Do something when page ready.},onShow: function() {// Do something when page show.},onHide: function() {// Do something when page hide.},onUnload: function() {// Do something when page close.},onPullDownRefresh: function() {// Do something when pull down.},onReachBottom: function() {// Do something when page reach bottom.},onShareAppMessage: function () {// return custom share data when user share.},onPageScroll: function() {// Do something when page scroll},onResize: function() {// Do something when page resize},onTabItemTap(item) {console.log(item.index)console.log(item.pagePath)console.log(item.text)},// Event handler.viewTap: function() {this.setData({text: 'Set some data for updating view.'}, function() {// this is setData callback})},customData: {hi: 'MINA'}})
Component({data: {text: "This is page data."},methods: {onLoad: function(options) {// Executed when the page is created}, onPullDownRefresh: function() { // Execute on page creation.onPullDownRefresh: function() {// onPullDownRefresh: function() { // On page creation }, onPullDownRefresh: function()}, onPullDownRefresh.// Event response functionviewTap: function() {// ...}}})
Page
instance.Routing | Reaction on the Page Stack |
Initialization | The new page is pushed onto the stack. |
Opening a new page | The new page is pushed onto the stack. |
Page redirection | The current page is popped out of the stack, and the new page is pushed onto the stack. |
Page return | Pages are successively popped out of the stack until the destination return page is displayed. |
Tab switching | All the pages are popped out of the stack, and only the new tab page is retained. |
Reloading | All the pages are popped out of the stack, and only the new page is retained. |
Routing | Trigger Condition | Source Page | Routed-To Page |
Initialization | A page of the Mini Program is opened for the first time. | - | onLoad, onShow |
Opening a new page | The API wx.navigateTo is called.
The component <navigator open-type="navigateTo"/> is used. | onHide | onLoad, onShow |
Page redirection | The API wx.redirectTo is called.
The component <navigator open-type="redirectTo"/> is used. | onUnload | onLoad, onShow |
Page return | The API wx.navigateBack is called.
The component <navigator open-type="navigateBack"> is used.
The user taps the return button on the top left. | onUnload | onShow |
Tab switching | The API wx.switchTab is called.
The component <navigator open-type="switchTab"/> is used.
The user switches between tabs. | - | For details, refer to the following table. |
Restart | The API wx.reLaunch is called.
The component <navigator open-type="reLaunch"/> is used. | onUnload | onLoad, onShow |
Current Page | Routed-To Page | Triggered Lifecycle Function (In Order) |
A | A | Nothing happend |
A | B | A.onHide(), B.onLoad(), B.onShow() |
A | B (Opened again) | 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 (Entered due to redirection) | A | D.onUnload(), A.onLoad(), A.onShow() |
D (Entered due to redirection) | B | D.onUnload(), B.onLoad(), B.onShow() |
node_modules
, developers are advised to copy relevant code to the directory of the Mini Program, or use the npm
feature supported by Mini Programs.// common.jsfunction sayHello(name) {console.log(`Hello ${name} !`)}function sayGoodbye(name) {console.log(`Goodbye ${name} !`)}module.exports.sayHello = sayHelloexports.sayGoodbye = sayGoodbye
var common = require('common.js')Page({helloMINA: function() {common.sayHello('MINA')},goodbyeMINA: function() {common.sayGoodbye('MINA')}})
getApp
. To obtain the global data, you can set App()
. For example:// 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++
wx.onCompassChange(function (res) {console.log(res.direction)})
try {wx.setStorageSync('key', 'value')} catch (e) {console.error(e)}
Parameter name | type | Required | Introductions |
success | function | no | Interface calls the successful callback function |
fail | function | no | Interface calls failed callback functions |
complete | function | no | Callback function at the end of an interface call (both successful and unsuccessful calls are executed) |
Other | Any | - | Additional parameters defined by the interface |
attribute | type | Introductions |
errMsg | string | Error message if the call returns successfully ${apiName}:ok |
errCode | number | Error code, partial only API Support, please refer to the corresponding meaning API Documentation, if successful 0。 |
Other | Any | Interface to return additional data |
wx.login({success(res) {console.log(res.code)}})
Was this page helpful?