uniapp小程序使用webview 嵌套 vue 项目
小程序中发送
<web-view :src="urlSrc" @message="handleMessage"></web-view>export default {data() {return {urlSrc: "",};},onLoad(options) {// 我需要的参数比较多 所以比较臃肿// 获取用户信息 根据自己需要let userInfor = uni.getStorageSync("userInfor") || ''// web-view urlthis.urlSrc = "https://xxxxxxxx.com/#/viewsEdit?key=" + options.id + "&srcurl=viewsEdit" +"&token=" + uni.getStorageSync('token') + "&wxopenid=" + uni.getStorageSync('wxopenid') + '&phone=' + userInfor.mobilePhone + "&name=" + userInfor.nickName + "&surveyId=" + options.ids}}
vue中接收参数
// index.html 中引入<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
// App.vue中<template><div id="app"><RouterView v-if="isRouterAlive" /></div>
</template><script>
export default {mounted() {// 主要代码 开始let that = thisconsole.log(window.location, 'this.$router.query')// 获取url 中的参数let datas = that.getUrlParams(window.location.href)if (datas.token) {// 保存tokenthat.$store.dispatch('user/login', {token: 'bearer' + datas.token,...datas}).then(() => {// 登录成功后路由跳回that.$router.replace({path: '/viewsEdit',query: {key: datas.key,wxopenid:datas.wxopenid,phone:datas.phone,name:datas.name,surveyId:datas.surveyId,}})})},methods: {getUrlParams(url) {const params = {}const reg = /([^?&=]+)=([^&]*)/gurl.replace(reg, (match, key, value) => {params[decodeURIComponent(key)] = decodeURIComponent(value)})return params},}
}
</script>
// 使用uni提供的webview.js插件跳转小程序的页面
npm i uni-webview-lib
vue发送消息给uniapp
// viewsEdit.vue
<template><div @click="submitForm">去小程序</div>
</template><script>
import {createFormResultRequest,
} from '@/api/project/data'
import uni from 'uni-webview-lib'
export default {methods: {submitForm() {createFormResultRequest().then((res) => {const message = '参数'uni.reLaunch({// 带上需要传递的参数url: `/subFishingBay/pages/palaceDraw/luckdraw?message=${message}&id=${res.data.id}`})this.msgSuccess('添加成功')})}}
}
</script>小程序中接收数据
// 在上面跳转的页面 /subFishingBay/pages/palaceDraw/luckdraw// luckdraw.vueonLoad(options) {console.log(options,'这里是传过来的参数')},搞定！
】)