頁面間通信

小程序自定義變量與發(fā)送參數(shù)

為了實(shí)現(xiàn)組件間的通信，首先需要自定義變量，操作流程如下

• 在頁面A.wxml文件的組件中定義自定義變量，語法為data-'key',并且綁定點(diǎn)擊事件onGoToDetail

<view data-post-id="0" bind:tap="onGoToDetail">
</view>
復(fù)制代碼

• 在A.js文件中定義點(diǎn)擊事件onGoToDeatil

onGoToDetail(event){
    const pid = event.currentTarget.dataset.postId
    wx.navigateTo({
      url:'/pages/B/B?pid='+pid
    })
  },
復(fù)制代碼

通過事件函數(shù)默認(rèn)對(duì)象event，自定義對(duì)象存在event.currentTarget.dataset對(duì)象中

.wxml定義變量與.js中對(duì)應(yīng)變量的語法如下

.wxml	.js
data-id	id
data-postId	postid
data-post-id	postId

• 由此便完成自定義變量的使用，并且通過wx.navigateTo函數(shù)實(shí)現(xiàn)頁面跳轉(zhuǎn)，使用?即查詢參數(shù)，將屬性pid發(fā)送至頁面B

接收參數(shù)

• 在接收頁面B的onLoad鉤子函數(shù)中，使用options參數(shù)進(jìn)行接收，并且使用setData函數(shù)，將接收到的變量

onLoad: function (options) {
    const postId = options.pid
    this.setData({
      Id:postId
    })
  },
復(fù)制代碼

此例中options的結(jié)果如下

• 便可以在B.wxml頁面中引入postId值

文件間通信-變量傳遞

不同.js文件變量的導(dǎo)出與導(dǎo)入

在頁面中，通常會(huì)引入其他頁面的數(shù)據(jù)，建議使用es6中的export與import實(shí)現(xiàn)，實(shí)現(xiàn)流程如下

• 在需要導(dǎo)出數(shù)據(jù)的.js文件中導(dǎo)出data

export {
  data
}
復(fù)制代碼

• 在需要導(dǎo)入數(shù)據(jù)的.js文件中進(jìn)行導(dǎo)入與使用即可，注意變量名需要與導(dǎo)出時(shí)對(duì)應(yīng)

import { data } from '../../data/data.js'
console.log(data)
復(fù)制代碼

全局變量的導(dǎo)入與導(dǎo)出

全局變量可以保存一個(gè)應(yīng)用生命周期之內(nèi)的狀態(tài)

• 在app.js中定義全局變量。app.js中存在onLauch、onShow、onHide、onError等應(yīng)用級(jí)別的生命周期鉤子函數(shù)。本例中在文件中定義了全局變量test值為1

• 在需要使用變量的頁面，通過getApp()函數(shù)進(jìn)行使用即可，效果圖如下

const app = getApp()
console.log(app.test)
復(fù)制代碼

小程序緩存

緩存可以在過期時(shí)間內(nèi)永久保存變量值，可以先理解為前端數(shù)據(jù)庫；而全局變量則會(huì)在小程序重新啟動(dòng)時(shí)再次初始化數(shù)據(jù)。

同步操作緩存

• 下面進(jìn)行增刪改查的演示

//新增-緩存變量flag為true
wx.setStorageSync('flag', true)
//查找-緩存變量flag
const flag = wx.getStorageSync('flag1')
//修改-緩存變量flag為false
wx.setStorageSync('flag', false)
//刪除緩存變量flag
wx.removeStorageSync('flag')
//清空所有緩存變量
wx.clearStorageSync()
復(fù)制代碼

• 可在Storage中查看當(dāng)前緩存

異步操作緩存

在操作較為復(fù)雜的情況下，異步操作緩存能獲得更高的性能

• es6異步操作方法：promise

wx.setStorageSync('flag', 1)
const flag = wx.getStorage({
  key: 'flag',
})
flag.then((value)=>{
  console.log("flag=", value.data)
})
復(fù)制代碼

• es7異步操作方法：async-await，需要在引用該代碼的函數(shù)前加上async

wx.setStorageSync('flag', 1)
const flag = await wx.getStorage({
  key: 'flag',
})
console.log("flag=", flag.data)
復(fù)制代碼

二者獲得的結(jié)果如下