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

embedded/2024/12/26 1:04:49/

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

搞定!


http://www.ppmy.cn/embedded/148757.html

相关文章

ROSboard:为您的机器人提供强大的Web可视化工具

ROSboard&#xff1a;为您的机器人提供强大的Web可视化工具 rosboard ROS node that turns your robot into a web server to visualize ROS topics [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/ro/rosboard 项目介绍 ROSboard 是一个专为机器人设计的 Web 服…

【C++基础】09、结构体

一、结构体(struct) C/C 数组允许定义可存储相同类型数据项的变量&#xff0c;但是结构体是 C 中另一种用户自定义的可用的数据类型&#xff0c;它允许存储不同类型的数据项。 结构体用于表示一条记录&#xff0c;假设现在想要跟踪图书馆中书本的动态&#xff0c;可能需要跟踪每…

AIDD - 人工智能药物设计 - 在 Docker 上创建和运行 PostgreSQL + RDKit 卡带环境

在 Docker 上创建和运行 PostgreSQL RDKit 卡带环境 背景 我们将讨论化学数据库。 看起来&#xff0c;如果你在 PostgreSQL 中放置一个 RDKit cartridge &#xff08;扩展&#xff09;&#xff0c;就可以基于 SQL 进行结构相似性搜索&#xff0c;看起来很有趣。但是我找不到…

【故障处理系列--gitlab的CI流水线下载安装包提示报错】

故障现象&#xff1a; 前端同事一直向我反映使用alpine-node系列的镜像&#xff0c;安装包报错故障原因 在CI文件上配置的代理没有生效&#xff0c;导致流水线无法在gitlab-runner上拉取https://registry.npmmirror.com仓库软件包 后来查资料提示说&#xff0c;在gitlab的CI文…

JMeter 二次开发之环境准备

通过JMeter二次开发&#xff0c;可以充分发挥JMeter的潜力&#xff0c;定制化和扩展工具的能力以满足具体需求。无论是开发自定义插件、函数二次开发还是定制UI&#xff0c;深入学习和掌握JMeter的二次开发技术&#xff0c;将为接口功能测试/接口性能测试工作带来更多的便利和效…

Python中所有子图标签Legend显示详解

在数据可视化中&#xff0c;图例&#xff08;legend&#xff09;是一个非常重要的元素&#xff0c;它能够帮助读者理解图表中不同元素的含义。特别是在使用Python进行可视化时&#xff0c;matplotlib库是一个非常强大的工具&#xff0c;能够轻松创建包含多个子图的图表&#xf…

MVCC了解

MVCC&#xff08;多版本并发控制&#xff09;学习指南及代码示例 一、学习MVCC前先了解什么 1. MVCC的定义和作用 MVCC是一种并发控制机制&#xff0c;用于解决并发事务访问数据库时可能出现的问题&#xff0c;如脏读、不可重复读和幻读。它通过为每个数据行维护多个版本来实…

uniapp开发微信小程序实现获取“我的位置”

1. 创建GetLocation项目 使用HBuilder X创建一个项目GetLocation,使用Vue3。 2. 在腾讯地图开放平台中创建应用 要获取位置,在小程序中需要使用腾讯地图或是高德地图。下面以腾讯地图为例。 (1)打开腾讯地图开放平台官方网址:腾讯位置服务 - 立足生态,连接未来 (2)注册…