小程式資料處理與頁面跳轉
一、獲取各種值
設定data值：
xx.js
Page({
data: {
text: "This is page data.",
sliderOffset: 0,
sliderLeft: 0,
state:{
genre:[],
genre_index: 0,
model:[],
model_index: 0,
terminalStatus:'',
}
},
this.setData({})設定值
this.setData({ 'state.genre_index':1,//注意引號 text:'data value' })
獲取data中的text和genre_index值需要使用this
var gener_index=this.data.state.genre_index
var text=this.data.text
呼叫點選函式
在點選函式中呼叫內部的函式drawBall()可以直接呼叫，如果需要在onReady函式中呼叫點選函式需要使用this。
onReady: function () {
this.drawBall()
},
獲取陣列中某個變數的值：
var id = event.currentTarget.dataset.id; var a = that.data.teacherInfo[id].decoration;
獲取自定義屬性 data-id 的值:
event.currentTarget.dataset.id
通過e.currentTarget.id;獲取設定的id值，並通過設定全域性物件的方式來傳遞數值，
獲取全域性物件 var app=getApp(); //設定全域性的請求訪問傳遞的引數 app.requestDetailid=id;
小程式獲取頁面傳值id 的值:
onLoad: function (options) {
var that = this
var articleId = options.id//獲取文章的id值
},
小程式獲取input框輸入: bindinput事件中獲取資料
wxml:
<input type="number" placeholder="請輸入手機號" bindinput="bindPhone" maxlength="11"/>
js:
bindPhone:function(e){
this.setData({
phone:e.detail.value
})
},
小程式獲得表單value值：bindsubmit事件或在每一個input中填寫bindconfirm="xxConfirm"等事件
wxml：
<form bindsubmit="formSubmit">
<input name="detail" placeholder="詳情地址" />
<input name="realname" placeholder="收件人姓名" />
<input name="mobile" placeholder="手機號碼" type="number"/>
<button formType="submit" type="primary">Submit</button>
</form>
js：
formSubmit: function(e) {
// detail
var detail = e.detail.value.detail;
// realname
var realname = e.detail.value.realname;
// mobile
var mobile = e.detail.value.mobile;
}
二、頁面間傳遞資料
全域性變數之中傳遞引數資料
在微信小程式的開發過程之中，需要從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"]
})
},
三、 wxml 頁面元件跳轉（可以通過設定open-type屬性指明頁面跳轉方式）：
// navigator 元件預設的 open-type 為 navigate
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
// redirect 對應 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁開啟</navigator>
// switchTab 對應 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>
// reLanch 對應 API 中的 wx.reLanch 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">關閉所有頁面，開啟到應用內的某個頁面</navigator>
// navigateBack 對應 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">關閉當前頁面，返回上一級頁面或多級頁面</navigator>