uni-app開發經驗分享一： 多頁面傳值的三種解決方法
開發了一年的uni-app，在這裡總結一些uni-app開發中的問題，提供幾個解決方法，分享給大家：
問題描述：一個主頁面，需要聯通一到兩個子頁面，子頁面傳值到主頁面，主頁面更新
問題難點：
首先我們需要一個邏輯模型（這裡隨便畫了一個）
通過這個模型，我們可以看到一個問題，子頁面的內容怎麼傳回主頁面，怎麼讓這個傳回的方式更安全有效，這也是這個問題的難點，我總結了三種解決方法，在這裡分享給大家：
第一種：url傳值
顧名思義，就是利用頁面的url方法來傳值，具體操作邏輯如下：
主頁面：用onload事件來獲取頁面初始化的url值，進行頁面重新整理，跳轉到子頁面時用uni.redirectTo方法
子頁面：提交事件裡將資料轉為url格式，跳轉回主頁面時用uni.redirectTo方法
案例：
主頁面：
<template>
<view>
<h1>opition.id</h1>
<view @tap="totextfun">前往子頁面</view>
</view>
</template>
<script>
export default {
data() {
return {
opition:{
}
}
},
onLoad(data){
this.opition = data
},
methods: {
//跳轉到子頁面
totextfun(){
uni.redirectTo({ url: '/pages/text/text1'});
}
}
}
</script>
<style>
</style>
子頁面：
<template>
<view>
<view @tap="totextfun">跳轉回主頁面</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
//跳轉回主頁面事件
totextfun(){
uni.redirectTo({ url: '/pages/text/text?id=11'});
}
}
}
</script>
<style>
</style>
優缺點：優點就是簡單，簡單，簡單，這個方法的實現邏輯的優勢是很簡單粗暴的，但是url傳值如果是微信小程式或者app還好，你要是用瀏覽器，那麼你傳過去的值會被直接顯示在url裡，資料不安全，而且還有一個問題，當我主頁面初始化時也是有url傳值過來的，那麼主頁面跳轉到子頁面時也必須要用url把值傳遞過去，這樣寫太麻煩了，一個邏輯失誤會出大問題。
總結：這類方法適用於新人上手做一個dome來用，而且只能單對單頁面，子頁面如果歸屬於多個主頁面，那麼會出現問題（除非你用url或者vuex解決）。
第二種：返回方法傳值
顧名思義，就是利用uni-app的getCurrentPages來獲取當前頁面與上一頁面的資訊，通過修改上一頁面資訊後返回的方法來實現，具體操作邏輯如下：
主頁面：用onshow事件執行初始化事件，進行頁面重新整理，跳轉到子頁面時用uni.navigateTo方法
子頁面：提交事件裡將資料轉為json格式，通過getCurrentPages獲取到上一級頁面的內容進行修改，跳轉回主頁面時用uni.navigateBack方法
案例：
主頁面：
<template>
<view>
<h1>opition.id</h1>
<view @tap="totextfun">前往子頁面</view>
</view>
</template>
<script>
export default {
data() {
return {
opition:{
}
}
},
onShow(){
//頁面跳轉回來要執行的事件
},
methods: {
//跳轉到子頁面
totextfun(){
uni.navigateTo({ url: '/pages/text/text1'});
}
}
}
</script>
<style>
</style>
子頁面：
<template>
<view>
<view @tap="totextfun">跳轉回主頁面</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
//跳轉回主頁面事件
totextfun(){
var pages = getCurrentPages();//當前頁
var beforePage = pages[pages.length - 2];
var json = {
id:11
};
if(beforePage !=undefined){
if(beforePage.opition){//判斷是否為小程式，小程式的資料都在data裡
beforePage.opition = json;
}else{
beforePage.data.opition = json;
}
}
uni.navigateBack();
}
}
}
</script>
<style>
</style>
優缺點：優點是邏輯走通了，功能實現了，而且資料很安全的被傳回去了，但缺點也是有的，就是如果在子頁面重新整理呢，因為獲取不到上一級頁面，程式碼會報錯（也可以多加個判斷來進行處理），但是已經沒有返回上一個頁面帶傳值的功能了。
總結：這種方法雖然有缺點，但的確很實用，排除掉頁面重新整理的情況，簡直無懈可擊，而且頁面重新整理的的情況也可以直接調回首頁來處理，畢竟你都在子頁面重新整理了，主頁面的東西肯定會沒掉，邏輯上已經走不通了。
第三種：Vuex傳值（需要學習vuex相關知識）
顧名思義，就是利用vuex來給資料提供一個暫時儲存的位置，從而實現資料的流通傳遞。
主頁面：用onshow事件來獲取vuex裡的值，進行頁面重新整理，跳轉到子頁面時用uni.redirectTo方法
子頁面：提交事件裡將資料轉為json格式，通過vuex方法存到vuex的資料裡，跳轉回主頁面時用uni.redirectTo方法
案例：
<template>
<view>
<h1>opition.id</h1>
<view @tap="totextfun">前往子頁面</view>
</view>
</template>
<script>
//匯入vuexjs
import vuex from "@/store/index.js";
export default {
data() {
return {
opition:{
}
}
},
onShow(){
//頁面跳轉回來要執行的事件
this.opition = vuex.state.opition;
},
methods: {
//跳轉到子頁面
totextfun(){
uni.redirectTo({ url: '/pages/text/text1'});
}
}
}
</script>
<style>
</style>
子頁面：
<template>
<view>
<view @tap="totextfun">跳轉回主頁面</view>
</view>
</template>
<script>
//匯入vuexjs
import vuex from "@/store/index.js";
export default {
data() {
return {
}
},
methods: {
//跳轉回主頁面事件
totextfun(){
var json = {
id:11
};
vuex.commit("setOpition",json);//呼叫vuex來寫入json
uni.redirectTo({ url: '/pages/text/text'});
}
}
}
</script>
<style>
</style>
優缺點：優點是這個資料流程清晰，就算你重新整理了也是可以達到資料流通的效果，但缺點也有，這個資料你需要一個上層入口來清除掉，不然你以後進入主頁面，通用資訊還是會出現。
總結：這種方式也同樣很有效，適用於大型專案，它只要管理了入口，可以完美的形成一個閉環，不會有任何bug出現（反正我沒出現過問題）。
以上就是我對uni-app 多頁面傳值的三種解決方法，如果大家有其他更有效的方法，也歡迎分享到評論區(￣▽￣)~*。