微信小程序、vueH5页面互相跳转并传递参数
微信小程序是uni-app 运行到微信开发者工具里,vue 是 跑项目到本地的。
1.uni-app 里
<template>
<web-view :src="url" @message="getMessage" @onPostMessage="getPostMessage"></web-view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
onLoad(option) {
let url = {
phone: 127837238,
name:'sunzhuang'
}
console.log(JSON.stringify(url))
// http://192.168.3.69:8081/#/LoginIndex 这个地址就是你vue项目跑起来的地址
this.url = 'http://192.168.3.69:8081/#/LoginIndex?url=' + JSON.stringify(url);
},
methods: {
getMessage(e) {
console.log("@message 接收成功")
uni.showModal({
content: JSON.stringify(e.detail),
// content: 'haha',
showCancel: false
})
},
getPostMessage(e) {
console.log("@onPostMessage 接收成功")
uni.showModal({
content: JSON.stringify(e.detail),
// content: 'haha',
showCancel: false
})
},
},
}
</script>
<style lang="scss">
</style>
2.vue页面
首先在vue index.html 引入 注意顺序 weixin.js 要在前
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
3.vue 页面代码
<template>
<div class="container">
<!-- paramsData 是接受uni-app 小程序传递过来的值的 console.log 是不显示的 -->
{{ paramsData }}
<button @click="postMsg">向app发送消息</button>
</div>
</template>
<script>
export default {
name: '',
props: [],
data() {
return {
paramsData:'',
}
},
mounted() {
// $route.query是拿不到的
// 获取浏览器地址,分割?后面的就是传过来的值了
console.log(window.location.href);
console.log(window.location.href.split('?'))
this.paramsData = window.location.href.split('?')[1]
this.$nextTick(() => {
// 确保 index.html 页面引入的js加载完成后 在监听UniAppJSBridgeReady方法
document.addEventListener('UniAppJSBridgeReady', function () {
uni.getEnv(function (res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
})
},
methods: {
postMsg() {
console.log("调用uni.postMessage,开始发送")
// uni-app 里 web-view 的方法 就可以拿到 data: {action: 'postMessage hh'}
uni.postMessage({
data: {
action: 'postMessage hh'
}
});
// 返回上一级
// uni.navigateBack()
// wx.miniProgram.redirectTo({
// url: '/pages/cate/cate' // 小程序中页面的路径
// })
wx.miniProgram.switchTab({
url: '/pages/cate/cate' // 小程序中页面的路径
})
},
},
}
</script>
可以直接复制使用 !!!!