**节~企业微信小程序的注册图文详解
发表时间:2023-10-07 08:37:33
文章来源:炫佑科技
浏览次数:185
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
**节~企业微信小程序的注册图文详解
石头哥的公司终于注册好了,接下来石头哥就可以愉快的注册一个企业微信小程序了。 主要目的是实现微信支付功能,获取用户手机号码,这些都需要企业小程序。 那么今天就来注册一个企业小程序吧。 顺便,我会通过这篇文章来记录这个过程。 稍后注册微信支付商户账号,实现小程序支付功能时,我会写相应的文章。
注册企业小程序必备
1.邮箱注册界面
首先,在注册界面选择小程序
如果您的邮箱已被占用,则会出现以下错误
如果该邮箱地址之前没有被使用过,您将进入以下页面。 此页面用于验证电子邮件地址。
2.企业注册界面
上面的邮箱地址验证成功后,我们要在这里选择一个公司。 当然,如果您是个体工商户,也可以选择个体工商户。
只需如实填写此处信息即可
信息填写完毕后,提交时会有如下图所示的确认框。
这样我们的企业小程序就注册完成了。 可以看到企业小程序后台有微信支付选项,但个人小程序没有该选项。
3.登录小程序后台,关联微信支付。
如果此时我们想直接关联微信支付商户账号,则会提示如下错误。
也就是说,我们必须先经过微信认证,才能关联微信支付。 所谓微信认证,就是每年向微信缴纳300元认证费。
4.微信认证
点击此处获取认证
仔细一看,微信认证需要填写的信息还蛮多的。
填写发票信息,即你在微信消费300元,微信会给你开具发票。
然后我就给微信支付了300元。
付款后,等待微信审核即可。 认证审核通过后才能进行其他操作。
请耐心等待。 认证完成后,我就可以关联微信支付商户账号,愉快地使用支付功能了。 下一节见。
我晚上就提交了证明。 第二天,周三早上,认证机构给我打电话。 那是一位年轻的女士,声音很好听。 她确认了一些信息,并要求我开设公众账户。 我收到了 2 的总和 验证以美分为单位的数字,它就会通过。
第2节~注册微信支付商户账号
我们在上一节中已经注册了企业小程序。 本节我们将注册一个微信支付商户账号。 这是实现微信支付的必要步骤,因为没有微信支付商户账号,就像你没有银行卡一样。 如何收钱? 毛呢布料。
写在前面
申请微信商户账号是相当麻烦的。 不仅要填写很多信息,*麻烦的一步就是核实营业地点的实际图片。 这一步很麻烦,修改了很多次才通过验证。
1.注册微信支付商户账号
申请地址:该地址可能会发生变化。 如果是的话,请前往上面的官方文档并按照步骤进行操作。
然后按照步骤如实填写即可。
然后填写信息页面
2. 注册时的注意事项
下面我就给大家介绍一下注册过程中需要注意的一些事项。 我这里使用的是关联微信支付服务商的注册(至于为什么要这样做,这里不能透露,我只是告诉大家,注册服务商可以降低微信支付的手续费)。 注册微信商家后,可以联系石头哥。 ,石头哥现在也是微信支付服务商。 。 。
接下来就是漫长的信息填写过程。
这一点是*麻烦的,所以我重点讲一下。如果您有线下实体店,则需要拍下下面要求的照片并上传
如果您有经过认证的微信服务号
如果您有已经上线的小程序或者有自己的小程序设计,可以使用下面的小程序。 不过小程序申请微信支付通常比较麻烦。 *简单的就是线下店铺和公众号。
要使用该应用程序进行申请,您需要满足以下条件。
如果您有网站,则可以使用以下内容。
企业微信也可以注册微信支付。
对于结算规则,尽量选择适合您业务场景、费率*低的结算规则。
提交信息也比较慢,耐心等待即可。
然后还需要再进行一步验证。
验证完成后,只需等待审核即可。
提交完成后,耐心等待审核即可。 如有未通过审核的,根据实际情况修改即可。 这里审核通过后,我们就可以进行下一步绑定小程序支持微信支付的操作了。 如果多次提交审核失败,可以向石头哥寻求帮助。
下图是我第二天审核通过后的截图。
审核通过后,还需签署协议。
协议签订后,我们的微信支付商户账号正式申请完成。
第三节~10行云端开发代码实现小程序支付功能
继续上一篇文章,我们已经注册了企业小程序,并顺利完成了微信认证。 本节我们将开始正式关联微信支付,并将支付功能接入到我们的小程序中。 传送门:《企业微信小程序注册图文详解》
先决条件
1、微信商户关联小程序
1.登录小程序后台,点击关联更多商户账户
2. 关联商户账户需要使用appid。 点击如下图可以关联更多AppID。
复制我们小程序的appid
然后授权关联我们的微信支付商户账号
申请微信商户账号后,可以直接扫微信码登录,然后将小程序与商户账号关联。
商户账号已关联,需要在小程序中确认授权。
授权完成后,我们的小程序上会出现如下信息。 单击确认。
单击上图中的“确认”,然后单击“授权”,如下图所示。
可以看到我们的小程序和微信商户已经成功关联了。
至此,我们的小程序与商户账户的关联操作就完成了。
2.激活云开发并绑定微信商户号
1.然后新建一个小程序,启动代码部分。 这里的appid必须是你微信支付关联的商户,而且必须是企业小程序。 这里创建项目的时候记得选择不使用云服务,因为使用默认的云开发会创建很多无用的文件。
2. 激活云开发功能
将会弹出一个协议,只需单击“确定”即可。
3. 为您的云开发环境命名,可以是英文或拼音。
现在云开发只能免费试用1个月。 如果你想学习,一个月就够了,所以你可以在这里选择任何付款方式。 对于选择配额的下一步,只需选择任意一个并提交即可。
等待云开发创建完成。 创建完成后如下。
4.然后点击设置、全局配置,可以看到有微信支付配置。
有的同学这里看不到微信支付配置是因为你的小程序开发工具版本太低。 *好下载*新版本的开发工具。 5.云开发配置微信商户账号。
添加完成后,还需要在手机上确认授权。
6.手机微信确认
可以看到这里已经绑定了授权。
我们稍后会讨论退款的问题。 这时候我们的准备工作就全部做好了,接下来就要愉快的写代码了。
3.编写云开发支付代码
1.阅读官方文档。 其实是非常详细的。 接下来我将带您了解一下。
这里也贴出官方链接给大家。 其实官方已经给我们提供了一个完整的例子。
我们只需要将这段代码复制到我们自己的云函数中即可。
2、创建云功能,进行云开发统一支付
我们首先需要创建云函数的根目录
然后新建一个云函数
然后直接复制官方的例子到我们自己的云函数中
3.将云函数中的信息替换为我们自己的
上面标记的重要的东西一定要替换成你自己的,然后保存更改并部署云功能
4. 编写页面
在index.wxml中编写一个按钮,点击时调用我们的支付云函数。
然后在index.js中编写点击事件
这时候我们直接点击支付,看看是否会激活支付。
此时有很多点击。 仔细观察可以发现我们的云开发环境ID还没有初始化。
5.在app.js中配置云开发环境ID
在这里获取环境id
然后在app.js中配置
然后我们点击支付,就可以看到我们已经成功激活支付了。
6.然后我会尝试用手机微信支付。
支付成功后,我们的控制台也会有相应的日志打印。
至此我们就可以在小程序中成功使用微信支付了。 剩下的无非就是让价格和产品名称动态传入,后面我也会把源码放到网盘里。 有需要的同学可以在我的公众号回复“云开发支付”即可获取。
第四节:产品订单付款情况说明
上面我们学习了支付功能,所以我们用一个简单的案例来教大家如何尝试一个简单的商城小程序,它包含以下功能
像往常一样,先看一下效果图
页面比较简单,因为我这里主要教大家如何实现支付功能,至于页面美化,大家课后有时间自己美化一下即可。
1、app.json中配置多个页面
由于我们这里使用了两个页面,所以我们将直接根据前面的章节修改页面。 我们在配置多个页面时会用到它。 所以我们首先创建一个订单页面。 这里我不会详细介绍如何创建页面。 小程序的基础知识已经教过很多次了,那么在app.json中配置如下
由于这里的配置不是本节的重点,所以这里把代码给你了,你直接粘贴到自己的项目中即可。
"": { "color": "#", "": "#", "": "白色", "list": [{ "": "image/.png", "": "image/.png ", "": "pages/good/good", "text": "产品首页" }, { "": "image/.png", "": "image/.png", "": "pages / order/order", "text": "我的订单" } ] },
我已经把这里用到的图片资源收录到了课程配套资源中,如下
下课后向石头哥要即可(限购班用户)。 下载资源后,新建一个图片文件夹,然后将资源放在图片文件下。
现在配置完成了,我们开始代码部分。
其次,处理产品并将其放入数据库
我们之前学习的时候手机微信小程序开发,使用的是本地数据。 接下来我就给大家介绍一下如何将产品数据放入数据库,方便后期动态修改。
1、在云开发数据库中新建商品集合(表)
创建完成后,记得将权限改为所有人读写。
创建商品集合后,我们需要向其中添加数据。 我们之前在本地硬编码的数据可以被激活。
添加的数据如下
2.修改产品列表代码
我们之前的产品数据是在本地硬编码的。 这个时候我们就可以请求云开发数据库中的数据,后期可以动态的进行增删改查。
从上图我们可以看到数据库中的商品数据已经请求成功,接下来就可以将数据动态绑定到小程序页面了。
可以看到,我们的数据已经成功显示了。 至此,我们的产品列表页面改造就完成了。
3. 创建订单
我们之前了解到,我们是点击购买,直接付款。 没有动态记录的命令。 因此,在本节中,我们将首先教您如何创建新订单。
1. 新建订单表
我们要在云开发数据库中生成订单,实际上就是向订单表中添加数据。 所以我们还是需要先创建一个新的订单集合(表)
这里请注意,我们的订单表的权限设置为“只有创建者可以读写”。 为什么? 因为我们每个人肯定都不希望别人看到我们的订单。 所以当我们将其设置为只有创建者可读可写后,那么只有我们才能看到这个命令。 上面的商品表只设置为每个人都可读,因为我们的产品数据需要对每个客户都可见。
2.创建订单代码并写入
当我们创建了上面的订单表后,当我们的用户点击购买时,是无法直接支付的。 他们应该先创建订单,然后付款。 下面我们来分解一下。 教您如何创建订单。
上面的代码注释已经很清楚了。 当我们创建订单时,需要在订单中保存商品名称、金额、订单时间、订单状态。然后查看订单表中的订单数据如下:
这样,我们的新订单就创建成功了。 创建订单时,我们使用一个方法来获取当前时间。 该方法是我们定制的。 由于不是本节的重点,所以我把这个方法的代码贴出来给大家。 稍后可以直接将代码放到自己的项目中。 只要在里面使用就可以了。
// 获取当前时间的实用方法 () { var d = new Date(); var 月份 = d.() + 1; var 日期 = d.(); var 天 = d.(); 无功小时 = d。 (); var = d.(); var = d.(); var ms = d.(); var = d.() + '年份'; if (月 > 9) += 月 + '月'; 否则 += 月 + '月'; if (日期 > 9) = + 日期 + "日"; else = + 日期 + "日"; if (小时 > 9) = + 小时 + "小时"; 否则= +小时+“小时”; if ( > 9) = + + "分钟"; else = + + "分钟"; ; },
4. 订单付款
当我们创建了上面的订单后,我们应该在订单创建成功的回调中调用支付。 其实支付码和我们之前学的基本是一样的。 唯一的变化是,我们需要将新的订单ID传递给支付云功能,并在支付时使用订单ID作为订单号。
上图是我们创建订单时返回的信息。 可以看到返回的信息中有一个_id字段。 该字段也可以在我们的订单表中找到。
事实上,我们在付款的时候,订单号必须是唯一的。 其实这个_id是微信官方自动给我们创建的,是唯一的,所以可以直接使用。 那我们就稍微修改一下之前的goPay支付方式。 将这个_id作为订单号传递给支付云函数。
可以看到,当我们在订单创建成功的回调中调用支付时,支付还是可以成功的。 我们的云功能的唯一变化是使订单号生效。
重要提示:每当我们的云功能发生任何变化时,我们必须记住重新部署云功能。
至此,我们的支付和订单部分就已经改造完成了。 接下来,我们需要实现订单的未付款和已付款列表。
5. 订单页面展示(付费和未付费)
这一部分知识点较多,也比较复杂。 我先把代码贴给你,并在视频中逐步解释。
未付费类目和付费类目栏切换代码如下:
{{item}} 0}}"> 产品:{{item.}} 金额:{{item.}}元 下单时间:{{item.time}} 前往支付
var app = ()let DB = wx. 云。 ();让= 0; //0个新订单未支付,1个已成功支付 Page({ data: { // 顶部菜单切换: ["", "Paid"], // 默认选择菜单: 0 , list: [] } , //顶部切换: (e) { let index = e...idx; this.({ : index }) .log("index", index) //0 新订单尚未下单付款, 1 付款成功 if (index == 1) { = 1; } else { = 0; } this.(); }, () { this.(); }, //获取 order() { let that = this; DB.
(“命令”) 。 在哪里({ : }) 。 get({ : (res) { .log("获取成功", res.data) let = res.data; .log(res); if ( && . > 0) { that.({ list: }) } else { that.({ list: [] }) } } }) }, //付款订单(事件) { let good = event. 。 。 物品。 log('付费好', 好) wx. 云。 ({ 名称: '', 数据: { : 好。
_id,:好。 名字**节~企业微信小程序的注册图文详解,:好。 }, : 资源 => { . log("获取支付参数成功", res) const = res. 。 // 调用支付 wx. ({ . . . , (res) { .log('支付失败', res) }, (res) { .error('支付失败', res) } }) }, : res => { . log("获取支付参数失败", res) }, }) }})
我会在视频中仔细给你讲解,一步步教你如何打出这部分代码。