在微信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代码：
<!--index.wxml-->
<official-account></official-account>
<web-view src="{{bg_url}}"></web-view>pay是H5链接支付时跳转到的小程序支付页面
---pay.js代码：
let order_id=0,amount=0,quotation_id=0,api_token=0;
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
order_id=options.order_id;
amount=options.amount;
quotation_id=options.quotation_id;
api_token=options.api_token;
this.submitInfo();
},
submitInfo(){
wx.showLoading({
title: '微信支付...',
mask: true
});
wx.request({
url: 'https://localhost/api/order/pay_request',
data: {
type:1,
pay_mode:3,
order_id: order_id,
amount:amount,
quotation_id:quotation_id,
api_token:api_token,
openid:app.globalData.openid
},
success: function (res) {
wx.hideLoading();
if (res.data.ret == "200") {
let mydata = res.data.data.data;
wx.requestPayment(
{
'timeStamp': mydata.timeStamp,
'nonceStr': mydata.nonceStr,
'package': mydata.package,
'signType': mydata.signType,
'paySign': mydata.paySign,
'success': function (e) { //支付成功
wx.showToast({
title: '支付成功',
icon: 'success',
duration: 1200,
mask: true,
success: function ()
{
setTimeout(function () {
wx.navigateBack();
}, 1500);
}
});
},
'fail': function (e) { //支付取消或出错
// wx.navigateBack();
}
})
}
else {
wx.showToast({
title: '该订单已失效',
icon: 'success',
duration: 3000,
mask: true,
success: function () {
setTimeout(function () {
wx.navigateBack();
}, 1500);
}
})
}
}
});
}
})
---pay.wxml代码
<view class='body'>
<form bindsubmit="submitInfo" report-submit='true'>
<view class='body-view'><text >微信小程序支付</text></view>
<view class="btn-area">
<button type="primary" form-type="submit">确认支付</button>
</view>
</form>
</view>
