提交 6a889f54 编写于 作者: 小刘28's avatar 小刘28 💬

feat:添加页面传值的功能;完善web页面加载效果;

上级 58571576
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
<view class=""> <view class="">
<button @click="goSubPageB()">跳转分包页面B</button> <button @click="goSubPageB()">跳转分包页面B</button>
</view> </view>
<view class="">msg:{{msg}}</view> <view class="">msgA:{{msgA}}</view>
<view class="">msgANew:{{msgANew}}</view>
</view> </view>
</template> </template>
...@@ -12,34 +13,46 @@ ...@@ -12,34 +13,46 @@
export default { export default {
data( ) { data( ) {
return { return {
msg: 'A->B' msgA: 'A页面默认内容',
msgANew:''
}
},
watch:{
msgANew:(newValue,oldValue)=>{
console.log('msgANew发生变化了');
} }
}, },
onLoad( ) { onLoad( ) {
let that = this;
uni.$on( 'updateA', function ( data ) {
console.log( '监听到B->A:' + data.msg );
that.msg = data.msg;
} );
}, },
onShow( ) { onShow( ) {
}, },
onUnload( ) { onUnload( ) {
// 移除监听事件
uni.$off( 'updateA' );
}, },
methods: { methods: {
goSubPageB( ) { goSubPageB( ) {
let that = this;
uni.navigateTo( { uni.navigateTo( {
url: '/pages-b/b-test/b-test' url: '/pages-b/b-test/b-test',
events:{
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
// acceptDataFromOpenedPage: function(data) {
// console.log(data)
// },
bToa: function(data) {
console.log(data);
that.msgANew = data.data;
},
// someEvent: function(data) {
// console.log(data)
// }
},
success:(res)=>{
// 通过eventChannel向被打开页面传送数据
// res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
res.eventChannel.emit('aTob', { data: 'aTob' })
}
} ); } );
let that = this;
setTimeout( ( ) => {
uni.$emit( 'transA', {
msg: that.msg
} );
}, 300 );
}, },
} }
} }
......
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
<view> <view>
<view class="">这是分包页面B</view> <view class="">这是分包页面B</view>
<view class=""> <view class="">
<button @click="goSubPageA()">跳转分包页面A</button> <button @click="goSubPageA()">返回分包页面A</button>
<button @click="transA()">把数值传到页面A</button> <button @click="transA()">把数值传到页面A</button>
<view class="">msg:{{msg}}</view> <view class="">msgB:{{msgB}}</view>
<view class="">msgBNew:{{msgBNew}}</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -13,30 +14,33 @@ ...@@ -13,30 +14,33 @@
export default { export default {
data( ) { data( ) {
return { return {
msg: '' msgB: '页面默认内容',
msgBNew:'',
eventChannel:''
} }
}, },
onShow( ) { onLoad() {
this.eventChannel = this.getOpenerEventChannel();
// this.eventChannel.emit('bToa', {data: 'bToa'});
// eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
let that = this; let that = this;
uni.$on( 'transA', function ( data ) { this.eventChannel.on('aTob', function(data) {
console.log( '监听到A->B:' + data.msg ); console.log(data);
that.msg = data.msg; that.msgBNew = data.data;
} ); });
},
onShow( ) {
}, },
onUnload( ) { onUnload( ) {
// 移除监听事件
uni.$off( 'transA' );
}, },
methods: { methods: {
goSubPageA( ) { goSubPageA( ) {
uni.navigateTo( { uni.navigateBack();
url: '/pages-a/a-test/a-test'
} );
}, },
transA( ) { transA(){
uni.$emit( 'updateA', { // const eventChannel = this.getOpenerEventChannel();
msg: 'B->A' this.eventChannel.emit('bToa', {data: 'bToa'});
} );
} }
} }
} }
......
...@@ -64,7 +64,8 @@ ...@@ -64,7 +64,8 @@
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#F8F8F8" "backgroundColor": "#F8F8F8",
"pageOrientation":"portrait"
}, },
"uniIdRouter": {}, "uniIdRouter": {},
"condition": { //模式配置,仅开发期间生效 "condition": { //模式配置,仅开发期间生效
......
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
<button @click="clickGetUser">获取用户信息</button> <button @click="clickGetUser">获取用户信息</button>
<button @click="clickCreateTimer">创建定时器</button> <button @click="clickCreateTimer">创建定时器</button>
<button @click="clickGoError">跳转错误页面</button> <button @click="clickGoError">跳转错误页面</button>
<button @click="clickGoPageA">跳转页面A</button>
<button @click="clickGoWeb">跳转web页面</button>
</view> </view>
</view> </view>
</template> </template>
...@@ -28,6 +30,16 @@ ...@@ -28,6 +30,16 @@
}, },
methods: { methods: {
clickGoWeb(){
uni.navigateTo({
url:'/pages/template/template-2-web'
});
},
clickGoPageA(){
uni.navigateTo({
url:'/pages-a/a-test/a-test'
});
},
clickGoError(){ clickGoError(){
uni.navigateTo({ uni.navigateTo({
url:'/pages/error/error' url:'/pages/error/error'
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<template> <template>
<div> <div>
<web-view :src="webSrc"></web-view> <web-view :webview-styles="webviewStyles" :src="webSrc"></web-view>
</div> </div>
</template> </template>
...@@ -17,7 +17,12 @@ ...@@ -17,7 +17,12 @@
export default { export default {
data(){ data(){
return { return {
webSrc:'' webSrc:'',
webviewStyles: {
progress: {
color: '#42B983',
},
}
} }
}, },
onLoad( options ) { onLoad( options ) {
......
...@@ -112,8 +112,10 @@ function handleError ( data ) { ...@@ -112,8 +112,10 @@ function handleError ( data ) {
} ); } );
} }
} }
uni.navigateTo({ uni.navigateTo({
url:'/pages/error/error' url:'/pages/error/error'
}); });
console.log( '请求结果异常:', data ); console.log( '请求结果异常:', data );
} }
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册