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

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 = 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'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,'这里是传过来的参数')},

搞定！