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

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

**

小程序中发送

**

<web-view :src="urlSrc" @message="handleMessage"></web-view>exportdefault{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>exportdefault{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></template><script>import{
  createFormResultRequest,}from'@/api/project/data'import uni from'uni-webview-lib'exportdefault{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,'这里是传过来的参数')},

搞定！