Shulou(Shulou.com)06/01 Report--

This article mainly explains how to develop Weixin Pay function by Weixin Mini Programs. Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "How to Develop Weixin Pay Function in Weixin Mini Programs"!

Step 1: The user requests the developer background to initiate an order request.

Call wx.checkSession() on the Mini programs side before initiating the request to see if the session_key expires

If it expires, call wx.login() again and return session_key and openid

If not, proceed to the next step and request developer background

Step 2: The developer looks up whether there is openid and session_key in the database or cache.

If there is a generated order number out_trade_no

If no error message is returned, openid and session_key are missing.

Step 3: The developer server requests a unified order API with the required parameters:

appidmch_idnonce_strsignbodyout_trade_nototal_feespbill_create_ip

nonce_str Gets a random string:

test.js

js

/* * Function: Return 32-bit random string * create by tiankai on 2018-06-25 15:39 */getNonceStr(){ let char = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; let len = 32; let result = ''; for(let i = 0; i

< len; i++){ let randomNum = Math.floor(Math.random()*char.length); result += char[randomNum]; } return result;} sign 参数签名, 第二个tab（js）是调用函数的方法, key 为商户平台设置的密钥 key test.js js js /* * 功能：sign 参数签名 * create by tiankai on 2018-06-26 12:00 */async makeSign(params, key){ // 生成签名 sign let strOrderArr = Object.keys(params).sort(); let stringA = ""; strOrderArr.map(val =>

{ //如果参数值为空，或者验证返回的 sign 不参与签名 if( think.isNullOrUndefined(params[val]) || val === 'sign' || params[val].length === 0 ) return; stringA += val + "=" + params[val] + "&"; }); let stringSignTemp = stringA + "key=" + key; let sign = think.md5(stringSignTemp).toUpperCase(); return sign;}

得到这几个参数就开始发起请求统一下单 API 了，这里需要注意的是，请求参数应该以 xml 的形式传送过去，这里借助一个工具 xml2js 把对象转换为 xml,也可以把 xml 转换为 对象、json。

安装 xml2js

npm i xml2js

使用 xml2js

test.js

js

const xml2js = require('xml2js');//xml->json//xml2js默认会把子子节点的值变为一个数组, explicitArray设置为falsevar xmlParser = new xml2js.Parser({explicitArray : false, ignoreAttrs : true})//json->xmlvar jsonBuilder = new xml2js.Builder();

请求参数转换为 xml

test.js

js

/* * 功能：获取统一下单 API 请求XML参数 * create by tiankai on 2018-06-25 15:23 */async getUnifiedOrderParams(){ let signString = { appid: config.appid, mch_id: config.mchid, nonce_str: await this.getNonceStr(), body: '短信平台-短信套餐购买', out_trade_no: '20180926125346',//订单号 total_fee: 88,//订单金额 //APP和网页支付提交用户端ip，Native支付填调用微信支付API的机器IP //需要自行获取，这里只是为了测试直接写上了 spbill_create_ip: '123.12.12.123', notify_url: config.notify_url, trade_type: 'JSAPI', openid: await think.cache('openId') } let sign = await this.makeSign(signString,config.key); signString.sign = sign; /* console.log("--------------------------"); * console.log(sign); * console.log("--------------------------"); */ let xml = await jsonBuilder.buildObject(signString); /* console.log(xml); */ return xml;}

然后就可以发起统一下单API请求了

test.js

js

/* * 功能：调用统一下单API接口 * create by tiankai on 2018-06-26 11:01 */async unifiedOrder(){ let xmlParams = await this.getUnifiedOrderParams(); let unifiedOrderUrl = config.unifiedOrderUrl; let opt = { method: "POST", mode: 'cors', headers: { 'content-type': 'text/xml' }, body: xmlParams } let res = await this.fetch(unifiedOrderUrl, opt); //这里微信返回的也是 xml let result = await res.text(); let data = null; // 微信返回的 XML 转换为 JSON xmlParser.parseString(result,function(err, jsonData){ if(!err){ /* console.log(jsonData); */ data = jsonData; } }); return data;}

第四步：当请求成功时 判断一下 return_code 和 result_code

如果它们都等于 SUCCESS 的时候，微信会把我们需要的预支付订单信息 prepay_id 返回来，

否则返回 return_msg 给前端 展示具体错误

第五步：拿上 prepay_id ,进行再次签名，然后返回给前端

test.js

js

/* * 功能：统一下单接口返回 prepay_id 再次签名 返回给前端 * create by tiankai on 2018-06-26 15:45 */async payParams(){ let signString = { appid: config.appid, timeStamp: +new Date(), nonce_str: await this.getNonceStr(), package: null, signType: 'MD5' } //调用 统一下单 API let jsonData = await this.unifiedOrder(); if(think.isNullOrUndefined(jsonData) && jsonData.xml.return_code === 'SUCCESS' && jsonData.xml.result_code === 'SUCCESS' ){ signString.package = 'perpay_id='+jsonData.xml.perpay_id }else{ return jsonData.xml.return_msg; } //进行再次签名 let paySign = await this.makeSign(signString,config.key); signString.paySign = paySign; let { appid, signType, ...result } = signString; // result 中不包括 appid 和 signType 返回给前端 return result;}

第六步：用户确认支付后，小程序端调用支付接口，根据返回结果提示用户

test.js

js

wx.requestPayment({ 'timeStamp': '', 'nonceStr': '',//后端返回的随机字符串 'package': '',//后端返回的 'signType': 'MD5', 'paySign': '',//后端返回的 'success':function(res){ }, 'fail':function(res){ }});

第七步：支付成功后，微信服务器会把支付结果返回给配置的 notify_url ，开发者根据支付结果，更新服务器的订单状态。

到此，相信大家对"微信小程序如何开发微信支付功能"有了更深的了解，不妨来实际操作一番吧!这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.