puls.payment支付

先是介绍下什么是HBuilder

为什么要介绍呢，因为可能以前用过了，然后忘记了，甚至哪里安装包下载也不知道。

使用HBuilder安装App，可以看下文档，我这边是用5+，也就是打包的时候添加一个plus对象而已，什么都不用做，只是这个注册需要时间，监听下就可以，然后就可以使用了。

我看了蛮多文档，写的乱七八糟，本来就很简单的东西。

而5+的安装，可以目录工程获取（其实就是新增一个manifest.json文件）。

介绍完成，开始安装

从上面的信息可以得出，我们先需要这个安装包。
因为manifest.json文件我们可以生成也可以填写，但是打包就麻烦了。里面打包分云打包和本地打包。（本地打包相对安全点）

下载http://www.dcloud.io/进入官网，然后

点击HBuilderX，然后就可以了。

安装完成之后，就可以开启项目了。
这样新建一个空工程。

（里面会有一个manifest.json可以指定html文件。如果是SPA应用请取打包后文件，修改开始位置就好了）

---

然后会有manifest.json文件，点击这个文件，会有可视化填写区域，钩上支付就可以了。

支付有微信等，其中支付宝不需要appid，而微信需要appid。（对此我不是很懂，为什么需要appid？？？，后期写入不就可以了么，非要一开始就写。）

---

安装需要什么呢，先获取支付通道。

什么是支付通道？ 文档没讲，说的是支付通道。

我们主观上可以猜出，这个是支付安装状态列表，用来判断支不支持xx支付。

好吧，猜对了。

获取支付通道

void plus.payment.getChannels(successCB, errorCB);

看下cb是啥。
就是列表，对了，列表长什么？ 文档没讲，估计是让你去试。好吧，这是我打印的结果：

[
{"id":"alipay","description":"支付宝","serviceReady":true},
{"id":"wxpay","description":"微信","serviceReady":true}
]

看到这里就明白了，哦，😯原来是这么一回事啊，就这么简单。

serviceReady核心，看是否支持支付方式。

然后发起支付就OJBK了。

在吊起之前，我们需要判断是否找到对应的支付。
比如我这样写

let c = channels.find(e => e.id === 'alipay') || {serviceReady: false}

然后判断 c.serviceReady不成立就是不支持了

支付吊起方式

void plus.payment.request(channel, statement, successCB, errorCB);

第一个呢，就是支付通道，第二个就是对应的内容（里面是any类型，具体看业务和方式了，也就是后台配合的数据了。【可以string，也可以obj】）

看到这里也知道为什么第一个参数需要支付通道了，因为它要去里面取id字段，判断是哪个支付。

--OK--

执行支付

这时候放弃支付，或者支付成功都可以监听到的。在回调里面哦。

---

最后放上不包含业务逻辑的代码

window.plus.payment.getChannels((channels) => {
              try {
                    let c = channels.find(e => e.id === 'alipay') || {serviceReady: false}
                    if(!c.serviceReady){
                        console.log('未安装支付宝')
                        return
                    }
                    window.plus.payment.request(c, payData, () => {
                        alert("支付操作成功！")
                    }, function(e){
                        alert("支付失败："+e.message)
                    } )   
                } catch (error) {
                    console.log('异常')
                    console.log(error)
                }
            }, function(e){
                alert("获取支付通道列表失败："+e.message)
            })

---

好了，祝你生活愉快，再见👋。

Tip：
如果出现无反应，很有可能是哪个报错了， 写个try监听下

---

附上原文路径，遇到问题直接看官方文档。

http://www.html5plus.org/doc/zh_cn/payment.html#plus.payment.ChannelsSuccessCallback

--END--