微信小程序支付 （一、生成prepay_id） 2018-08-06

微信公众平台： 微信公众平台

https://mp.weixin.qq.com/

商户平台： 商户平台

https://pay.weixin.qq.com/index.php/core/home/login

开发手册 api 是： 

https://pay.weixin.qq.com/wiki/doc/api/index.html

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1

生成XML的测试接口： 测试接口

https://pay.weixin.qq.com/wiki/tools/signverify/

32位随机码生成器

1 配置参数， 一个都不能少（这仔扮些都是必填的，还有其他选填的参数，也可以随心情填写）

    appid        此小程序的唯一标识 例如：wxed9dxxx6d6cxxx9e

    body       迹侍 可以写商品描述 例如：我是商品描述,用户买了两个馒头

    mch_id    商户id 需在 商户平台  查看（申请商户平台成功就会得到） 如： 149411***2

    nonce_str    随机字符串（别带小数点（没考证 感觉）） 例如：76521019851170500000

    notify_url    成功后的通知地址 例如：https://baidu.top/callbackofpay

    openid        用户的唯一标识 在用户使用小程序的时候通过其 code 换取 openid 

                        例如： obxgc5CgBbgKDrvcxxxxxJ-xxxxx

    out_trade_no        商户订单号 例如：20180805740161 需要无重复

    spbill_create_ip    终端ip（服务器的ip）貌似 127.0.0.1 就行

    total_fee                此单的交易额度(钱 money) 例如：888 单位是 分钱。及8.88元钱 （ 注意是数值型，非字符型，除此之外其他的都是字符型 ）

    trade_type    小程序用 'JSAPI' 其他念州灶看api

2 将以上参数（必要参数一个不能少）按照 key 字典排序，进行拼接。

例如： appid=wxedxxx2xxx6c03e9e&body=我是商品描述,用户买了两个馒头.&mch_id=149411***2&nonce_str=76521019851170500000 ......

3 在结尾加上 商户的秘钥 mch_key （需在商户平台配置 在：账户中心-->账户设置-->API安全-->API秘钥 ，可以用 32位随机码生成器  生成）

    + "&key=" + mch_key

5 对拼接成的字符串，进行md5加密-->转大写 -->生成 签名 sign

    例如： 425F6561A654B366B5519F000CF2AE61

6 将以上参数拼成  xml

let _xmlUnifiedorder = `

            ${myObj.appid}

            ${myObj.body}

            ${myObj.mch_id}

            ${myObj.nonce_str}

            ${myObj.notify_url}

            ${myObj.openid}

            ${myObj.out_trade_no}

            ${myObj.spbill_create_ip}

            ${myObj.total_fee}

            ${myObj.trade_type}

            ${sign}

        `

7 携带参数 post 访问  https://api.mch.weixin.qq.com/pay/unifiedorder 接口

    如果正确 会成功得到 xml格式的  prepay_id ，如果签名错误进行下面的错误查找。

    ~~：进行错误查找  可以拿出参数在  测试接口  进行测试 ，无异常可以正常生成 xml之后，如果还报错。

    试着 更改 商户平台的秘钥 （详细请看第 3 步）。貌似很多人都踩这个雷了  ...

<code>

// 字典排序 key1=xxx&key2=zzz 拼接成字符串

function joinToStr(_obj) {

    let keyArr = []

    for (let key in _obj) {

        keyArr.push(key)

    }

    keyArr = keyArr.sort()

    console.log("keyArrSort--->", keyArr)

    //    paySign = MD5(appId=wxd678efh567hg6787&nonceStr=5K8264ILTKCH16CQ2502SI8ZNMTM67VS&package=prepay_id=wx2017033010242291fcfe0db70013231072&signType=MD5&timeStamp=1490840662&key=qazwsxedcrfvtgbyhnujmikolp111111) = 22D9B4E54AB1950F51E0649E8810ACD6

    // _str 是 paySign 中MD5 包裹的字符串部分

    let _str = ""

    let len = keyArr.length

    for (let i = 0i <leni++) {

        if (i == len - 1) {

            _str += (keyArr[i] + "=" + _obj[keyArr[i]])

        } else {

            _str += (keyArr[i] + "=" + _obj[keyArr[i]] + "&")

        }

    }

    return _str

}

</code>

本文内容是指的uni-app项目的支付，文档中5+ APP的项目类型不涉及。

虽然uni-app已经为我们封装好了一个统一的API，所以在uni-app中我们只需要调用uni.requestPayment即可。但是uni-app官方文档的散乱看起来也挺头疼的。这里我精简整个流程，并对自己开发时碰到问题做个总结。

需要注意的是，支付模块的开发不仅仅是需要客户端的开发，还需要服务端的开发。这里是在保证服务端的配置正确的前提下，对于前端uni-app的开发与配置指南。

这里有必要说明一下，申请微信支付流程对于初次申请者会感觉有些混乱，如果不困答森理清相应关系可能会在各种平台找来找去。

对于APP，要在微信开放平台（ https://open.weixin.qq.com ）注册申请账号。注这里公司使用需300元认证费。在应用详情中申请开通微信支付功能。

当审核都通过了，就可以获取到应用ID（APPID，即类似于个人ID一样，唯一标识）

有了以上基础，申请微信商户平台（ https://pay.weixin.qq.com ），注册申请账号。之后只需关联AppID，即可。

无需配置，只需保证微信小程序配置即可。

在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“微信支付”项

调用 [uni.requestPayment(OBJECT)]发起支付，OBJECT参数中provider属性值固定为 wxpay 、

这里 的timeStamp, nonceStr, package, signType, paySign是由后端与微信交互生成的，值得注意的是package，微信直传过来的值是packageValue。

这里是orderInfo，该属性值为订单对象。依然值得注意的是package，微信直传过来的值是packageValue。举纳

partnerid，微信传过来的是partnerId。

prepayid，微信传过来是prepayId。

noncestr，微信传过来的是nonceStr。

timestamp，微信传过来的是timeStamp。

这里一定一定要注意大小写，不然订单请求失败，让你找问题，找到痛不欲生。

至此，微信小程序已经可以正常支付了。而APP则需要打包才可以。uni-app有两种打包方式，一个是提交云端打包，一个是本地离线打包。这里说下离线打包的相关配置和问题。

关于离线打包我会单独出一篇，这里不在讲解。只进行微信支付相关配置讲解。

在uni-app官方提供的App离线SDK中有一个打包工程，如果想使用微信支付，就需要添加相应的依赖库以及资源，这点我就很怀念cocopods，方便太多了。

注意：SDK 中的

1.在URL Types 中添加配置： identifier 填写 weixin ，URL Schemes 填写 wx[后面是您在微信平台申请的appkey] ,如果没有该项按照图中的汪亩格式创建。注意 wx 这两个字母必须添加。

---