微信公众号借助小程序云函数实现支付功能

一、公众号联系云函数

微信开发文档上有实例，可直接复制粘贴，根据内容需要改改就可以了。

这里是实例文档地址：实例传送门

首先需要讲的是，实例流程：

1.微信开发文档前面有说如果公众号联系小程序云函数的话，首先需要配置公众号的后台，需要的配置有：微信公众号后台的 js 安全域名和网页授权地址，还要在微信开发者工具上配置云函数，小程序的云函数要环境共享给公众号。

文档上都有说到，再次不过多讲述，附上地址：

微信公众号地址：微信公众平台传送门

小程序的配置附上图片引导：

打开微信开发者工具，打开项目，点击云开发：

然后点击更多——环境共享：

第一次进来的话，是没有关联的公众号的，需要点击添加共享，输入相应的公众号信息，才能关联成功，成功之后就会像我这样的显示出关联的公众号信息：

到这里就算是配置完了，其他地方没想到的文档上会有。

2.复制实例后，前面的部分都是引入一些必要的 js 文件以及初始化 HTML 的结构。

3.接下来是需要改的地方，实例也标出来了，公众号的 appid 以及云函数资源方小程序的 appid 和云函数的云环境 id，还有什么样的授权方式，两个选一个，还有回调地址，这个回调地址一定要填上传的服务器地址全称，不是和公众号后台配置的 js 安全域名和网页授权地址一样的，公众号后台配置的那是域名，这个回调是地址全称。

下面是我的项目信息实例：

4.接下来就可以直接打开了，这要注意，如果在电脑上的浏览器打开，显示界面会是这样的：

点击登录后就会提示：

因为这是 PC 端，而公众号是微信端的，也就是需要用微信内部浏览器才可以打开，我们可以把 VScode 文件上传到服务器，然后在把地址发送到手机微信上，直接点击链接在微信内打开，也可以用微信开发者工具的网页调试打开：

这里要注意，如果公众号后台没有设置你是这个公众号的开发者，你是不可以调试的，有提示，一看就知道去那里配置了，打开之后把上传的服务器地址复制到红框里，刷新就可以了。

5.以第二种授权方式为例，也就是上面第 3 我改的那里信息登录用 snsapi_userinfo，点击登录之后，点击右下角的小齿轮（那是控制台），我们可以看到第一次登录会在 10s 后跳转申请信息授权页面。等待 10s 后，页面会跳转到信息授权页面，我们点击同意授权，就登陆了，会跳回到原来这个首页，再点击一下登录，其他的选项就会显示出来了，就像这样：

注意：这里一定要注意！！！如果登录报错了，不管报的什么错误，基本只有一种可能，那就是信息填错了，也可能是配置错了，但我感觉不至于，就那两步；一定要注意信息是不是对的，就是改的那里，我写这个项目的时候，因为资源方小程序 appid 是公司的，而我一直以为用的是我的小程序 appid，结果我在这卡了一天，找了 n 个 CSDN 文章、看了 n 遍文档、头发掉了 n 根、抽了三颗烟，最后才发现是 appid 填错了，改了之后直接就跑通了。

6.下面的选项就要看公司需要了，就比如我的项目是需要获取用户信息，实现微信支付，还要分享。

实例上有获取用户信息，其中包括用户头像和昵称，还有用户的 openid，如下：

7.接下来是分享，看了看文档，是有介绍的，和微信小程序的分享差不多。

第二个按钮接口里还有保存图片和获取地理位置两个实例，不需要的话可以 return 掉。

这里是用的第二个按钮接口做的分享，文档上也说了，写在 ready 里，是用的接口列表也需要在上面填上，必填，否则会报错。分享的正确用法是登陆之后，点一下第二个按钮接口，没有报错就可以，点击右上角的三个点，分享之后就会有自定义的内容了：

再此附上地址：微信开放文档 公众号分享传送门

8.接下来就是调起微信支付了。

我是又写了个按钮接口来展示微信支付的，接下来，看我的操作：

其实也就是比着葫芦画瓢，看实例其他的是怎么写的，自己就仿照着写一个就可以了。

我这里是写了按钮接口后，访问了以前写的一个调起微信支付的云函数，给我返回了支付统一下单需要的所有信息，然后紧接着用了公众号调起微信支付的方法。

这里是文档传送门：公众号调微信支付传送门