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

web135085886352024-12-25 11:25

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 url
		this.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.vue
	onLoad(options) {
		 console.log(options,'这里是传过来的参数')
	},

搞定！