微信H5页面实现微信小程序支付

2023-12-29 23:48| 来源: 网络整理| 查看: 265

背景：

在微信H5页面已经实现了微信JSAPI的网页支付，老板要求把整个业务线快速转移到微信小程序中，作为懒惰的程序员来说，直接把页面嵌套到小程序不就行了。说干就干，在小程序中设置好基本信息后，一预览居然成功了，一切看来是那么顺利，可到了系统的支付环节时，小程序是无法调用JSAPI微信支付的，难不成要重构所有页面转成小程序？这可是个大工程，作为业余前端的我来说肯定搞不定。于是在网上就搜索了一下，确实有解决方案，楼主就花点时间给大家整理一下。

前提条件：

了解微信支付相关的接口文档，有微信小程序的基本开发经验。

思路：

小程序打开H5页面后，在需要调用微信支付的页面用js做当前页面环境判断：

var is_weixin_app = window.__wxjs_environment === 'miniprogram';

如果是在小程序中打开，则通过wx.miniProgram.navigateTo 方法跳转到小程序的内置页面：

if(is_weixin_app){ wx.miniProgram.navigateTo({url:'/pages/pay/pay?api_token='+api_token+'&order_id='+order_id+'&amount='+order_amount}); }

在小程序内置页面pay中获取传过来的参数，做业务处理，然后调用小程序的支付接口，获取小程序需要的关键支付参数(该方法可参考微信支付对接文档：小程序支付开发指引)：

'timeStamp': mydata.timeStamp, 'nonceStr': mydata.nonceStr, 'package': mydata.package, 'signType': mydata.signType, 'paySign': mydata.paySign,

小程序支付需要的openid参数，这个openid和微信公众号的openid不是相同的，所以小程序内置app.js还需要获取小程序的openid（微信小程序无需授权可直接根据code获取openid，微信公开接口：https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code），并将openid存在全局变量中:

App({ onLaunch() { let that = this; wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://localhost/api/home/wxapp_openid', //接口地址 data: { code: res.code }, success: function (res){ that.globalData.openid = res.data.data.openid; } }) } } }) }, globalData: { userInfo: null, openid:'' } }) 小程序页面构造截图：

说明：index是小程序的首页，用来打开H5的链接

---index.js代码： Page({ data: { bg_url : "https://localhost" }, onLoad() { }, }) ---index.wxml代码：

【本文地址】

公司简介

联系我们