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,'這里是傳過來的參數')},搞定！
】)