整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
轉頁面需要傳值，被跳轉的頁面需要接收值
<template slot-scope="props">
<ul style="magrin:0px;padding:0px;width:818px;overflow:hidden">
<li v-for="it in props.row.ClassDetails" class="tcbgxq_li">
<span class="spans">{{it.ClassName}}</span>
<span class="spans col">
<el-link type="primary" @click="handTC(it.GeneralCheckTaskClassId)">查看</el-link>
</span>
</li>
</ul>
</template>在js的地方需要傳遞參數
/*超鏈接跳轉到別的頁面，并傳遞參數*/
handTC(row){
const id=row;
this.$router.push({ //核心語句
path:'/banjitanceResult', //跳轉的路徑
query:{ //路由傳參時push和query搭配使用 ，作用時傳遞參數
id:id,
}
})
},在另一個頁面，需要接收傳遞過來的參數
const generalCheckTaskClassId=this.$route.query.id;//傳遞的數據需要注意的是，傳遞的是是，接收的必須對應
程序是一種新的開放能力，開發者可以快速地開發一個小程序。小程序可以在微信內被便
捷地獲取和傳播，同時具有出色的使用體驗。對于微信小程序，前端開發應該不陌生，目前也
是非?；穑芏喙径紩M行開發。對于小程序的優點我就不到這過多描述了，今天我是想來
總結下微信小程序頁面和組件傳值。
微信小程序目錄結構
1.頁面與頁面傳值-跳轉的url帶參傳值
微信小程序頁面直接傳值我們經常用到的是頁面URL跳轉傳值，跳轉到的頁面通過到生命周
期onLoad里面接收。
//A頁面
Page({
data:{
},
linkTo:function(){//頁面事件綁定方法
let data='hello world';
wx.navigateTo({
url: '/pages/my/index?name=' + data,
})
}
}）
//B頁面
Page({
data:{
name:' '
},
onLoad:function(option){//接收數據
this.setData({
name: option.name
})
}
}）
如果頁面有多個值要傳，直接用&符合鏈接起來就可以了。
比如'/pages/my/index?name=' + data1+'&number='+data2;
2.頁面與頁面傳值-全局globalData傳值
//app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: {
name:'hello world'
}
})
//A頁面
const app=getApp();//獲取全局對象
Page({
data:{
},
onLoad:function(){
let name=app.globalData.name;
console.log(name);//hello world
}
}）
全局數據的拿去是通過拿去globalData對象，再到其他頁面獲取，當然你也可以
修改全局對象里面數據其他頁面從新去獲取。
//A頁面
const app=getApp();//獲取全局對象
Page({
data:{
},
onLoad:function(){
app.globalData.name='微信小程序'; //修改全局數據
}
}）
//B頁面
const app=getApp();//獲取全局對象
Page({
data:{
},
onLoad:function(){
let name=app.globalData.name;
console.log(name);//微信小程序
}
}）
2.頁面與頁面傳值-頁面數據緩存wx.setStorageSync(KEY,DATA)
//A頁面
Page({
data:{
},
onLoad:function(){
wx.setStorage({
key:"name",
data:"hello world"
})
}
}）
//B頁面
Page({
data:{
},
onLoad:function(){
var value=wx.getStorageSync('name')；
console.log(value);// hello world
}
}）
此處緩存數據要用同步wx.setStorageSync(),因為異步有可能數據或者有可能會獲取不到
下面我們來說說 微信小程序組件之前傳值
組件間的基本通信方式有以下幾種。
說到組件，這里我們先了解組件的使用，組件的js、json文件和頁面不一樣。
Component構造器
Component({
behaviors: [],
properties: {
myProperty: { // 屬性名
type: String,
value: ''
},
myProperty2: String // 簡化的定義方式
},
data: {}, // 私有數據，可用于模板渲染
lifetimes: {
// 生命周期函數，可以為函數，或一個在methods段中定義的方法名
attached: function () { },
moved: function () { },
detached: function () { },
},
// 生命周期函數，可以為函數，或一個在methods段中定義的方法名
attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
ready: function() { },
pageLifetimes: {
// 組件所在頁面的生命周期函數
show: function () { },
hide: function () { },
resize: function () { },
},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新屬性和數據的方法與更新頁面數據的方法類似
})
},
// 內部方法建議以下劃線開頭
_myPrivateMethod: function(){
// 這里將 data.A[0].B 設為 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function(newVal, oldVal) {
}
}
})
使用 Component 構造器構造頁面
{
"component": true,//這里是它把定義成組件，要不然引入到頁面會報錯
}
引入組件
//A頁面 json
{
"usingComponents": {
"myComponents": "../../components/myComponents/index",//引入組件
},
}
//A頁面 WXML
<myComponent name="hello world"></myComponent>
//myComponent接收數據
Component({
properties: {
name:{
value: "",
type: String //此處設置數據類型 這樣 組件就能接收到數據
}
},
methods: {
}
})
組件間通信與事件
監聽事件
事件系統是組件間通信的主要方式之一。自定義組件可以觸發任意的事件，引用組件的頁面可以監聽這些事件。監聽自定義組件事件的方法與監聽基礎組件事件的方法完全一致：
<!-- 當自定義組件觸發“myevent”事件時，調用“onMyEvent”方法 -->
<myComponent bindmyevent="onMyEvent"></myComponent>
<!-- 或者可以寫成 -->
<myComponent bind:myevent="onMyEvent"></myComponent>
Page({
onMyEvent: function(e){
e.detail // 自定義組件觸發事件時提供的detail對象
}
})
觸發事件
自定義組件觸發事件時，需要使用 triggerEvent 方法，指定事件名、detail對象和事件選項
項目開發中，我們很多時候都會遇到需要點擊按鈕跳轉頁面的情況。HTML中我們使用<a></a>標簽或者監聽標簽的onclick事件來達到預期效果，而在小程序中，官方提供了以下六種跳轉方式。
很多時候我們都需要在頁面跳轉時進行傳值，以上六種方式中只有wx.switchTab和wx.navigateTo不能傳遞參數外，其他四種都可以帶參數進行頁面跳轉。而我們跳轉一般都需要保留當前頁面，不需要對當前頁面進行銷毀，所以我們選擇組件navigator或者API 接口中的wx.navigateTo來實現帶參數跳轉效果。
在2.7.3基礎庫版本之前，兩者跳轉方式都是在url后拼接參數。如“path?key=value&key2=value2”。但在2.7.3基礎庫之后，官方提供了一種新的參數傳遞方式，但只在wx.navigateTo接口中有效。
如何選擇跳轉方式，并不是根據我們心情去選擇的，我們應該根據實際業務以及參數類型等來選擇跳轉方式。
//index.wxml <!-- 使用navigator組件實現傳參跳轉 --> <navigator url="/pages/news/news?type=IT內容" open-type="navigate">跳轉到內容發布頁面（navigator）</navigator> <!-- 綁定按鈕點擊事件，使用常規方式 --> <button bindtap="skipNewsPage">跳轉到內容發布頁面（button）</button> <!-- 綁定按鈕點擊事件，使用2.7.3基礎庫提供的新方式 --> <button bindtap="skipNewsPageEvents" plain="true">跳轉到內容發布頁面（button）</button>
//index.js
//常規跳轉方式
skipNewsPage: function(e) {
wx.navigateTo({ url: "/pages/news/news?type=IT內容" });
},
//新方法跳轉方式
skipNewsPageEvents: function(e) {
wx.navigateTo({
url: "/pages/news/news",
events: {
acceptType: function(data) {
console.log(data);
}
},
success: (res)=> {
//通過eventChannel向被打開頁面傳遞數據 res.eventChannel.emit('acceptType', {type: "IT內容"});
}
})
}
//news.js
onLoad: function (options) {
var that=this;
/**
* 使用navigator或wx.navigateTo在url后直接帶參數都可以這樣獲取值
*/
var navType=options.type;
console.log("url直接帶參數傳遞：" + navType)
/**
* 使用2.7.3基礎庫之后的方式需要這樣獲取
*/
const eventChannel=that.getOpenerEventChannel(); eventChannel.on('acceptType', function(data) {
console.log("新方式傳遞參數：" + data.type);
});
}
從以上輸出內容我們可以看出兩者在傳遞字符串（數值類型也是如此）時是沒有區別的，相對于直接在url后跟參數，使用events方式傳遞參數代碼編寫比較多，且需要在顯示頁面進行獲取。因此若傳遞參數為字符串時，我們可以依然使用傳統的url后跟參數的方式跳轉。
我們將上述代碼中的type值改為type=['1','2','3']，從運行結果我們可以看出，使用url后拼接參數的方式傳遞過來的值是字符串類型，而不是我們的數組，因此在使用時需要使用JSON.parse()轉換。而events方式傳遞來的值依舊是數組。這兩種方式各有優勢，選擇時建議使用events傳值，不需要做JSON轉換。
我們將上述代碼中type的值改為對象item={'a':1,'b':2,'c':3},從運行結果來看，我們使用url后跟參數的方式傳遞參數在頁面取到的值為[Object object]，我們最終獲取對象中的某個值時，其報錯找不到對象屬性。而使用events傳遞參數時，不存在這個問題，對象依舊是對象，因此在選擇時，我們若傳遞對象或者數組對象，那么應該使用events的方式傳遞參數。
綜上所述，我們在開發中直接使用events傳遞參數的方式，這樣避免了參數類型不明確時導致的錯誤。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
