H5網(wǎng)頁在調(diào)用jsapi進(jìn)行支付的時候是沒有問題的升熊，但是當(dāng)網(wǎng)頁在小程序web-view打開就不能使用jsapi進(jìn)行支付了序臂，這時候就需要在小程序里面完成支付。
下面的例子使用的是跳轉(zhuǎn)支付頁面去支付奶镶。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<link rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<title>微信支付</title>
<style>
#container {
padding: 0 15px;
}
.page__title {
text-align: center;
padding: 20px 0;
color: gray;
font-size: 20px;
}
</style>
</head>
<body ontouchstart>
<script type="text/javascript">
wx.config({
debug: false,
appId: '@ViewBag.wx_appid',
timestamp: '@ViewBag.wx_timestamp',
nonceStr: '@ViewBag.wx_nonceStr',
signature: '@ViewBag.wx_signature',
jsApiList: [
'checkJsApi',
'closeWindow',
'scanQRCode',
'chooseWXPay'
]
});
function isInApplets(){
wx.miniProgram.getEnv(function (res) {//獲取當(dāng)前環(huán)境
if(res.miniprogram){ // true 在微信小程序中
return 1;
}else{// false 在微信公眾號里
return -1;
}
});
}
wx.ready(function () {
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
wx.miniProgram.getEnv(function (res) {//獲取當(dāng)前環(huán)境
if(res.miniprogram){ // true 在微信小程序中
console.log("在小程序中")
wxAppletsPay();
}else{// false 在微信公眾號里
onBridgeReady();
console.log("不在小程序中")
}
});
}
});
wx.error(function (res) {
// config信息驗(yàn)證失敗會執(zhí)行error函數(shù)胁孙，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯誤信息可以打開config的debug模式查看菜枷，也可以在返回的res參數(shù)中查看苍糠，對于SPA可以在這里更新簽名。
//alert("wx.error" + JSON.stringify(res));
});
function onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": "@ViewBag.orderInfo["appId"]", //公眾號名稱啤誊，由商戶傳入
"timeStamp": "@ViewBag.orderInfo["timeStamp"]", //時間戳岳瞭，自1970年以來的秒數(shù)
"nonceStr": "@ViewBag.orderInfo["nonceStr"]", //隨機(jī)串
"package": "@ViewBag.orderInfo["package"]",
"signType": "@ViewBag.orderInfo["signType"]", //微信簽名方式：
"paySign": "@ViewBag.orderInfo["paySign"]"http://微信簽名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
window.location = '@ViewBag.returnUrl';
}
}
);
}
//微信小程序支付
function wxAppletsPay(){
//點(diǎn)擊微信支付后，調(diào)取統(tǒng)一下單接口生成微信小程序支付需要的支付參數(shù)
var payParam = {
"appId": "@ViewBag.orderInfo["appId"]", //外刊小程序appid
"timeStamp": "@ViewBag.orderInfo["timeStamp"]", //時間戳蚊锹，自1970年以來的秒數(shù)
"nonceStr": "@ViewBag.orderInfo["nonceStr"]", //隨機(jī)串
"package": "@ViewBag.orderInfo["package"]",
"signType": "@ViewBag.orderInfo["signType"]", //微信簽名方式：
"paySign": "@ViewBag.orderInfo["paySign"]"http://微信簽名
};
//定義path 與小程序的支付頁面的路徑相對應(yīng)
var path = '/pages/pay/main?payParam=' + encodeURIComponent(JSON.stringify(payParam));
//通過JSSDK的api跳轉(zhuǎn)到指定的小程序頁面
wx.miniProgram.navigateTo({url: path});
}
$(function () {
//微信支付
$("#btn-open-wx-payment").on("click", function () {
try {
if(isInApplets()){// true 在微信小程序中
console.log("在小程序中")
wxAppletsPay();
}else{// false 在微信公眾號里
onBridgeReady();
console.log("不在小程序中")
}
} catch (e) {
console.error(e)
onBridgeReady();
console.log("不在小程序中")
}
});
$("#btn-goback").on("click", function () {
javascript: history.go(-1);
});
});
</script>
<div class="container" id="container">
<div class="page__hd">
<h1 class="page__title">使用微信付款</h1>
</div>
<div class="weui-panel weui-panel_access">
<div class="weui-panel__bd">
<a href="javascript:;" class="weui-btn weui-btn_primary" id="btn-open-wx-payment">打開微信支付</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="btn-goback">返回上一頁</a>
</div>
</div>
</div>
</body>
</html>
