After developing uni-app for a year, here are some problems in uni-app development, and provide several solutions to share with you:
Problem description: A main page needs to connect one or two sub-pages. The sub-pages pass values to the main page, and the main page is updated.
Difficulty: First, we need a logical model (a random drawing is drawn here)
Through this model, we can see a problem, how to transfer the content of the subpage back to the main page, and how to make this way of returning safer and more effective. This is also the difficulty of this problem. I have summarized three solutions and share them here. for everyone:
The first type: url pass value
As the name implies, it uses the url method of the page to pass the value. The specific operation logic is as follows:
Main page: use the onload event to get the url value of the page initialization, refresh the page, and use the uni.redirectTo method when jumping to the subpage
Subpage : Convert the data to url format in the submission event, and use uni.redirectTo method when jumping back to the main page
Case:
main page:
<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>Subpage:
<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>
Advantages and disadvantages: The advantages are simple, simple, and simple. The advantages of the implementation logic of this method are very simple and rude, but if the url transfer value is a WeChat applet or app, it is okay. If you use a browser , then you pass the past value It will be displayed directly in the url, the data is not safe, and there is a problem. When my main page is initialized, the url is passed by the value, so when the main page jumps to the subpage, the url must also be used to pass the value. , This is too much trouble to write, a logical error will cause big problems.
Summary: This kind of method is suitable for newcomers to start using a dome, and it can only be used on a single-to-single page. If the subpage belongs to multiple main pages, then problems will occur (unless you use url or vue x to solve it).
The second: return method to pass by value
As the name implies, it uses uni-app's getCurrentPages to get the information of the current page and the previous page, and it is implemented by modifying the method of returning the previous page information. The specific operation logic is as follows:
Main page: use the onshow event to perform the initialization event, refresh the page, and use the uni.navigateTo method when jumping to the sub-page
Subpage : Convert the data to the js on format in the submission event, get the content of the previous page through getCurrentPages and modify it, and use the uni.navigateBack method when jumping back to the main page
Case:
main page:
<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>Subpage:
<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>
Advantages and disadvantages: The advantage is that the logic goes through, the function is realized, and the data is safely transmitted back, but there are also disadvantages, that is, if you refresh on the subpage, because the upper-level page can not be obtained, the code will report an error (You can also add more judgments for processing), but there is no longer a function to return to the previous page with passing values.
Summary: Although this method has shortcomings, it is indeed very practical. It is impeccable to rule out the page refresh situation, and the situation of the page refresh can also be directly transferred back to the home page for processing. After all, you are refreshed on the sub-page, the main page The thing will definitely disappear, and it will no longer work logically.
The third type: vue x transfer value (need to learn vuex related knowledge)
As the name implies, vuex is used to provide a temporary storage location for data, so as to realize the circulation and transmission of data.
Main page: Use the onshow event to get the value in vuex, refresh the page, and use the uni.redirectTo method when jumping to a subpage
Subpage: Convert the data to json format in the submission event, store it in the vuex data through the vuex method, and use the uni.redirectTo method when jumping back to the main page
Case:
<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>Subpage:
<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>Advantages and disadvantages: The advantage is that the data flow is clear, even if you refresh it, you can achieve the effect of data circulation, but there are also disadvantages. You need an upper-level entrance to clear this data, otherwise you will enter the main page in the future, and general information will still appear.
Summary: This method is also very effective and is suitable for large projects. As long as it manages the entrance, it can perfectly form a closed loop without any bugs (I haven't had any problems anyway).