Skip to content

Commit dda1f7d

Browse files
WangyaqiWangyaqi
committed
update: 新增nvue页面与vue页面通过vuex通讯示例
1 parent 329a46c commit dda1f7d

File tree

8 files changed

+379
-47
lines changed

8 files changed

+379
-47
lines changed

‎pages.json‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -392,9 +392,27 @@
392392
}
393393
},
394394
{
395-
"path": "navigator/new-page/new-page",
395+
"path": "navigator/new-page/new-vue-page-1",
396396
"style": {
397-
"navigationBarTitleText": "新页面"
397+
"navigationBarTitleText": "新VUE页面1"
398+
}
399+
},
400+
{
401+
"path": "navigator/new-page/new-vue-page-2",
402+
"style": {
403+
"navigationBarTitleText": "新VUE页面2"
404+
}
405+
},
406+
{
407+
"path": "navigator/new-page/new-nvue-page-1",
408+
"style": {
409+
"navigationBarTitleText": "新NVUE页面1"
410+
}
411+
},
412+
{
413+
"path": "navigator/new-page/new-nvue-page-2",
414+
"style": {
415+
"navigationBarTitleText": "新NVUE页面2"
398416
}
399417
},
400418
{

‎pages/API/navigator/navigator.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,11 @@
2525
methods: {
2626
navigateTo() {
2727
uni.navigateTo({
28-
url: 'new-page/new-page?data=Hello'
29-
})
28+
url: 'new-page/new-vue-page-1?data=Hello'
29+
})
30+
setTimeout(()=>{
31+
uni.$emit('postMsg',{msg:'From navigator'})
32+
},1000)
3033
},
3134
navigateBack() {
3235
uni.navigateBack();

‎pages/API/navigator/new-page/new-nvue-page-1.nvue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<view class="root">
3+
<view class="page-body">
4+
<view class="new-page__color" @click="setColorIndex(colorIndex>1?0:colorIndex+1)" :style="{backgroundColor:currentColor}">
5+
<text class="new-page__color-text">点击改变颜色</text>
6+
</view>
7+
<view class="new-page__text-box">
8+
<text class="new-page__text">点击上方色块使用vuex在页面之间进行通讯</text>
9+
</view>
10+
<view class="new-page__button">
11+
<button class="new-page__button-item" @click="navToNvue">跳转NVUE页面</button>
12+
<button class="new-page__button-item" @click="navToVue">跳转VUE页面</button>
13+
</view>
14+
</view>
15+
</view>
16+
</template>
17+
<script>
18+
import {mapState,mapGetters,mapMutations} from 'vuex'
19+
export default {
20+
data() {
21+
return {
22+
}
23+
},
24+
computed:{
25+
...mapState(['colorIndex','colorList']),
26+
...mapGetters(['currentColor'])
27+
},
28+
methods:{
29+
...mapMutations(['setColorIndex']),
30+
navToNvue(){
31+
uni.navigateTo({
32+
url:'new-nvue-page-2'
33+
})
34+
},
35+
navToVue(){
36+
uni.navigateTo({
37+
url:'new-vue-page-2'
38+
})
39+
}
40+
}
41+
}
42+
</script>
43+
<style>
44+
.new-page__text {
45+
font-size: 14px;
46+
color: #666666;
47+
}
48+
49+
.root{
50+
flex-direction: column;
51+
}
52+
53+
.page-body{
54+
flex: 1;
55+
flex-direction: column;
56+
justify-content: flex-start;
57+
align-items: center;
58+
padding-top: 50px;
59+
}
60+
61+
.new-page__text-box{
62+
padding: 20px;
63+
}
64+
65+
.new-page__color{
66+
width: 200px;
67+
height: 100px;
68+
justify-content: center;
69+
align-items: center;
70+
}
71+
72+
.new-page__color-text{
73+
font-size: 14px;
74+
color: #FFFFFF;
75+
line-height: 30px;
76+
text-align: center;
77+
}
78+
79+
.new-page__button-item{
80+
margin-top: 15px;
81+
width: 300px;
82+
}
83+
</style>

‎pages/API/navigator/new-page/new-nvue-page-2.nvue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<view class="root">
3+
<view class="page-body">
4+
<view class="new-page__color" @click="setColorIndex(colorIndex>1?0:colorIndex+1)" :style="{backgroundColor:currentColor}">
5+
<text class="new-page__color-text">点击改变颜色</text>
6+
</view>
7+
<view class="new-page__text-box">
8+
<text class="new-page__text">点击上方色块使用vuex在页面之间进行通讯</text>
9+
</view>
10+
</view>
11+
</view>
12+
</template>
13+
<script>
14+
import {mapState,mapGetters,mapMutations} from 'vuex'
15+
export default {
16+
data() {
17+
return {
18+
}
19+
},
20+
computed:{
21+
...mapState(['colorIndex','colorList']),
22+
...mapGetters(['currentColor'])
23+
},
24+
methods:{
25+
...mapMutations(['setColorIndex'])
26+
}
27+
}
28+
</script>
29+
<style>
30+
.new-page__text {
31+
font-size: 14px;
32+
color: #666666;
33+
}
34+
35+
.root{
36+
flex-direction: column;
37+
}
38+
39+
.page-body{
40+
flex: 1;
41+
flex-direction: column;
42+
justify-content: flex-start;
43+
align-items: center;
44+
padding-top: 50px;
45+
}
46+
47+
.new-page__text-box{
48+
padding: 20px;
49+
}
50+
51+
.new-page__color{
52+
width: 200px;
53+
height: 100px;
54+
justify-content: center;
55+
align-items: center;
56+
}
57+
58+
.new-page__color-text{
59+
font-size: 14px;
60+
color: #FFFFFF;
61+
line-height: 30px;
62+
text-align: center;
63+
}
64+
65+
.new-page__button-item{
66+
margin-top: 15px;
67+
width: 300px;
68+
}
69+
</style>

‎pages/API/navigator/new-page/new-page.vue‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎pages/API/navigator/new-page/new-vue-page-1.vue‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<template>
2+
<view class="root">
3+
<page-head :title="title"></page-head>
4+
<view class="page-body">
5+
<view class="new-page__text-box">
6+
<text class="new-page__text">从上个页面接收到参数：{{data}}</text>
7+
</view>
8+
<view class="new-page__color" @click="setColorIndex(colorIndex>1?0:colorIndex+1)" :style="{backgroundColor:currentColor}">
9+
<text class="new-page__color-text">点击改变颜色</text>
10+
</view>
11+
<view class="new-page__text-box">
12+
<text class="new-page__text">点击上方色块使用vuex在页面之间进行通讯</text>
13+
</view>
14+
<view class="new-page__button">
15+
<button class="new-page__button-item" @click="navToNvue">跳转NVUE页面</button>
16+
<button class="new-page__button-item" @click="navToVue">跳转VUE页面</button>
17+
</view>
18+
</view>
19+
</view>
20+
</template>
21+
<script>
22+
import {mapState,mapGetters,mapMutations} from 'vuex'
23+
export default {
24+
data() {
25+
return {
26+
title: '新页面',
27+
data:""
28+
}
29+
},
30+
computed:{
31+
...mapState(['colorIndex','colorList']),
32+
...mapGetters(['currentColor'])
33+
},
34+
onLoad(e){
35+
if(e.data){
36+
this.data = e.data;
37+
}
38+
uni.$on('postMsg',(res)=>{
39+
uni.showModal({
40+
content: `收到uni.$emit消息:${res.msg}`,
41+
showCancel: false
42+
})
43+
})
44+
},
45+
onUnload() {
46+
uni.$off('postMsg')
47+
},
48+
methods:{
49+
...mapMutations(['setColorIndex']),
50+
navToNvue(){
51+
uni.navigateTo({
52+
url:'new-nvue-page-1'
53+
})
54+
},
55+
navToVue(){
56+
uni.navigateTo({
57+
url:'new-vue-page-2'
58+
})
59+
}
60+
}
61+
}
62+
</script>
63+
<style>
64+
page{
65+
display: flex;
66+
min-height: 100%;
67+
}
68+
69+
.new-page__text {
70+
font-size: 14px;
71+
color: #666666;
72+
}
73+
74+
.root{
75+
display: flex;
76+
flex: 1;
77+
flex-direction: column;
78+
}
79+
80+
.page-body{
81+
flex: 1;
82+
display: flex;
83+
flex-direction: column;
84+
justify-content: flex-start;
85+
align-items: center;
86+
}
87+
88+
.new-page__text-box{
89+
padding: 20px;
90+
}
91+
92+
.new-page__color{
93+
display: flex;
94+
width: 200px;
95+
height: 100px;
96+
justify-content: center;
97+
align-items: center;
98+
}
99+
100+
.new-page__color-text{
101+
font-size: 14px;
102+
color: #FFFFFF;
103+
line-height: 30px;
104+
text-align: center;
105+
}
106+
107+
.new-page__button-item{
108+
margin-top: 15px;
109+
width: 300px;
110+
}
111+
</style>

0 commit comments

Comments
 (0)