uniapp中微信小程序与H5相互跳转以及传参详解(webview)
目录
- 技术栈：
- 前言：
- 一、小程序向H5传递
- 1.小程序端发送数据
- 2.pages.json进行设置
- 3.H5端进行数据接收
- 4.调试方式以及数据查看
- 二、H5向小程序传递
- 1.引入需要的模块
- 2.更改文件内容
- 3.H5端发送数据
- 4.小程序端进行数据接收
- 5.调试方式以及数据查看
- 三、参考链接地址
- 总结
技术栈：
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.jb51.net/article/260762.htm，但是开发时在微信小程序的详情设置中打开允许，在开发者工具里是能跳转的
总结
到此这篇关于uniapp中微信小程序与H5相互跳转以及传参的文章就介绍到这了,更多相关uniapp 小程序与H5相互跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
小程序跳转H5页面的方法步骤
小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态.小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现在已经有超过150万的开发者加入到了小程序的开发,与我们一起共同发力推动小程序的发展,小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,小程序还在许多城市实现了支持地铁.公交服务.小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升. 因此小程序
-
微信小程序web-view环境下H5跳转小程序页面方法实例代码
目录 引言 1.在H5页面引入JSSDK 2.跳转至小程序页面方法 总结 引言 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了.那么这个问题应该如何解决呢? 1.在H5页面引入JSSDK 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执行微信小程序的部分API命令.H5页面引入JSSDK的代码如下所示. <script src="
-
微信小程序和H5页面间相互跳转代码实例
这篇文章主要介绍了微信小程序和H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram // 小程序跳转 /* * appId string 是 要打开的小程序 appId * path string 否 打开的页面路径,如果为空则打开首页 * extraData object 否 需要传递给目标小程序的数据,目标小程序可在 App.onLaunch,A
-
小程序跳转到的H5页面再跳转回跳小程序的方法
哈喽,大家上午好,萍子又来啦,本人最近一段时间一直在做小程序的项目,大大小小的坑真的是踩了不小,无奈本人啊还老是忘记自己究竟踩过那些坑,但是不得不说虽然小程序尚还有很多不完善的地方,但是还是蛮强大的啦,也是引得众公司纷纷引用小程序项目啊. 之前萍子写过一篇从小程序跳转到H5页面的博文小程序跳H5页面,那么今天我们一起来看看如何跳回来,我们要有始有终哇,O(∩_∩)O哈哈~ ####H5跳转到小程序的方法 方法有两个: 第一种比较简单,就直接点击手机的返回键,让它自动根据层级返回即可: 第二种,可
-
uniapp中微信小程序与H5相互跳转以及传参详解(webview)
目录 技术栈: 前言: 一.小程序向H5传递 1.小程序端发送数据 2.pages.json进行设置 3.H5端进行数据接收 4.调试方式以及数据查看 二.H5向小程序传递 1.引入需要的模块 2.更改文件内容 3.H5端发送数据 4.小程序端进行数据接收 5.调试方式以及数据查看 三.参考链接地址 总结 技术栈: uniapp-H5+uniapp-微信小程序(vue3+vite2+ts) 前言: 在单位做项目的时候碰到一个需求,需要从微信小程序跳转到H5页面,这两个端都是使用uniapp编写的
-
微信小程序：数据存储、传值、取值详解
小程序界面传值 父级界面:A界面 子级界面:B界面 一.url传值 详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释. 1. 正向传值:A界面 –>B界面 用 navigator标签或 wx.navigator传值,A界面向B界面传id值 A界面获取id值传向B界面如果需要传多个参数, 用 & 链接即可 // 方法一:navigator标签传值 <navigator url="/page/index/index?id=110" >传值&
-
微信小程序之高德地图多点路线规划过程示例详解
调用 如何调用高德api? 高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比较详细: 第一步,注册高德开发者 第二部,去控制台创建应用 即点击右上角的控制平台创建应用 创建应用绑定服务记得选择微信小程序:同时在https://lbs.amap.com/api/wx/gettingstarted中下载开发包 第三步,登陆微信公众平台在开发设置中将高德域名配置上 https://restapi.amap.com 第四步,打开微信开发者工具,打开微信小程
-
一文带你了解微信小程序数据绑定、事件绑定以及事件传参、数据同步
目录 数据绑定 基本原则 在data中定义数据 Mustache语法 Mustache语法的应用 绑定内容 绑定属性 运算(三元运算.算术运算等) 事件绑定 什么是事件? 常用事件 事件对象属性 target与currentTarget的区别 bindtap语法格式 在事件处理函数中为data赋值 事件传参 查看参数 bindinput语法格式 实现文本框与data之间的数据同步 总结 数据绑定 基本原则 在data中定义数据 在WXML中使用数据 在data中定义数据 在页面对应的.js 文件
-
微信小程序引用公共js里的方法的实例详解
微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag
-
微信小程序图片轮播组件gallery slider使用方法详解
本文实例为大家分享了微信小程序图片轮播组件的具体代码,供大家参考,具体内容如下 先上效果图: wxml <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper"> <swiper class=&quo
-
微信小程序 动态的设置图片的高度和宽度详解及实例代码
微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 前言: 在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰.这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形.或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等. 1.图片等比例缩放工具
-
微信小程序授权获取用户详细信息openid的实例详解
小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种 我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如
-
微信小程序 连续旋转动画（this.animation.rotate）详解
微信小程序 连续旋转动画 一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转) onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: 1400, timingFunction: 'linear'
-
微信小程序 两种为对象属性赋值的方式详解
微信小程序两种为对象属性赋值的方式 对应config.wxml <view> 阶段一<switch id="config1" checked bindchange="switchChange"/> </view> 对应config.js data:{ //定义对象 configs:{} } //方式一 switchChange:function(e){ //为对象的某一属性赋值 configs.config1={ }; conso