微信小程序支付-云函数实现案例

先看下支付成功的页面截图：

开通微信支付需要有营业执照、微信商户号、微信小程序的appid（已经认证通过）、然后在接入微信支付即可。（https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2Findex.php%2Fcore%2Fhome%2Fheader%3Fmenu%3D32103）。

第一步：在微信公共平台那里开通云函数。进入微信公众平台，点击右上角的头像按钮，选择左侧选项栏中的"云开发"按钮。（这里如何提示请绑定手机号的话，需要进入成员管理->管理员修改->更新管理员信息->绑定管理员手机号），这里创建云函数默认是免费版的，也可以选择付费的。

在微信开发者工具，创建微信小程序的时候选择"小程序-云函数"选项，这里需要填入自己真实的appid，创建之后进入到小程序是如下图所示的界面。

（注意：用户点击云开发图标时，有可能会出现一个错误提示信息，告知你无法创建云函数，报错信息如下，错误信息是“暂不支持快速创建的小程序”，这时我们需要去微信公共平台去开通云函数的功能，也就是在上面）

第二步：在cmd窗口中安装NodeJs，官网路径（http://nodejs.cn/download/），选择一个合适的版本下载即可。安装完成之后打开cmd命令行窗口，输入命令 npm -v 命令，显示对应的版本号，就证明安装成功。这个文件安装的位置没有要求，哪一个盘都行。

打开cmd面板，找到你创建小程序的路径下面的login文件夹，如下图所示：

复制路径，到cmd窗口当中，如下图所示：

然后在次输入命令，npm install --save wx-server-sdk@latest，回车即可，安装到login目录下。安装最新的。

第三步：然后打开微信开发者工具，鼠标点击cloudfunction文件夹，右键选择"新建Node.js云函数”选项，输入文件夹名称为pay，然后点击确定即可。

打开app.js文件，将env属性的值设置为自己创建云函数的环境id（在云开发控制台的设置那里，可以查看到自己的云函数的环境id）。

打开cmd控制面板，找到自己最新创建的pay文件夹，复制路径，进入到pay文件夹里面。这个安装也可以在微信开发者工具中，点击文件夹，右键选择在内部终端中打开，然后输入安装命令即可。这个和在cmd窗口下安装的过程和结果是相同的。我这里如下图所示：
然后在输入命令npm i tenpay@latest 命令，安装完成之后，输入命令 node -v 若出现版本提示信息，则证明安装成功。安装成功之后，在pay文件夹下面将会多出来一个node_modules文件夹，这里面就是刚才安装的文件。

第四步：将login文件夹上传到云函数当中。这里如果出现没有下载wx-****-sdk依赖的话，去看第三步，上传成功之后，会有一个绿色的对勾，打开云开发控制台，将会看到我们上传的函数。

这里也需要将cloudfunction文件夹下面的pay文件夹上传到我们的云函数里面，这里必须要有两个函数login和pay（如果修改了login或者pay文件夹里面的文件内容，则需要再次右键点击上传并部署到云函数当中）。

这个代码是cloudfunction文件夹下的pay文件夹下的index.js的代码。

//云开发实现支付
const cloud = require('wx-server-sdk')
cloud.init()//1，引入支付的三方依赖
const tenpay = require('tenpay');
//2，配置支付信息
const config = {appid: '你的小程序appid', mchid: '你的微信商户号',partnerKey: '微信支付安全密钥', notify_url: '支付回调网址,这里可以先随意填一个网址', spbill_create_ip: '127.0.0.1' //这里填这个就可以
};exports.main = async(event, context) => {const wxContext = cloud.getWXContext()let {orderid,money} = event;//3，初始化支付const api = tenpay.init(config);let result = await api.getPayParams({out_trade_no: orderid,body: '商品简单描述',total_fee: money, //订单金额(分),openid: wxContext.OPENID //付款用户的openid});return result;
}

第五步：在pages文件夹下面创建一个pay页面。

pay.js代码如下：

// pages/pay/pay.js
Page({//提交订单formSubmit: function(e) {let that = this;let formData = e.detail.valueconsole.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)}})}
})

pay.wxml代码如下：

<form bindsubmit="formSubmit" bindreset="formReset">
<!-- 编写一个订单号 --><input name="orderid" placeholder="编写一个订单号" />
<!-- 订单总价，单位是（分） --><input name="money" placeholder="随便写一个点单总价" /><button form-type="submit" type="primary">提交订单</button>
</form>

在左边的页面上输入订单编号（这里的订单编号是大于6位），金额的单位是分。
点击提交订单按钮，微信开发者工具控制台下面将会出现一堆微信支付所必须的支付信息。

微信小程序支付-云函数实现案例相关推荐

微信小程序使用云函数进行mysql操作
微信小程序使用云函数进行mysql操作其他操纵数据库方式的一些问题准备工作云函数代码调用云函数时候的代码最后还需要注意的一些小事情: 其他操纵数据库方式的一些问题现在使用小程序,对数据库的 ...
uniapp实现微信小程序调用云函数及问题解决
uniapp实现微信小程序调用云函数及问题解决使用工具 HBuilder X 微信开发者工具实现步骤 1.在项目根目录下创建functions文件夹(此为wxcloudfunctions文件夹,可 ...
微信小程序调取云函数信息推送失败response out of time limit or subscription is canceled hint的具体解决方法
微信小程序调云函数信息推送失败,提示errcode":45015,"errmsg":"response out of time limit or subsc ...
微信小程序通过云函数进行微信支付
转自:http://www.wxapp-union.com/article-5407-1.html 微信小程序微信支付官方流程图链接我简化的流程:本地发起下单请求调用云函数并传送数据云函数处理数据并返 ...
【微信小程序】云函数使用excel-export导出excel
1.安装nodejs环境到官网下载安装包(node-v12.14.1-x64.msi),点击下一步一直安装到底 2.使用命令行模式进入小程序项目云函数文件夹,执行安装excel-export命令,安 ...
微信小程序通过云函数请求http网站接口
微信小程序正式版无法调用http类型的API接口,只有htttps类型才可以通过验证,可以利用云函数避免这一难点.下面我会给出一个小案例. 原文地址:www.920vip.net/article/70 ...
【微信小程序】云函数/云数据库 errMsg: parameter should be object instead of undefined
以下内容仅作为学习记录,请大佬轻喷. 学习近义词反义词微信小程序课程,在尝试"add_words_correlation"云函数时,云函数本地调试在这个错误上卡了好久. 一开始没有 ...
微信小程序使用云函数发送邮件
看完本文你将学到: 微信小程序云函数的部署与使用 nodemailer插件的使用背景故事: hello,大家好这里是小曹同学.上个星期因为原来开发学校课程表的学长毕业了课程表小程序不能用了. 在受了 ...
解决: 微信小程序调用云函数数据库一直失败的解决办法
今天跟着教程做一个新的Demo,死活都不能向云函数数据库添加数据,对照代码找了好久也没发现问题,看了很多帖子都不能解决,直到看到了快被云函数逼疯了这个帖子. 这是一个微信小程序开发的一个BUG,如果你 ...
微信小程序-使用云函数获取微信的openid
1.新建云函数login_get_openid 云开发环境初始化参见:https://blog.csdn.net/yuxiao1121/article/details/125222407 新建云函数参 ...

微信小程序支付-云函数实现案例

微信小程序支付-云函数实现案例相关推荐

最新文章

热门文章