uniapp微信小程序外壳内联H5实现支付

业务场景：用户有现成的微信H5应用（有微信支付）。用户想要一个一摸一样的小程序版本，但是又不想高成本去重新开发，所以可以考虑采用小程序的web-view组件内联现有的微信H5应用（哇简直不要再偷懒了！）简直就是分分钟搞定的事！

是不是太简单了？给客户好心免费搞都行了！

但是这之中有个问题！因为用户线上微信H5应用涉及了微信支付功能，所以在小程序内联它后小程序中点击支付是无反应的！因为整体毕竟是小程序，支付需要走小程序的支付api！

应对方案：必然涉及了H5与小程序的通信交互！

首先来放出该组件的文档：

官方：web-view | 微信开放文档

uniapp：web-view | uni-app官网

这里划重点！

首先我创建一个uniapp-H5、uniapp-小程序的示例：

wx_h5:

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view><button @click="setMsg()">向小程序发送消息</button><view>{{msg}}</view></view>
</template><script>export default {data() {return {title: 'Hello',msg:''}},onLoad() {},methods: {setMsg(){var that = thisthat.msg = '点击了'//发送消息给小程序(只有在小程序页面销毁、后退、分享时才会接收到该消息)that.wx.jweixin.miniProgram.postMessage({data:'来自h5的消息'})//告诉小程序跳转小程序指定路径(没什么限制，执行小程序直接接收通信跳转指定小程序页面)/*that.wx.jweixin.miniProgram.navigateTo({url:'../index1/index1?data='+'ok'})*///}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>

该H5引入了微信jssdk。

H5引入：

<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

uniapp-H5引入：

npm install weixin-js-sdk --sava

这里我们是uniapp-H5，安装后创建一个wx.js

wx.js

let jweixin = require('jweixin-module');export default {jweixin:jweixin,
}

main.js插入

import wechat from './common/wx.js'
Vue.prototype.wx = wechat;

具体api功能去查看文档：概述 | 微信开放文档

看上述代码调用postMessage方法可以给小程序发送消息，但是他有个弊端，就是点击后只有小程序页面（后退、组件销毁、分享）才会回调接收到该消息。这很不优雅，总不能点击支付没反应然后主动退出页面或者销毁或者分享才开始跑支付吧？

解决方案：

采用通知小程序跳转页面携带订单参数，小程序接收直接跳转指定的页面携带该参数，跳转到的页面接收参数并主动执行小程序支付api！

             this.wx.jweixin.miniProgram.navigateTo({url:'../index1/index1?data='+'ok'})

注意这里有坑！url可别写/pages/index1/index1，无反应的！

完整H5代码（index.vue）

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view><button @click="setMsg()">向小程序发送消息</button><view>{{msg}}</view></view>
</template><script>export default {data() {return {title: 'Hello',msg:''}},onLoad() {},methods: {setMsg(){var that = thisthat.msg = '点击了'//发送消息给小程序(只有在小程序页面销毁、后退、分享时才会接收到该消息)//that.wx.jweixin.miniProgram.postMessage({data:'来自h5的消息'})//告诉小程序跳转小程序指定路径(没什么限制，执行小程序直接接收通信跳转指定小程序页面)that.wx.jweixin.miniProgram.navigateTo({url:'../index1/index1?data='+'ok'})//}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>

完事以后编辑成发布版，部署上线。

然后小程序使用web-view组件内联该上线地址（小程序项目的index.vue）

<template><view class="content"><web-view src="http://h5.com" @message="setMsg"></web-view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},onShareAppMessage() {return{}},methods: {setMsg(e){console.log(e)}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>

我们打开小程序进行测试：

接下来该页面只需要接收参数直接onload调支付就好了！

支付成功回调的事就看业务去处理，可以说返回上一页携带参数修改web-view组件src地址到H5的支付后页面完成整个支付流程。

虽然这个方案很别扭，但是确实能降低成本和周期。

当然该方法适合的不单单是支付，比如小程序内联H5 需要实现小程序的一些功能，必然需要H5与小程序通信，以下是我总结的方案。

小程序通信H5：通过web-view组件src地址携带参数。

H5通信小程序：通过上述发送跳转小程序页面命令携带参数。

关于H5判断是在微信内打开还是内联小程序中打开判断（处理各自的支付流程业务）

             var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger") {//ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）that.wx.jweixin.miniProgram.getEnv((res)=>{   if (res.miniprogram) {//在微信内，在小程序内。console.log(1)console.log("小程序的支付业务")that.wx.jweixin.miniProgram.navigateTo({url:'../index1/index1?data='+'ok'})return}else{//在微信内，不在小程序内。console.log(2)console.log("微信H5的支付业务")return}})}else{//不在微信内。console.log(3)console.log("微信以外的业务")return}

这样的话微信H5应用就走自己原来的支付业务，小程序内联这个H5就走这个特殊的支付业务，微信以外的走以外的业务啦！

希望能帮助大家避免深坑。

点个关注不迷路~

uniapp微信小程序外壳内联H5实现支付相关推荐

实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
微信小程序webview内嵌h5页面
微信官方文档web-view | 微信开放文档正式上线前准备(前期开发调试可以忽略) 首先登录小程序管理后台,把 web-view 直连的 h5 页面地添加到配置域名白名单中比如我想要小程序直连地 ...
uni-app微信小程序跳转外部H5链接
可以先看一下官网链接web-view 这里可以看到web-view组件默认铺满全屏,这里新建了一个页面,只用于存放web-view,用于展示外部链接. 1.新建页面showhfive作为web-vie ...
uniapp微信小程序服务器与行内img src图片路径拼接
uniapp微信小程序服务器与行内img src图片路径拼接 1.在main.js 在行内直接引入运行就可以连接到服务器的图片了
uni-app 微信小程序支付/公众号支付/h5支付宝/h5微信/支付宝app支付/微信app支付
思路: 先判断是app/h5/微信小程序如果是h5,判断是微信内打开还是微信外 app.vue onLaunch: function() {uni.setStorageSync('h5Type', ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...

uniapp微信小程序外壳内联H5实现支付

uniapp微信小程序外壳内联H5实现支付相关推荐

最新文章

热门文章