Page to page communication

Small program to customize variables and send parameters

To achieve communication between components, you need to customize variables first. The operation process is as follows

  • Define custom variables in the components of the page A.xml file with the syntaxdata-'key'And bind the click eventonGoToDetail
<view data-post-id="0" bind:tap="onGoToDetail">
</view>
Copy the code
  • Define click events in the A.js fileonGoToDeatil
onGoToDetail(event){ const pid = event.currentTarget.dataset.postId wx.navigateTo({ url:'/pages/B/B? pid='+pid }) },Copy the code

The default object event by event function, custom objects exist event. The currentTarget. A dataset object

The syntax for.wxml defines variables and their counterparts in.js is as follows

.wxml .js
data-id id
data-postId postid
data-post-id postId
  • This completes the use of custom variables and passeswx.navigateToFunction to achieve page jump, use?That is, query parameters will attributepidSend to page B

Receive parameters

  • On the receiving page BonLoadIn the hook functionoptionsParameter to receive and usesetDataFunction that will receive the variable
onLoad: function (options) {
    const postId = options.pid
    this.setData({
      Id:postId
    })
  },
Copy the code

In this caseoptionsThe results of

  • Can be introduced in the B. XML pagepostIdvalue

File to file communication – variable passing

Different. Js file variables export and import

A page usually imports data from other pages. You are advised to use export and import in ES6 to implement the process as follows

  • Export data in the.js file where the data needs to be exported
export {
  data
}
Copy the code
  • You can import and use the. Js file in which the data needs to be imported. Note that the variable name must correspond to the exported one
import { data } from '.. /.. /data/data.js' console.log(data)Copy the code

Import and export of global variables

Global variables can hold the state of an application over its lifetime

  • Define global variables in app.js. App. JsonLauch,onShow,onHide,onErrorAnd other application-level lifecycle hook functions. In this example, global variables are defined in a filetestA value of1

  • On pages that need to use variables, passgetApp()Function can be used, the effect picture is as follows
const app = getApp()
console.log(app.test)
Copy the code

Applet cache

A cache can permanently store variable values within expiration time, which can be understood as a front-end database. Global variables initialize the data again when the applet restarts.

Synchronous operation cache

  • Add, delete, change and check the following demonstration
Wx. setStorageSync('flag', Wx.setstoragesync ('flag1') const flag = wx.getStoragesync ('flag1') False) // Remove cache variable flag wx.removeStoragesync ('flag') // Clear all cache variable wx.clearStoragesync ()Copy the code
  • Can be inStorageTo view the current cache

Asynchronous operation cache

Asynchronous operation caching can achieve higher performance in complex operations

  • Es6 Asynchronous operation methods:promise
wx.setStorageSync('flag', 1)
const flag = wx.getStorage({
  key: 'flag',
})
flag.then((value)=>{
  console.log("flag=", value.data)
})
Copy the code
  • Es7 Asynchronous operation methods:async-await, need to be appended to functions that reference the codeasync
wx.setStorageSync('flag', 1)
const flag = await wx.getStorage({
  key: 'flag',
})
console.log("flag=", flag.data)
Copy the code

The results obtained for both are as follows