云社区 博客 博客详情
云社区 博客 博客详情

【云速建站】对接微信公众号、快捷支付、小程序

建站小哥 发表于 2019-01-28 16:32:50 01-28 16:32
建站小哥 发表于 2019-01-28 16:32:50 2019/01/28
0
13

【摘要】 介绍云速建站对接微信公众号、微信快捷登录、小程序的配置流程。2019.6.17更新了1.2.4节白名单列表,新增119.3.229.30、119.3.254.205、119.3.254.9、119.3.218.169。

目录:

1 绑定微信公众号                                             3 使用微信支付                                                                   4 使用微信小程序

   1.1 明确公众号类型及其对应的能力范围           3.1 申请条件                                                                           4.1 使用条件

   1.2 绑定公众号                                                3.2 申请微信支付                                                                     4.2 申请小程序

   1.3 维护公众号到网站的跳转链接                     3.3 配置微信支付需要获取的信息                                             4.3 生成小程序

   1.4 注意事项                                                    3.4 配置微信支付                                                                    4.4 发布小程序

                                                                         3.5 配置微信支付后失败检查方法                                             4.5 添加到附近的小程序

                                                                                                                                                                        4.6 小程序页面路径获取                                                                                                                                                                                                    4.7 小程序开通微信支付

2 使用微信快捷登录                                          6 微信相关常见问题                                                                   

   2.1 使用要求                                                     6.1 自定义菜单发布提示appid not bind weapp                      

   2.2 维护微信快捷登录                                       6.2 自定义菜单发布提示invadlid access_token                5 使用微信推送消息

                                                                           6.3 提示该公众号暂时无法提供服务                                       5.1 申请模板消息权限

                                                                           6.4 微信登录报错,redirect_uri域名与后台配置不一致           5.2 后台查询消息模板

                                                                           6.5 小程序审核失败,提示request:fail url not in domain list         5.3 添加模板

                                                                                                                                                                       5.4 设置绑定引导流程

                                                                                                                                                                       5.5 测试效果


云速建站提供了对接微信公众号、小程序的能力,可以通过公众号、小程序访问网站并完成下单支付,这个对于网站的拓展是帮助很大的。

下面介绍一下具体的配置流程。

1      绑定微信公众号及使用

1.1      明确公众号类型及其对应的能力范围

1.png

主要是公众号管理和自定义菜单这两个涉及公众号跳转网站的菜单,公众号管理是绑定公众号,使网站和公众号匹配从而实现通过公众号访问网站;自定义菜单设置公众号的菜单项。一般能申请服务号,认证基本是没有问题的,如果是订阅号的话,如果没有进行认证,那么自定义菜单是设置不了的,因为自定义菜单是只有认证的订阅号、服务号才可以设置(这里指的是在网站后台这里做设置)。推荐使用认证的公众号。

1.2      绑定公众号

绑定公众号因为涉及到了公众号和网站的对接,需要分别配置网站后台和公众平台。

首先,我们登录微信公众平台

1.2.1        获取公众号账号信息

登录微信公众平台https://mp.weixin.qq.com,在设置-公众号设置-账号详情下,我们需要获取的信息有:名称、微信号、类型、认证情况。

2.png

1.2.2        配置业务域名、JS域名、网页授权域名

设置-公众号设置-功能设置下,需要设置以下内容

3.png

在这三个设置页面中,可以看到一个需要下载并上传到网站后台的文件,三个提示的文件是一样的,下载一个即可,把文件先下载到本地保存。

4.png

1.2.3        获取APPidAPPsecret

然后打开开发-基本配置,在这里需要获取的信息是:appidAPPsecret;需要配置IP白名单。如果是第一次绑定,需要重置一下APPsecret,否则提交时会报错。

5.png

1.2.4       配置白名单

配置白名单,点击查看

6.png

点击修改后,把IP填写进去最后确认修改即可。实际填写的白名单IP为:119.3.254.9、119.3.218.169

上面截图是之前的IP白名单,实际只需添加 119.3.254.9、119.3.218.169 即可。(更新于2020/1/2号)


1.2.5        上传配置文件

现在,登录云速建站后台(https://console.huaweicloud.com/webmobile/?region=cn-north-1#/cloudsite/website),我们先把刚才下载的TXT文件上传到网站后台。点击后台管理

7.png

点击页面右侧的站点编辑,进入编辑界面

8.png

在编辑页面的左侧菜单项中,点击文件菜单,上传文件

9.png

10.png


1.2.6        绑定公众号

接下来就到绑定公众号了,在后台管理-微信管理-公众号管理处

11.png

把刚才获取的公众号信息填写到相应栏位,点击下一步

12.png

13.png

返回公众平台,点击基本配置-服务器配置的修改配置按钮

14.png

15.png

16.png

然后这里需要注意的是,现在网站后台和公众平台需要配置的都已经配置完成了,但是都需要点击保存,保存是有顺序要求的。需要先保存网站后台的配置,然后在保存公众平台的配置。

1、保存网站后台配置

17.png

保存后可以在界面看到如下图显示

18.png

2、保存公众平台配置

19.png

20.png

提交成功后,记得把服务启用

21.png

22.png

自此,微信公众号的绑定就已经完成了。

1.3      维护公众号到网站的跳转链接

1.3.1        认证的公众号编辑公众号菜单

进入网站后台-微信管理-自定义菜单,点击“+”号添加菜单

23.png

添加完菜单项后,需要给菜单设置动作,以响应用户点击菜单。

点击生鲜超市菜单,然后选择跳转到网页

24.png

25.png

26.png

点击关于我们菜单,选择发送消息

27.png

所有菜单设置动作都维护后,点击发表

28.png

29.png

1.3.2        效果

微信关注公众号,进入公众号后,可以看到刚才添加的菜单项,并且点击关于我们,显示后台设置的消息

30.png

点击生鲜超市菜单,进入网站,并且自动完成登录

31.png

1.4     注意事项

1.4.1        网站绑定了证书

如果网站绑定了ssl证书,配置项里边需要填写IP地址处,http需要换为https。如原地址为

http://XXX.com,绑定证书后,需要填写https://XXX.com

1.4.2        发布自定义菜单报错

32.png

如果发布自定义菜单时,提示上图信息,请检查一下①是否配置了白名单,白名单是否正确 ②如果白名单确认没问题的话,可以试着重置一下APPsecret,可能是由于首次绑定而没有重置APPsecret

2      使用微信快捷登录

2.1      使用要求

微信开放平台完善开发者资料时,需要填写企业信息即需要有工商登记。此外,创建网站应用需要填写网站域名等信息,提交审核后,审核方是会登录网站查看网站内容的,所以在网站编辑完成后再来提交审核会相对好点,如果网站尚未编辑完成就提交审核,不能保证审核通过。

2.2      维护微信快捷登录

2.2.1        注册成为开发者

微信开放平台地址: https://open.weixin.qq.com/cgi-bin/frame?t=home/web_tmpl&lang=zh_CN

微信开放平台的账号和微信公众平台的账号是分开的,并且注册了公众平台的邮箱不可再用于注册开放平台。

2.2.2       创建网站应用

登录微信开放平台,点击创建网站应用

33.png

按照栏位要求填写基本信息

34.png

填写网站信息(这里的授权回调域、官网地址都是填写后台管理处绑定的那个域名),提交审核

35.png

审核通过后,获取到appidAPPsecret,并申请开通微信登录,如下图(点击应用可以看到审核情况,如果长时间未审核通过,会给出原因,这时可按照提示修改或者联系微信开放平台的客服咨询)

36.png

2.2.3        网站后台添加微信登录

登录解决方案控制台,地址:https://console.huaweicloud.com/webmobile/?region=cn-north-1#/cloudsite/website

进入后台管理

37.png

找到会员-第三方账号,点击

38.png

编辑微信登录

39.png

把微信开放平台获取的appidAPPsecret填写进去,保存

40.png

保存后,微信登录处于未激活状态,点击未激活

41.png

激活成功

42.png

2.2.4        网站页面维护微信登录方式

点击后台管理页的站点编辑,进入编辑界面

43.png

把会员控件拖拽到页面

44.png

可以看到控件中已显示一个微信的小图标,点击图标使用微信登录。

45.png

此外,可以点击控件的样式设置,找到第三方账号,更改微信登录的图标

46.png

3      使用微信支付

3.1      申请条件

1、  必须是经过微信认证的服务号,才可以申请开通微信支付。

2、  网站绑定的域名已备案成功。

3.2      申请微信支付

登录微信公众平台https://mp.weixin.qq.com,点击微信支付,按照页面提示步骤填写相应资料完成支付申请

47.png

审核通过后,在微信支付下可以看到如下图界面

48.png

3.3      配置微信支付需要获取的信息

3.3.1        在微信公众平台获取的信息

1、在公众平台-微信支付-商户信息页中,获取商户号、公司名称

49.png

2、在公众平台-设置-公众号设置-账号详情页中,获取微信号

50.png

3、在公众平台-基本配置页中,获取appidAPPsecretAPPsecret在绑定微信公众号时已经获取过了,直接复制使用即可)

51.png

3.3.2        在微信商户平台获取的信息

在商户平台-账户中心-API安全页中,①下载证书,解压备用;②设置32位的API秘钥

52.png

3.4      配置微信支付

3.4.1        云速建站后台管理配置

打开后台管理-电子商户设置-支付设置

53.png

找到微信支付,点击后边的编辑

54.png

填写信息如下,点击确定

55.png

56.png

配置完成后,请确保支付方式是开启状态(张开的眼睛图标),否则支付界面也是看不到该支付方式的。

57.png

3.4.2        微信商户平台配置

在商户平台-产品中心-我的产品中开启支付方式

11.png

在商户平台-产品中心-开发配置中,填写支付的授权目录

22.png

注意授权目录这里,提示框中的顶级域名指的是网站后台管理处绑定的域名。另外,如果网站添加了证书,这里的http必须替换为https

59.png

自此,微信支付就已经配置完成了。

3.5      微信支付配置后不成功的解决步骤

微信支付配置完成后,如果支付过程出现问题,请按照以下几点检查配置

3.5.1        检查公众平台帐号中的微信支付帐号和商户平台中的帐号是否一致

登录微信公众平台-微信支付-商户信息中查看商户号

1.png


3.5.2        如果用户访问时一直在刷新,原因是公众平台的appid appscrert密钥不正确

登录微信公众平台-开发-基本配置,在此查看appidAPPsecret,然后检查下配置过程中填写这两项值的地方是否填写正确

2.png


3.5.3        检查收款方名称是否填写了简称

登录微信公众平台-微信支付-商户信息

3.png


3.5.4        重置32位密钥并不能包含简单的连续字母或数字。(重点)已经做过的也还需要再做一次

登录商户平台-API安全

4.png


3.5.5        若使用微信支付报URL未注册错误,优先检查授权目录是否正确

报错如下图

5.png


登录商户平台-产品中心-开发配置

检查授权目录是否填写正确,重点检查是否用授权目录中的域名访问的,注意必须是小写字母,不能用大

6.png

1.支付授权目录:绑定的域名+/wxpay/
2.扫码支付回调链接 http://绑定域名/wxcallback.shtml

3.5.6        在商户平台商品大全中检查 配置的支付是否开

7.png

3.5.7        检查帐号类型是不是特约商户,系统不支持特约商户,请申请普通类型商

登录商户平台-商户信息中查看账号类型

8.png


3.5.8        商家存在未配置的参数,请联系商家解

9.png

1,当前调起H5支付的域名(微信侧从referer中获取)与申请H5支付时提交的授权域名不一致,如需添加或修改授权域名,

请登陆商户号对应的商户平台--"产品中心"--"开发配置"自行配置 
2,如果设置了回跳地址redirect_url,请确认设置的回跳地址的域名与申请H5支付时提交的授权域名是否一致

4      使用微信小程序

4.1      使用条件

网站必须添加了ssl证书,使用的域名已备案成功

4.2      申请小程序

在微信公众平台-小程序中,注册认证小程序。

60.png

认证成功后,在开发-开发设置这里获取小程序的appidAPPsecret,并配置服务器域名

61.png

这里4个域名都填写站点编辑中生成小程序时选择的那个域名。(如果网站仅绑定了一个域名,这里直接填写该域名即可)

62.png

填写完成后,点击保存提交。

4.3      生成小程序

进入后台管理-站点编辑,点击小程序图标切换到小程序编辑界面

63.png

64.png

小程序页面编辑和PC、手机端的页面编辑是一样的,这里不多叙述。

在完成小程序页面编辑后,点击页面右上角的生成按钮,填写页面信息。如果不需要小程序的支付功能,支付商户号和支付秘钥这两项可以不填。

65.png

保存完成后,把生成的压缩包,下载到本地并解压

66.png

4.4      发布小程序

4.4.1        下载微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

这里使用小程序平台的管理员账号登录

4.4.2        导入小程序

登录后,选择小程序项目

67.png

导入项目,按栏位提示填写信息。目录选择4.3下载解压的小程序应用包所在目录,appid填写4.2获取到的id

68.png

4.4.3       编译上传

添加完项目后,进入项目页面,编译、上传即完成发布操作

注:上传前应先预览一下小程序,看是否能正常打开预览

69.png

填写版本号,备注,确认上传

70.png

4.4.4      提交审核

登录小程序后台,进入版本管理,提交审核

71.png

审核信息填写

72.png

标题:建议填写商家的品牌名称;

所在服务类目:建议选择经营类目;

标签:建议选择填写和自己品牌相关的标签

73.png

4.4.5        发布

审核通过后,进入管理-版本管理,提交发布,小程序才会上线 

74.png

4.5      把发布的小程序添加到附近的小程序

75.png

76.png

77.png

78.png

审核通过后,在刚才填写的地址附近搜附近的小程序,就可以看到发布的小程序应用了。

4.6      小程序页面路径获取

在开发者工具中,页面的左下角处

79.png

4.7      小程序绑定已有商户号开通微信支付

登录微信商户平台,点击微信支付申请按钮,进入选择开通方式页,两种方式一旦选择后不可更改,这里选绑定一游微信支付商户号

80.png

点击绑定按钮,进入绑定已有商户号流程

81.png

注:目前仅支持绑定主体一致且完成所有开户流程的新接口普通类型商户号,其他类型均不支持,详情如下:
商户号与appid的认证主体不一致;
商户号未走完所有开户流程,包括未验证身份、未签署协议等情况;
商户号是老tenpay接口的商户 号,未完成新接口升级;
商户号是境外类型商户号;
商户号是服务商类型商户号;
商户号因违规处罚导致的限制;
另外,选择该种方式请确认你的业务模式和经营范围是否与绑定的商户号一致。如不一致,请走新申请流程获取新的商户号。

点击提交后,跳转到成功提示页面

82.png

也可在商户平台-产品中心-appid授权管理中查看申请单的处理情况

83.png


5      使用微信推送消息

5.1      申请模板消息权限

登录到公众平台,点击功能下的添加功能模块

111.png


在插件库中找到模板消息并申请开通

112.png

113.png

114.png

提交申请后,等待审核通过

115.png

116.png

5.2     后台查询消息模板

在推送模板下找到订单支付,自动发送选择是,点击后面的编辑按钮

117.png

在弹出窗口中可以获取到该消息模板对应的公众平台中的模板编号,然后去公众平台模板库中搜索并添加

118.png

5.3      添加模板

返回到公众平台,在功能-模板消息,点击进入模板库

121.png


搜索想要的模板库添加到我的模板中(5.2中在后台获取的模板编号,这里以订单支付成功通知为例)

122.png


添加模板后,获取到该模板的模板id,返回后台,把模板id填写到配置项中。

123.png

{first.DATA}/{remark.DATA}等模板配置项如果不知道填写内容是消息体的哪部分,可以在公众平台中,点击该模板的详情查看

124.png

125.png

因为选订单支付是发送给管理员的,所以需要在这里把管理员账号维护进来126.png


5.4      设置绑定引导流程

进入后台管理-微信管理-微信应用

127.png


1、如果设置了自动登录,消息模板这里就不用维护引导绑定公众号的操作了,微信消息推送到这里就配置完成了。


2、如果设置的弹出登录,则需要维护一个引导流程引导用户绑定账号到公众号上。

自定义一个菜单,这里我起名为绑定,让绑定菜单跳转到引导页面。引导页面的URL为:

http:// + 网站域名 + /index.php?_m=wp_weixin&_a=entrance
例如:网站域名 是:abcd.com,引导页路径是:http://abcd.com/index.php?_m=wp_weixin&_a=entrance

131.png


5.5      测试效果

以自动登录为例(因为设置自动登录可以少维护引导流程)

微信关注公众号,进入网站,下单支付。微信中收到提醒消息

132.png


后台微信推送消息处也可以看到推送记录

133.png


6      微信相关常见问题

6.1      自定义菜单发布提示appid not bind weapp

84.png

可能原因有一下几种,请检查是否都正确配置

1.     原因是小程序和公众号没有关联

2.     自定义菜单录入时填写的appid错误

3.     公众号不是认证的服务号

4.     自定义菜单中有多个项目链接到不同的小程序,其中一个小程序没有关联


6.2      自定义菜单发布,提示invadlid access_token请重新尝试

1.  检查公众号appidAPPsecret是否正确

2.  检查IP白名单填写是否正确(114.115.185.211114.115.223.181


6.3      该公众号暂时无法提供服务,请稍后再试

1.  检查PC站点是否开启,站点必须是开启状态

2.  检查IP白名单是否正确填写(114.115.185.211114.115.223.181

3.  如果用户安了ssl证书,配置公众步骤中的URL需要填https://域名

4.  公众平台中服务器配置是否启用

      85.png

6.4      微信登录报错,redirect_uri域名与后台配置不一致,错误码10003

86.png

原因是公众号配置的回调域名与请求的域名不一致,请检查网页授权域名是否填写正确

网页授权域名填写请参考1.2.2(域名不能是空头域名xxx.com)。

如果是从手机站底部菜单点击进入报此错,如下图

87.png

进入后台管理-站点管理-设置-手机访问,检查配置的域名是否和网页授权域名一致

88.png

6.5 小程序打开失败,提示:请求失败request:fail url not in domain list,请修复后再提交审核

在小程序发布上线过程,遇到这个提示,检查下配置项中服务器配置的域名是否正确,特别是request域名。注意填写域名必须绑定了ssl证书

image.png


云速建站之对接微信.pdf 3.77M ,下载次数:69

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 13
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


该篇博文已经被设置为禁止评论!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消