微信小程序web-view与H5之间交互(含支付)
第一章 了解web-view与H5的交互(含支付)
文章目录
- 第一章 了解web-view与H5的交互(含支付)
- 前言
- 一、web-view是什么?
- 二、使用步骤
- 三、业务场景
- 1.小程序带参数跳转链接,H5应用获取参数
- 2.H5应用涉及跳转小程序功能,小程序嵌套后功能失效 (原网页环境是微信浏览器,嵌入后为小程序内置环境,api方法不兼容)
- 3.H5应用涉及微信JSAPI支付,小程序嵌套后功能失效(小程序内置环境不支持JSAPI方式支付,仅支持小程序支付,需后端配合增加小程序支付,H5通过jssdk携带支付参数跳转小程序页面,小程序内接收参数做支付,并且小程序内置支付api可以知道支付状态,那么就能完成整个支付业务)
- 总结
前言
uniapp开发小程序的过程中主、分包有大小限制,随着业务的增加,使用web-view加载H5的方式,往往纯加载并不能满足业务需求,这个时候就得了解小程序与H5的交互。
提示:以下是本篇文章正文内容,下面案例可供参考
一、web-view是什么?
web-view 是微信小程序内置的浏览器组件,用来加载网络html。
二、使用步骤
<template><web-view src="https://www.xxx.html"></web-view>
</template>
注意:
- 小程序web-view会自动铺满全屏,不支持修改组件宽高。
- 小程序加载路径仅支持网络网页,不支持本地的html页面。
三、业务场景
1.小程序带参数跳转链接,H5应用获取参数
<!-- 小程序参数拼接在地址上-->
<!-- 小程序-->
<template><web-view src="https://www.xxx.html?id=1&from=xcx"></web-view>
</template>
解决:小程序地址路径?传参 — H5onLoad函数接收
// H5
// H5获取拼接的url参数
<script>
export default {onLoad(option){console.log(option) // {id: 1, from: 'xcx'}}
};
</script><script>
console.log(window.location.search) // ?id=1&from=xcx
</script>
2.H5应用涉及跳转小程序功能,小程序嵌套后功能失效 (原网页环境是微信浏览器,嵌入后为小程序内置环境,api方法不兼容)
解决:H5触发事件并发送内容 — web-view @message事件监听处理
<!-- message事件监听H5触发的消息-->
<!-- 小程序-->
<template><web-view src="https://www.xxx.html" @message="onMessage"></web-view>
</template>
<script>
export default {data() {return {};},methods: {onMessage(event) {console.log('接收到消息:' + JSON.stringify(event.detail.data));// 跳转小程序方法uni.navigateToMiniProgram({appId: data.appId,path: data.path,extraData: data.extraData});}}
};
</script>
// H5
// H5触发事件并发送内容
document.addEventListener('click', function() {uni.postMessage({data: {appId: '',path: '',extraData: ''}});
})
3.H5应用涉及微信JSAPI支付,小程序嵌套后功能失效(小程序内置环境不支持JSAPI方式支付,仅支持小程序支付,需后端配合增加小程序支付,H5通过jssdk携带支付参数跳转小程序页面,小程序内接收参数做支付,并且小程序内置支付api可以知道支付状态,那么就能完成整个支付业务)
解决:H5调用支付下单接口 — 携带参数跳转到小程序里去完成支付 — 支付后携带参数回跳H5 — H5接收参数判断支付是否成功
<!-- 小程序-->
<template><web-view :src="url"></web-view>
</template>
<script>
export default {data() {return {url: ''};},onLoad(option){//有支付订单进行支付if (option.idNo) {const item = JSON.parse(decodeURIComponent(option.data));this.requestPayment(item);}},methods: {requestPayment(item) {console.log(item);uni.requestPayment({provider: 'wxpay',signType: item.signType || 'MD5',timeStamp: item.timeStamp,nonceStr: item.nonceStr,package: item.package,paySign: item.paySign,success: res => {// 回跳地址携带支付状态参数,便于H5判断// 支付成功this.url += '&payStatus=success';},fail: err => {// 支付失败this.url += '&payStatus=fail';}});}}
};
</script>
// H5
<script>
onLoad(option){if (option.payStatus == ‘success’) {// 支付成功........}else {// 支付失败........}
},
methods: {// H5通过jssdk携带支付参数跳转小程序页面let path = `/pages/webview_pay/webview_pay`;(注意需和小程序内跳转链接页面路径一致)........// 接口返回的支付参数let navigateToData = {timeStamp: response.data.result.timeStamp,nonceStr: response.data.result.nonceStr,package: response.data.result.package,paySign: response.data.result.sign};let uri = window.location.href.split('#')[0]; //获取当前url;path += `?idNo=${response.data.result.orderNo}&&data=${encodeURIComponent(JSON.stringify(navigateToData))}&&uri=${uri}`;//通过JSSDK的api使小程序跳转到指定的小程序页面jweixin.miniProgram.getEnv(function(res) {if (res.miniprogram) {jweixin.miniProgram.redirectTo({url: path});} else {uni.showToast({title: 'error',icon: 'none'});}});
}</script>
总结
本文简单介绍了小程序web-view与H5的一些交互,若有其他更好的交互方式,欢迎评论区补充。
未完待续...
微信小程序web-view与H5之间交互(含支付)相关推荐
- 控制微信小程序web view的返回按钮
需求:点击web-view页面的左上角返回按钮时,显示弹窗,点击取消或确认后才能返回.(实际上点击返回按钮会直接返回上一页) 解决方法:由于webview使用的是微信浏览器打开的,我们可以使用js的H ...
- 微信小程序跳转到H5网页
小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态.小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现 ...
- 实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能 一.项目场景: 难点 解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
- 小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
- 关于微信小程序跳转到H5,然后从H5又跳回微信小程序问题的资料
关于微信小程序跳转到H5,然后从H5又跳回微信小程序问题的资料 直接上答案 // javascript import wx from 'weixin-jsapi';// 判断h5页面是否是运行在小程序 ...
- [微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转 小程序与H5交互以上传文件为例 微信小程序开放能力web-view使用之h5页面与小程序页面交互传值 快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
- 微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏 需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
- 微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存 参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
- 微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版
微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版 本教程基于 we-cropper v1.4.0,非本人同意禁止任何形的转载 we-cropper官方下载链接 效果图 一.非2d版 ...
- 微信小程序数据库交互 php,微信小程序wx.request实现后台数据交互功能分析
本文主要介绍微信小程序wx.request实现后台数据交互功能,分析微信小程序wx.request在后台数据交互过程中遇到的问题与相关的解决方法,需要的朋友可以参考下 记录微信小程序wx.reques ...
最新文章
- 一步步玩pcDuino3--mmc下的裸机流水灯
- hessiancpp编译和使用(C++版)
- 准IT工作者如何择师、如何学习
- C#各种小知识点总结
- 通过几个例子看sed的模式空间与保持空间
- 使用cloudera manager安装Oozie服务【详细步骤】
- 怎么用odbc连接mysql数据库连接_PowerDesigner通过ODBC来实现Mysql数据库的连接操作...
- mysql5.7主从复制遇到的坑
- 学模拟电路的神器everycircuit
- Linux执行sql文件
- 标准正态分布表完整图 查询_正态分布基本概念及Excel实现
- wps里面函数怎么使用_wps表格函数及函数简单使用
- php 360kan 抓取,米酷MKCMS自动采集360kan影视站6.2.6无授权版
- 如何使用 QEMU 中的虚拟串口
- 服务器80端口找不到,如何查询服务器80端口被关闭
- Gos —— 掌控硬盘
- 铰削和铰刀的基本概念
- IC讲解: 如何区分CP测试和FT测试
- 【文献阅读笔记】KAM Theory Meets Statistical Learning Theory: Hamiltonian Neural Networks with Non-Zero Trai
- 世界第一台民用计算机,世界上第一台计算机