uniapp中微信小程序与H5相互跳转以及传参详解(webview)
作者：zasulan 发布时间：2024-04-10 16:20:37
技术栈：
uniapp-H5+uniapp-微信小程序（vue3+vite2+ts）
前言：
在单位做项目的时候碰到一个需求，需要从微信小程序跳转到H5页面，这两个端都是使用uniapp编写的，查资料后决定使用webview来嵌入完成，然后考虑到还可能有参数（数据）需要传递，所以实现后记录一下。ps：以下代码我是根据查找的资料里从vue2改成vue3的写法，若有需要改回去即可
一、小程序向H5传递
1.小程序端发送数据
在如下路径创建文件/webview/index.vue，也可自行命名
<template>
<web-view :webview-styles="webviewStyles" :src="url"></web-view>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { onShow, onReady, onLoad } from '@dcloudio/uni-app'
import qs from 'qs'
const webviewStyles = reactive({
progress: { color: '#FF3333' }
})
// 使用qs序列化地址，qs版本需要为@5.2.1，其他版本我试了会报错
const data = reactive({ id: 1, age: 18, name: '前端', ids: [69, 71] })
const url = ref('http://localhost:3000/#/pages/speechcraft/index?')
onLoad(() => {
// decodeURI避免中文乱码，indices: false去除默认格式
url.value += decodeURI(qs.stringify(data, { indices: false }))
})
</script>
<style lang='scss' scoped></style>
2.pages.json进行设置
添加该页面，然后可以在其他页面设置一个跳转动作，跳转到该页面就会自动进入H5页面
{
"path": "pages/webview/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
3.H5端进行数据接收
在路径跳转的页面接收，补充一点，根据查资料，小程序向H5传参只能通过URL来传递
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, onBeforeMount } from 'vue'
import qs from 'qs' // 此处qs版本同样要为@5.2.1
onMounted(() => {
let routes = getCurrentPages();
console.log(routes[routes.length - 1].route) // 获取当前页面路由
console.log('获取传递的数据', qs.parse(window.location.href.split('?')[1]))
})
</script>
4.调试方式以及数据查看
此处是后来无意间看到的文章才知道在哪调试，在微信小程序中，到H5页面后，底部会有一个类似瓢虫的标志，下图为工具栏及打印出的参数
二、H5向小程序传递
1.引入需要的模块
这块是我踩坑比较多的地方，是重点，首先在index.html中引入微信小程序和uniapp相关的SDK，放在<body></body>后面，两个都得引入，因为uni的SDK关联了微信的SDK
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
<!-- wx和uni的SDK -->
<script src="./src/static/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="./src/static/uni.webview.1.5.3.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
uniWebview.getEnv(function (res) {
console.log('当前环境：' + JSON.stringify(res))
});
});
</script>
</html>
上述js文件的在线路径如下
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js"></script>
2.更改文件内容
此处需要将uni.webview.1.5.3.js下载到本地，然后修改里面的内容，因为默认自带的方法名为uni，会和本地的uni命名冲突（官方案例是放在html原生页面里所以不影响，我放在vue项目里则会冲突），所以我改成了uniWebview，可以格式化后修改，位置如下，微信的SDK本地的和在线的都可以用
3.H5端发送数据
到之前接收的页面添加一些代码，用一个发送按钮进行调用
<template>
<u-button @click="sendMessage">发送</u-button>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, onBeforeMount } from 'vue'
import qs from 'qs'
onMounted(() => {
// 此处为之前接收数据的代码
console.log('获取传递的数据', qs.parse(window.location.href.split('?')[1]))
})
const sendMessage = () => {
uniWebview.postMessage({
data: {
action: '我要向微信端传递的数据',
phoneNumber: '15314601234'
}
});
}
</script>
<style lang='scss' scoped></style>
4.小程序端进行数据接收
在<web-view></web-view>添加@message="reciveMessage"，下方添加const reciveMessage = (data: any) => {...}，在返回到小程序的时候即可接收
<template>
<web-view :webview-styles="webviewStyles" :src="url" @message="reciveMessage"></web-view>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { onShow, onReady, onLoad } from '@dcloudio/uni-app'
import qs from 'qs'
onLoad(() => {
// 之前qs序列化的代码，省略掉部分
url.value += decodeURI(qs.stringify(data, { indices: false }))
})
const reciveMessage = (data: any) => {
uni.showToast({
title: "reciveMessage接收到消息：" + JSON.stringify(data.detail),
duration: 2000,
icon: 'none'
});
console.log("接收到消息：" + JSON.stringify(data.detail));
}
</script>
<style lang='scss' scoped></style>
5.调试方式以及数据查看
在微信小程序跳转回的页面即可看到
三、参考链接地址
1、更多细节部分及兼容部分看官方文档：https://uniapp.dcloud.net.cn/component/web-view.html#web-view
2、uni改成uniWebview修改参考：https://ask.dcloud.net.cn/article/id-38847__page-3#reply
3、基本流程参考：http://t.zoukankan.com/lizhao123-p-12005868.html
4、需要引用微信SDK的原因参考：https://ask.dcloud.net.cn/article/35083
5、特别提示，只有认证过的企业账号才能在手机上真机调试正确跳转过去，个人账号现在不支持这功能，会报提示“web-view不支持打开非业务域名请重新配置”，参考文章：https://www.aspxhome.com/article/260762.htm，但是开发时在微信小程序的详情设置中打开允许，在开发者工具里是能跳转的
总结
来源：https://blog.csdn.net/blackhub/article/details/125417922
0
投稿猜你喜欢
一、os__file__ 获取当前运行的.py文件所在的路径(D:\PycharmProjects\- Series 的 sort_index(ascending=True) 方法可以对 index 进行排序操作，ascending 参数用于控
- 比如:Set Connobject=nothing nothing如同英文单词字面意思，没有，没有那个，没有这个，没有东西 Set Conn
- 基于微信开放的个人号接口python库itchat，实现对微信好友的获取，并对省份、性别、微信签名做数据分析。效果：直接上代码，建三个空文本
- 这篇文章主要介绍了Python scrapy增量爬取实例及实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学
- 有时候你会发现Django数据库API带给你的也只有这么多，那你可以为你的数据库写一些自定义SQL查询。 你可以通过导入django.db.
- numpy和matlab的几点差异Python numpy和matlab都是便捷灵活的科学计算语言，两者具有很多相似之处，但也有一些混淆的地
- 根据不同配置文件调用不同的验证函数检查输入。可以根据需求更改验证函数的逻辑。def VerifyData(func):
- 既然你选择了编程作为职业，就注定了要终生以计算机为伴。但这并不意味着你应该置自己的健康不顾。谁都知道，电脑面前待久了，一是伤害你的眼睛，而是
- 为了找到matplotlib在两个点之间连线的方法真是费了好大功夫，本文主要介绍了 matplotlib绘制两点间连线的几种方法，
- 一、前言Python中列表的复制分为几种情况：直接赋值浅复制深复制下面通过实例分析一下这几种情况的区别。二、直接赋值a = [11, 22,
- 打算切换某个网站的主机，没想到遇到Php和Mysql中文乱码的问题。 以前的国外主机用的Mysql是4.x系列的，感觉还比较好，都无论GBK
- 在图像处理以及图像特效中，经常会用到一种成高斯分布的蒙版，蒙版可以用来做图像融合，将不同内容的两张图像结合蒙版，可以营造不同的艺术效果。这里
- 一条撤回的微信消息，就像一个秘密，让你迫切地想去一探究竟；或如一个诱饵，瞬间勾起你强烈的兴趣。你想知道，那是怎样的一句话？是对方不慎讲出的真
- opencv 进行任意形状目标识别，供大家参考，具体内容如下工作中有一次需要在简单的图上进行目标识别，目标的形状不固定，并且存在一定程度上的
- 前言说到 vue 中的 watch 方法，大家可能首先想到，它是用来监听数据的变化，一旦数据发生变化可以执行一些其他的操作。但是 watch
- 上期回顾:亚马逊购物用户体验分析 (二)方便的导航元素任何网上商店的成功，至关重要的一点，就是用户可以简单轻松地使用导航条。基本店铺分类，用
- 本文实例讲述了C#基于数据库存储过程的AJAX分页实现方法。分享给大家供大家参考。具体如下：首先我们在数据库（SQL Server）中声明定
- 我们平日办公时用得最多的软件是Execl、Word或WPS Office等，你的计算机中一定储存着大量的XLS、DOC、WPS文件吧！网页制
- Pycharm中import torch报错问题描述：今天在跑GitHub上一个深度学习的模型，需要引入一个torch包，在pycharm中
