需求说明
这个需求说明是完全没有必要的，但是还是写一下吧，但凡是做公众号的，一般都是需要了解这个微信支付的，不然基本的业务都没办法走，所以今天简单的记录一下微信支付的一些问题以及流程是怎么样的。记录的是jsapi支付，别的支付方式暂时没有记录，也就是拉起来付款界面的支付。
微信支付产品
https://pay.weixin.qq.com/static/product/product_index.shtml#payment_product
微信开发步骤
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3
这里简单的说一下，我们打开这哥链接以后其实是官方截图的配置，有一个支付配置和设置授权域名
首先是支付配置：最简单的办法是我们打开需要支付的公众号，右上角有三个点，直接复制url，这个url就是这里需要配置的url
至于下面的授权域名，我自己当时是没有进行配置的，这里可能是我疏忽了，但是我没有配置也没有影响我使用，所以这里我不确定要不要配置。
支付接口
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
function onBridgeReady(){
WeixinJSBridge.invoke(
\'getBrandWCPayRequest\', {
\"appId\":\"wx2421b1c4370ec43b\", //公众号名称，由商户传入
\"timeStamp\":\"1395712654\", //时间戳，自1970年以来的秒数
\"nonceStr\":\"e61463f8efa94090b1f366cccfbbb444\", //随机串
\"package\":\"prepay_id=u802345jgfjsdfgsdg888\",
\"signType\":\"MD5\", //微信签名方式：
\"paySign\":\"70EA570631E4BB79628FBCA90534C63FF7FADD89\" //微信签名
},
function(res){
if(res.err_msg == \"get_brand_wcpay_request:ok\" ){
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
}
});
}
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{
onBridgeReady();
}
这段是官方的源码，我们是可以直接拿来使用的，这里主要是展示一下腾讯的签名是怎么生成的：
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
上面的五个参数其实appid是我们可以拿到的，时间戳是我们直接可以生成的，注意这里是秒数，不是毫秒，随机串这个可以直接自己写一个函数，生成一个32位以内的随机数，prepay_id这是后端提供接口，返回一个预付id，signType是md5加密，无可争议的，最后一个是签名，签名的规则是：
参数名ASCII码从小到大排序（字典序）；
如果参数的值为空不参与签名；
参数名区分大小写；
验证调用返回或微信主动通知签名时，传送的sign参数不参与签名，将生成的签名与该sign值作校验。
微信接口可能增加字段，验证签名时必须支持增加的扩展字段
这个就比较有意思了，我做的时候直接用后端生成好的签名进行的，但是理论上我前端也是可以生成的，但是我失败了，可能是我顺序的问题或者是别的什么问题吧，这个不得而知了。
看源码
废话不说了，既然是记录，就直接贴源码：
步骤很简单：
根据js拿到code
根据code获取openid
根据openid获取到预付id
根据预付id加上一些必要参数拉起支付
判断支付的成功与否进行相应的操作
/**
* @_fun_jsapi 拉起微信付款的界面
*/
_fun_jsapi(order_no) {
let that = this
let openid = sessionStorage.getItem(\'openid\')
if (openid && that.timestamp && that.nonceStr) {
request({
method: \'post\',
url: Constants.host_jsapi + api.jsapi,
data: {
out_trade_no: order_no, //商家订单号
total_fee: that.account_price * 100,
product_id: \'8501\', //所含产品id
body: \'微信公众号订房-颐陆科技\', //订单简述 128字符（中文32位）
detail: \'\', //订单详情 60000字符 （中文1500位）
fee_type: \'\', //币种 缺省值CNY
attach: \'\', //用户附加字串，原样返回
limit_pay: \'\', //限制字串 例：no_credit 不收信用卡
goods_tag: \'\', //订单优惠标记
openid: openid, //仅在jsapi中会使用
}
}).then((res) => {
//alert(JSON.stringify(res))
if (res.data.result_code === \'SUCCESS\') {
that.prepay_id = res.data.prepay_id
that.timestamp = res.data.time_stamp
that.nonceStr = res.data.nonce_str
that.paySign = res.data.pay_sign
that.onBridgeReady()
} else {
instance(\'error\')
}
}).catch((err) => {
instance(err);
//alert(err);
})
//instance(sessionStorage.getItem(\'openid\'));
} else {
instance(\'参数获取失败\')
}
},
/**
* @onBridgeReady
*/
onBridgeReady() {
let that = this
WeixinJSBridge.invoke(
\'getBrandWCPayRequest\', {
\"appId\": \"wx7eb8183de8a1311b\", //公众号名称，由商户传入
\"timeStamp\": that.timestamp + \"\", //时间戳，自1970年以来的秒数
\"nonceStr\": that.nonceStr, //随机串
\"package\": \"prepay_id=\" + that.prepay_id, //预定单id
\"signType\": \"MD5\", //微信签名方式：
\"paySign\": that.paySign//微信签名
},
function (res) {
if (res.err_msg == \"get_brand_wcpay_request:ok\") {
//instance(\'支付成功\')
that.$router.push({path: \'/Pay_success\'})
} else if (res.err_msg == \"get_brand_wcpay_request:ok\") {
//that.$router.push({path:\'/Pay_success\'}) 取消支付
instance(\'取消支付\')
} else {
//instance(\'支付失败\')
}
})
},
需要注意的是：微信支付的金额是分为单位的，也就是我们正常的钱需要进行*100的操作
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
暂无评论内容