当前位置:首页 » 《随便一记》 » 正文

微信小程序web-view与H5之间交互(含支付)

23 人参与  2023年05月06日 09:05  分类 : 《随便一记》  评论

点击全文阅读


第一章 了解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的一些交互,若有其他更好的交互方式,欢迎评论区补充。

未完待续...


点击全文阅读


本文链接:http://zhangshiyu.com/post/61042.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 鹿雪附加完整在线阅读(小祖宗她带着双宝闹翻天)最近更新列表
  • 你要战功我给你,妖兽入侵你哭啥高质量好文叶天凌筱完本_你要战功我给你,妖兽入侵你哭啥高质量好文(叶天凌筱)
  • 夫君和小三霸占了我的将军府,我杀疯了阅读_雪儿谭绍木兰全集_小说后续在线阅读_无删减免费完结_
  • 鹿溪小说(鹿溪)终章+番外(穿进恐怖游戏后,我和反派HE了)一口气阅读
  • 完结文留给儿子的副卡月月刷爆,他却因睡桥底被送进收容所列表_完结文留给儿子的副卡月月刷爆,他却因睡桥底被送进收容所(娄墨霆宋佑轩)
  • 你活着,却死在我等你的第三年后续+番外_谨言佳佳温以宁全集_小说后续在线阅读_无删减免费完结_
  • 相思溺于夏时雨小说(裴景澈初念可)章节目录+起始篇章(相思溺于夏时雨)全章无套路在线
  • 未婚夫重生归来叫停手术,把剥开肚子的我困在手术台上40分钟(裴临渊阮离歌)
  • 完结文离婚是你提,净身出户你又哭什么精彩分享列表_完结文离婚是你提,净身出户你又哭什么精彩分享(苏铭余素伊)
  • 全书浏览哥哥重生救我,我带队灭了组织!(陈致远陈知韫)_哥哥重生救我,我带队灭了组织!(陈致远陈知韫)全书结局
  • 全文算命赚功德,我直接飞升成仙(楚天河林风)列表_全文算命赚功德,我直接飞升成仙
  • 八零丈夫抛妻弃子后悔不当初完整文本_顾尧全文_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1