纯蔬果!责任编辑肉松云合作开发随心所欲同时实现强悍的小流程缴付机能!

编者按

后面给我们讲过怎样借助于小流程云合作开发同时实现QQ缴付,但此种合作Attichy相较繁杂,因此具备复杂性,给我们讲呵呵怎样借助于非官方缴付api单纯、高效地同时实现小流程缴付机能。

合作开发操作过程

狡蛛属,先看此栏设计图:

10行标识符同时实现小流程缴付机能!丨两栖作战插图

责任编辑内的缴付机能全然是借助于小流程云合作开发同时实现的,不必构筑他们的伺服器,不必买搜索引擎,不必登记搜索引擎,不必全力支持https。只须要两个单纯的云表达式,能随心所欲的同时实现QQ小流程缴付机能。核心理念标识符如下表所示图右图:

10行标识符同时实现小流程缴付机能!丨两栖作战插图1

一、创建两个云合作开发小流程

关于怎样创建云合作开发小流程,这里我不再做具体讲解。不知道怎么创建云合作开发小流程的同学,能去翻看腾讯云云合作开发公众号内菜单【技术交流-视频教程】中的教学视频。

创建云合作开发小流程有几点注意的:

1. 一定不要忘记在app.js里初始化云合作开发环境

10行标识符同时实现小流程缴付机能!丨两栖作战插图2

2. 创建完云表达式后,一定要记得上传

二、创建缴付的云表达式

创建云表达式pay

10行标识符同时实现小流程缴付机能!丨两栖作战插图3

10行标识符同时实现小流程缴付机能!丨两栖作战插图4

三、引入三方依赖tenpay

我们这里引入三方依赖的目的,是创建我们缴付时须要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于怎样安装node,我这里不做讲解,百度呵呵,网上一大堆。

1. 首先右键pay,然后选择在终端中打开

10行标识符同时实现小流程缴付机能!丨两栖作战插图5

2. 我们使用npm来安装这个依赖

在命令行里执行 npm i tenpay。

10行标识符同时实现小流程缴付机能!丨两栖作战插图610行标识符同时实现小流程缴付机能!丨两栖作战插图710行标识符同时实现小流程缴付机能!丨两栖作战插图8

安装完成后,我们的pay云表达式会多出两个package.json 文件。

10行标识符同时实现小流程缴付机能!丨两栖作战插图9

到这里我们的tenpay依赖安装好了。

四、编写云表达式pay

10行标识符同时实现小流程缴付机能!丨两栖作战插图10完整标识符如下表所示:

//云合作开发同时实现缴付

constcloud=require(wx-server-sdk)

cloud.init()

//1,引入缴付的三方依赖

consttenpay=require(tenpay);

//2,配置缴付信息

constconfig={

appid:你的小流程appid,

mchid:你的QQ商户号,

partnerKey:QQ缴付安全密钥,

notify_url:缴付回调网址,这里能先随意填两个网址,

spbill_create_ip:127.0.0.1//这里填这个能

};

exports.main=async(event,context)=>{

constwxContext=cloud.getWXContext()

let{

orderid,

money

}=event;

//3,初始化缴付

constapi=tenpay.init(config);

letresult=awaitapi.getPayParams({

out_trade_no:orderid,

body:商品单纯描述,

total_fee:money,//订单金额(分),

openid:wxContext.OPENID//付款用户的openid

});

returnresult;

}

一定要注意把appid,mchid,partnerKey换成你他们的。

到这里我们获取小流程缴付所需参数的云表达式标识符编写完成了。不要忘记上传这个云表达式。

10行标识符同时实现小流程缴付机能!丨两栖作战插图11出现下图代表上传成功。

10行标识符同时实现小流程缴付机能!丨两栖作战插图12

五、写两个单纯的页面,用来提交订单,调用pay云表达式

10行标识符同时实现小流程缴付机能!丨两栖作战插图13这个页面很单纯, 1、他们随便编写两个订单号(这个订单号要大于6位) 2、他们随便填写两个订单价(单位是分) 3、点击按钮,调用pay云表达式。获取缴付所需参数。

下图是非官方缴付api所须要的一些必须参数。

10行标识符同时实现小流程缴付机能!丨两栖作战插图14

下图是我们调用pay云表达式获取的参数,和上图所须要的是不是一样。

10行标识符同时实现小流程缴付机能!丨两栖作战插图15

六、调用wx.requestPayment同时实现缴付

下图是非官方的示例标识符:

10行标识符同时实现小流程缴付机能!丨两栖作战插图16这里不在做具体讲解了,把完整标识符给我们贴出来:

// pages/pay/pay.js

Page({

//提交订单

formSubmit:function(e){

letthat=this;

letformData=e.detail.value

console.log(form发生了submit事件,携带数据为:,formData)

wx.cloud.callFunction({

name:“pay”,

data:{

orderid:“”+formData.orderid,

money:formData.money

},

success(res){

console.log(“提交成功”,res.result)

that.pay(res.result)

},

fail(res){

console.log(“提交失败”,res)

}

})

},

//同时实现小流程缴付

pay(payData){

//非官方标准的缴付方法

wx.requestPayment({

timeStamp:payData.timeStamp,

nonceStr:payData.nonceStr,

package:payData.package,//统呵呵单接口返回的 prepay_id 格式如:prepay_id=***

signType:MD5,

paySign:payData.paySign,//签名

success(res){

console.log(“缴付成功”,res)

},

fail(res){

console.log(“缴付失败”,res)

},

complete(res){

console.log(“缴付完成”,res)

}

})

}

})

到这里,云合作开发同时实现小流程缴付的机能完整同时实现了。

七、同时实现效果

1. 调起缴付键盘

10行标识符同时实现小流程缴付机能!丨两栖作战插图17

2. 缴付完成

10行标识符同时实现小流程缴付机能!丨两栖作战插图18

3. log日志,能看出不同缴付状态的回调

10行标识符同时实现小流程缴付机能!丨两栖作战插图19上图是缴付成功的回调,我们能在缴付成功回调时,改变订单缴付状态。

下图是缴付失败的回调。

10行标识符同时实现小流程缴付机能!丨两栖作战插图20

下图是缴付完成的状态。

10行标识符同时实现小流程缴付机能!丨两栖作战插图21

到这里我们随心所欲的同时实现了QQ小流程的缴付机能了。是不是很单纯啊。如果感觉图文不是很好理解,我后面会录制视频讲解。

八、源码地址

责任编辑及更多云合作开发两栖作战案例能点击文末左下角【阅读原文】获取源码。

果你导入源码或者学习操作过程中有任何问题,都能在下方留言。

— — — — End — — — —

欢迎分享云合作开发两栖作战经验与技术故事~

10行标识符同时实现小流程缴付机能!丨两栖作战插图22

云合作开发

Tencent CloudBase

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: