uniapp小程序使用webview 嵌套 vue 项目

<code>小程序中发送

<web-view :src="urlSrc" @message="handleMessage"></web-view>code>

export default { -- -->

data() {

return {

urlSrc: "",

};

},

onLoad(options) {

// 我需要的参数比较多 所以比较臃肿

// 获取用户信息 根据自己需要

let userInfor = uni.getStorageSync("userInfor") || ''

// web-view url

this.urlSrc = "https://xxxxxxxx.com/#/viewsEdit?key=" + options.id + "&srcurl=viewsEdit" +code>

"&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>code>

// App.vue中

<template>

<div id="app">code>

<RouterView v-if="isRouterAlive" />code>

</div>

</template>

<script>

export default { -- -->

mounted() {

// 主要代码 开始

let that = this

console.log(window.location, 'this.$router.query')

// 获取url 中的参数

let datas = that.getUrlParams(window.location.href)

if (datas.token) {

// 保存token

that.$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 = /([^?&=]+)=([^&]*)/g

url.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>code>

</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.vue

onLoad(options) {

console.log(options,'这里是传过来的参数')

},

搞定！