微信小程序如何实现支付功能？看官方文档头疼（使用云函数的方式操作）
先来个效果图 ^_^
微信支付功能，个人公众号是没有办法进行开发支付功能的，需要是使用非个人公众号进行注册（如：营业执照等，可以去淘宝购买一个也行 大概500左右）
公众平台的配置可以参考文档，这里主要是微信官网注册非个体公众号的否需代码操作。（也就是和我们码农相关的操作了）
支付的整个流程：当然和官方的操作 稍有不同
1. 先将订单信息交给后台存储，储存状态是未支付；
2. 通过云函数调用统一下单接口，返回支付前的必备数据；
3. 通过统一下单的接口返回的数据，打开微信的支付界面（支付界面的成功回调函数，不用和后台打交道，由回调函数操作，原因下面会讲到）；
4. 用户输入完密码后，微信会将支付结果交给 回调地址 （该回调地址在统一下单接口中已经设置过了）；
5. 在回调地址中将数据提交给后台服务器，后台将订单的支付状态更改为已支付即可。
耐心看下面操作，基本上就是复制下面的代码（整个操作也就一会，基础再差也就40分钟搞定支付）^_^
1. 创建微信小程序
2. 在微信小程中序创建云函数
1). 根目录下创建一个名为 cloud 的文件夹用于存放所有的云函数；
2). 对了 cloud 文件夹右击，选择 新建一个Node.js 云 的选项，命名为 pay ；
3). 此时还需要在小程序根目录中的 project.config.json 文件中添加如下代码：
"cloudfunctionRoot": "cloud/",效果图图下：
4). 接着上传云函数（云函数每次修改都需要上传）
5). 在app.js文件中添加环境名称
App({onLaunch:function(){wx.cloud.init({env:"yicai-p6gne"})},...
...
...env参数——>是指定环境名称;
如何查看环境名称：
3. 开发工具中在 微信支付配置 选项中，添加商户号
4. 确保前面的操作没有问题后，我们开始编写云函数pay的代码
编辑pay云函数中的index.js文件：（将如下代码替换掉原本的代码）记住重新上传云函数
// 云函数代码
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})exports.main = async (event, context) => {const res = await cloud.cloudPay.unifiedOrder({"body": event.goodName, //商品名称 或 商品描述"outTradeNo": event.outTradeNoTo, //订单号"spbillCreateIp": "127.0.0.1", //回调地址"subMchId": "*********", // 微信支付商户号 "totalFee": event.totalFee, //商品支付金额 单位（分） 100代表一块钱"envId": "yicai-p6gne", //云开发环境ID"functionName": "pay_cb" //回调的云函数})return res
}效果图如下：
5. 那么这时候，我们就可以去通过调用云函数的方式 ，实现微信小程序的支付（流程是先获取支付需要的必备数据也就是通过pay这个云函数，然后在将获取的必备数据 通过使用 wx.requestPayment 实现支付 ）
js代码如下：（具体参数 根据自己的需求改动，注释很齐全都有说明）
//此处可以是点击事件paydata: function (e) {var that = this;var outTradeNo = ""; //订单号var jiaqian = 1; // 开发阶段先设置交易金额为0.01元// var jiaqian = parseInt(that.data.filesM * 100); //获取真实付款金额outTradeNo = Math.floor((Math.random() * 1000) + 1) + "1371" + new Date().getTime(); //生成订单号that.setData({outTradeNo: outTradeNo})//准备支付（先获取必要参数）wx.cloud.callFunction({name: 'pay', //调用微信得pay云函数data: {goodName: "农夫山泉", // 商品名称 或 商品描述totalFee: jiaqian, // 需要支付的金额outTradeNoTo: outTradeNo // 生成的订单号},success: res => {console.log("获取字符参数成功", res); // 此处是通过pay微信云函数，有微信给我们生成支付前的必要参数const payment = res.result.payment // 微信会返回支付需要的必备数据wx.hideLoading()//调起支付（获取必要参数后，开始真实调用微信支付窗口）wx.requestPayment({...payment,success(res) { //如果支付成功了，进入success函数回调（成功后具体操作看实际业务需求）console.log('支付成功', res)wx.showLoading({title: "付款成功"})setTimeout(function () {wx.hideLoading()that.upload(e); //将用户购买的数据 交给 后台}, 700)},fail(res) {console.error('支付失败', res)wx.showLoading({title: "支付失败"})setTimeout(function () {wx.hideLoading()}, 1600)}})},fail(res) {console.log("获取支付参数失败", res);}})},js代码效果图：
注意在微信小程序开发工具中调起支付的界面如下：
注意在真实手机的小程序中进行支付的效果图如下：
但是还没有结束？？？？
这种情况基本上可以使用，但是如何用户在手机上支付的时候，由于使用wx.requestPayment 的方法打开支付界面，需要用户手动点击确认按钮才会进入success 回调函数，如下图
只有用户点击完成的时候才会触发 wx.requestPayment 的成功回调函数，解决方法如下
上面是官网提供的流程图，（云函数的代码其实就是放在服务器上的代码）
在图中的最后一步，微信会将用户支付的信息回调给商户系统也就是回调给自己的后台服务器（而此时的微信回调事件是在用户输入完密码付款成功后，不需要用户点击完成按钮）。
也就是说我们在实际开发的时候 wx.requestPayment 的成功回调函数，我们基本不需要做任何和服务器有关的操作，微信服务器会监听到支付的结果给我们的回调云函数。所以特别注意 我们需要在支付前将订单信息提交给后台，进行存储到数据库，由微信回调地址到云函数，云函数再将数据交给后台。
所以在云函数 pay 中有一个参数是回调函数，
所以我们需要创建对应的回调函数，
我们可以在云函数中等待微信给我们的回调数据，数据中有包含支付的结果信息。在下图代码11行中
此时我们要将响应的数据，获取订单号给后台，让后台更改数据库订单的状态为已支付状态即可。
但是此处需要安装node环境本机安装，需要使用nodejs发送get请求或者post请求 将订单号提交给后台，所以需要安装npm，上图的pay_modules文件夹，大家可以无视。
上图的16行即描述将订单号发送给服务器的地址
上述pay_cb云函数代码如下：
// 云函数入口文件
const rp = require('request-promise');
const cloud = require('wx-server-sdk')cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})// 云函数入口函数
exports.main = async (event, context) => {console.log('payment callback!', event)if(event.resultCode == 'SUCCESS'){ //根据result_code查看业务结果成功进行提交数据告诉服务器// const urlTmp = getApp().data.baseUrl ;const urlTmp = "http://yczb.canurcster.xyz"rp(urlTmp + '/home/supplier/notify?outTradeNo='+event.outTradeNo).then(function (e) {console.log("响应数据：" + e)})}}基本上已经完成了，但是记住回调函数里面 需要加上return返回值（就是告诉微信后台，再回调函数中已经确认了收到了）；如果不返回会造成DDS攻击。
支付结果回调的云函数必须返回如下一个对象，否则会视为回调不成功，云函数会收到重复的支付回调：
//更新云数据库数据
const res = {errcode:0,errmsg:''}//需要返回的字段，不返回该字段则一直回调
return res上述操作基本上就搞定的差不多了，可以根据自己的业务需求进行响应的操作，凡事都有第一次，只要肯磨基本上花点事件都可以搞出来，重点是下面这个图很重要 一定要看懂
微信官网支付API手册：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3
微信官方文档手册（可以进入上面的连接）：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html
微信小程序如何实现支付功能？看官方文档头疼（使用云函数的方式操作）相关推荐
- 微信小程序怎么开通支付功能？
对于一些想通过小程序卖货的企业商家来说,在申请小程序后需要同时开通微信支付功能,才能在小程序上进行交易.那么关于微信小程序怎么开通支付功能,下面给大家说一说. 一.注册非个人主体的小程序账号 不管你是 ...
- 微信小程序如何开通支付功能？
微信小程序商城支付方式有哪些,如何开通小程序商城的支付功能,商家开通小程序支付功能的条件有哪些,小程序支付和微商城支付有冲突吗,小程序商城支付方式下商家如何提现,手续费多少? 微信小程序商城支付方式 ...
- 让你的微信小程序具有在线支付功能
最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...
- 微信小程序怎么实现拍照功能，以及授权，拍完照保存到本地。
写微信小程序就是要不停的翻阅官方文档查阅所需要的需求. API的使用说明 wx.getSetting 获取用户的当前设置.返回值中只会出现小程序已经向用户请求过的权限 scope.camera相机 w ...
- 微信小程序开发笔记 支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录 一.前言 二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权 三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署 四.小程序调用 4. ...
- 微信小程序：小程序申请开通支付功能的步骤
随着微信小程序越来越受欢迎,微信小程序的开发越来越火,尤其是初创型公司需要开发自己的小程序,就需要知道微信小程序开发的一套流程,而且商家在运营小程序的时候开通支付功能是必然选项,本章博文就来讲一下微信 ...
- 微信小程序开发多少钱 怎么看价格成本
按照功能来看,很多人还是感觉app功能会比较全面,但是小程序的功能也逐渐完善,就开发和维护成本来看,也是小程序受欢迎的原因之一.有些不可替代的事实不得不承认,APP游戏是小程序"玩" ...
- nodejs android 推送,利用Nodejs怎么实现一个微信小程序消息推送功能
利用Nodejs怎么实现一个微信小程序消息推送功能 发布时间:2021-01-20 13:55:29 来源:亿速云 阅读:92 作者:Leah 今天就跟大家聊聊有关利用Nodejs怎么实现一个微信小程 ...
- 如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...
最新文章
- 对比直立车模控制中的互补滤波、Karlman滤波和参考滤波方案
- css学习笔记3--灵活的背景定位
- java中substring的用法
- DNS服务器不能响应的四大解决办法
- SpringBoot应用和PostgreSQL数据库部署到Kubernetes上的一个例子
- 非常好的在网页中显示pdf的方法
- oracle快速排序法,经典算法系列之快速排序算法
- c#日期转换周几_RPA经验：使用 selector 选择日期
- canvas中window坐标转换为canvas坐标
- 企业文化：谦虚（谦逊，虚心）
- 前端埋点方法解析及优缺点分析
- 蓝桥杯2019年第十届C/C++国赛B组 题B-质数拆分（素数筛选+01背包问题）
- 华为鸿蒙 os 适配机型曝光,华为鸿蒙OS 2.0首批适配机型曝光
- ftp 相关知识集合
- 浏览器插件及好用的小工具
- php在线拍照代码,PHP+Javascript实现在线拍照功能实例
- 选择与循环:剪刀石头布_剪刀石头布十大奢侈家具，创造高端精致生活就是这么简单！...
- 单片机应用系统设计技术——LCD滚动显示汉字
- [Flask] [Python3] 第一个flask APP
- 第十一章 AWT编程