在微信小程序頁面間傳遞數據
原文鏈接：https://www.jianshu.com/p/dae1bac5fc75
在開發微信小程序過程之中，遇到這么一些需要在微信小程序頁面之間進行數據的傳遞的情況，也遇到了開發過程微信小程序限制情況，特此做個總結。
- 全局變量之中傳遞參數數據
- 在微信小程序的開發過程之中，需要從A頁面跳轉到B頁面，並且把A頁面的數據傳遞到B頁面使用。可以使用全局變量使用的方法，微信小程序官方提供app.js全局變量定義文件，里面可以定義需要在全局需要使用的變量與及變量值，例如用戶登錄之后，需要在所有頁面中使用用戶登錄狀態等。
- 微信小程序初始化時，首先會加載app.json全局樣式配置文件和全局變量文件，例如下面的globalData變量。
- 在app.js定義全局變量后，可以在各頁面間直接加載全局變量，小程序提供了getApp()方法，可以直接獲取到App({...})這個全局實例對象。
-
App({ /** * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次） */ onLaunch: function () { }, /** * 當小程序啟動，或從后台進入前台顯示，會觸發 onShow */ onShow: function (options) { }, /** * 當小程序從前台進入后台，會觸發 onHide */ onHide: function () { }, /** * 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息 */ onError: function (msg) { }， //全局變量 globalData：{ userInfo：null } }) //page/index/index var app=getApp();//取得全局App({..})實例 var userInfo=app.globalData.userInfo;//取得全局變量需要的值
使用本地緩存的方法保存全局變量,本地緩存是有存儲限制的，所以建議手動刪除不再需要的緩存數據。- 假如在A頁面保存需要的信息,如下圖就可以直接保存鍵名為cargo的數據。
var cargo={
id:'12345',
count:2,
name:'xx書籍',
price:85,
picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
};
wx.setStorage({
key:"cargo",
data:cargo
})
- 在B頁面直接可以使用小程序的wx.getStorage並傳入要獲取到的鍵值名就可以獲取本地緩存的數據。
wx.getStorage({
key: 'cargo',
success: function(res) {
console.log(res.data)
}
})
- 通過在跳轉、重定向等轉變頁面時候，可以直接通過url來傳送數據。
- 在A頁面傳遞數據到B頁面中使用的時候可以直接使用以下數據。
//page A wx.navigateTo({ url: 'test?id=1' }) //or page A wx.redirectTo({ url: 'test?id=1' }) // or page A wx.reLaunch({ url: 'test?id=1' }) //page B Page({ onLoad: function(option){ console.log(option.query) } })- wx.navigateTo和wx.redirectTo不能跳轉到tabar定義的頁面，查看了微信小程序提供了wx.switchTab進行跳轉，但是switchTab不可以傳遞url參數，后面提供了wx.reLaunch函數。
- 往組件模板之中傳遞數據，可以直接在模板的data-*中傳遞數據。
<template is="模板名" data="數據對象"/> - 通過頁面棧獲取到上一頁面對數據進行修改
- 假設從A頁面跳轉到B頁面，而B頁面需要對A頁面的數據進行修改處理。
//pageA page({ data:{ user:kiwis } }) //pageB page({ updateData:function(){ var pages=getCurrentPages(); var prevPage=pages[pages.length-2]; prevPage.setData({ user:'LaternKiwis' }) } }) - 對於全局變量的，也可以直接通過第三方服務器用數據庫進行保存，是要使用的時候直接從數據庫里面直接讀取全局變量。
- 使用wx.request提交與讀取數據
//提交數據給第三方服務器進行插入緩存數據庫處理 wx.request({ url: 'test.php', //僅為示例，並非真實的接口地址 data: { username:'kiwis', gender:1, picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg' }, method:'POST', header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data) } }) //從緩存數據庫讀取數據 wx.request({ url: 'test.php', //僅為示例，並非真實的接口地址 data: { username:'kiwis' }, method:'GET', header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data) } }) - 在使用url進行參數傳遞時候，傳遞數據有字節限制；詳情可以查閱微信小程序的文檔；在使用url傳參數數據時候，如果傳送的參數值是一個json數據，要使用JSON.stringify對json對象轉換成字符串的形式；在開發小程序過程中，使用Nodejs獲取傳遞的參數時，沒有經過字符串序列化，在后台獲取不到參數值，顯示為null。所以需要JSON.stringify,然后在后台邏輯之中使用JSON.parse序列化成對象使用。
- 小程序通過wx.navaigaTo跳轉到具體的頁面，並傳遞相關聯的參數數據過去案例如下，class為item的view綁定了tap事件，傳遞數據通過data-* 來定義(*是自定義的儲存數據變量值，其中的item是真實數據)例如wxml頁面如下所示：
<view class="container"> <view class="item" wx:for="{{items}}" data-video="{{item}}" bindtap="play"> <image src="{{item.image_url}}" class="newsPic"></image> <view class="source"> <text>{{item.source}}</text> <text class="count">評論 {{item.comments_count}}</text> </view> <view class="icon" > <text>{{item.title}}</text> <image src="../../images/{{path}}" class="play"></image> </view> </view> </view> - 在wx的js文件中，通過play事件通過下面的方式傳遞數據,通過event.currentTarget.dataset獲取我們自定義的video變量:
play:function(event){ var video = event.currentTarget.dataset.video; console.log(video) // this.setData({ // path:'play.png' // }) wx.navigateTo({ url: '../logs/logs?imgUrl=' + video.image_url + '&source_url=' + video["source_url"] + "&title=" + video.title + "&group_id=" + video["group_id"] }) } - 在要接收上一頁面傳遞過來的數據的頁面通過onLoad事件的options參數里面包含了上一頁面所有傳遞過來的參數數據，可以通過下面的方式進行獲取。
onLoad:function(options){ var that=this that.setData({ imgUrl:options.imgUrl, title:options.title, videoSrc:options.videoSrc, group_id:options["group_id"] }) },