设置

设置微信公众号和相关调试工具

使用JSSDK网页的微信公众号的设置,相关的调试工具

2018-05-09侠课岛    中级进阶       

前端/移动端/微信JS-SDK上手使用 59     0     5519

本套小教程涉及到微信公众平台、前端、简单的PHP后端、测试工具、服务器和域名等跨栈相关知识,可能会有一定的难度,现实开发工作中,如果没有跨栈经验的开发人员,建议前端+后端配合完成。

本节内容要点:

  • 微信公众号类型选择

  • 用于测试的微信公众号

  • 认识JS-SDK,检测接口权限是否获得

  • 安装微信Web开发者工具

  • 本地映射外网工具的基本使用

  • 本地虚拟服务器环境

  • 设置微信公众号(JS安全域名、开发者工具绑定开发者帐号)

用于生产环境的产品微信JS-SDK开发,至少需要两样东西:

  • 用于调用接口权限的微信公众号

  • 一个域名,用于访问我们调用微信公众号接口的网页和调用微信公众号接口,对应地也应该有一个服务器或者是虚拟主机来承载这些网页,然后通过域名来访问到服务器上面的这些网页。生产环境使用的域名可以在阿里云和腾讯云等这些云服务商申请和备案。

一般地,为了方便调试,我们还需要微信公众号的Web开发者工具

正式微信公众号类型选择

微信公众号注册:https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN 

现实中微信的公众号我们主要使用两种:服务号和订阅号,其中订阅号更多用于信息的发布等,提供的接口权限较少,个人也可以注册;服务号提供了强大的接口权限,可以实现业务与微信用户对接,用户授权登录、用户管理、微信支付等各种权限接口,如果需要配合公众号做一些开发,服务号主要针对企业和组织,我们一般选择服务号,并且需要认证才能获取到服务器的各种权限接口,具体可以在注册好微信号后,登录,然后在“开发 > 接口权限”详细查看。

image.png


用于测试的微信公众号

作为个人平时学习,可能我们申请一个服务号并获得服务号的各个接口权限,对于个人来说成本有点高,因为需要企业等的资质,加上认证、域名要备案等一系列操作。其实,我们可以使用微信提供给我们的一个测试的微信公众号环境,也称沙箱环境,也就是只能开发测试使用的微信公众号,可以免去企业资质、认证、域名备案等的操作,除了支付等功能,服务号大部分的功能接口都有,作为开发测试是可以的。登录,配置相关的信息就可以立即使用啦!!!

微信公众平台接口测试帐号申请:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 

登录成功后,需要扫码绑定测试人员:

image.png


本套小教程中,我们假设你拥有了微信公众服务号并且已经认证,获取到了你想得到的权限。

至此,你拥有了用于微信JS-SDK开发的微信公众号了

认识JS-SDK,检测接口权限是否获得

微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

更多参见微信JS-SDK使用文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 


要调用微信公众号的接口,首先要查看是否获得了该接口的权限,查看方法如上面说的登录微信公众号后,在“开发 > 接口权限”详细查看

安装微信Web开发者工具

页面带有微信接口调用、微信登录授权等功能的话,是不能直接调用微信JS-SDK相关接口功能的,会提示你请在微信客户端打开链接等,这个时候一般使用微信打开或者是微信Web开发者工具来打开,而每次更改都用手机微信打开,稍微有点麻烦,所以,我们可以试试微信Web开发者工具,它模拟了微信客户端的表现,很方便我们做微信开发的时候的调试。(小程序的微信开发者工具中,也带有可以调试微信公众号网页的功能,但是经实际操作发现,缺少了一些类似:JS-SDK、调试、权限列表等这样的功能面板)

下载地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140 

下载完成后,安装后登陆,界面如下:只需要在地址栏中输入你的调试地址,就可以方便测试微信JS-SDK的接口调用了

image.png

本地映射外网工具Sunny-Ngrok的基本使用

微信的有些接口权限是和域名绑定访问的,例如网页授权接口,就需要有一个备案的域名,需要可以通过这个域名从外网访问到这个网页,并且需要在微信公众号管理面板中设置该域名,最后网页通过这个域名去请求来访问调用微信网页登陆等接口,授权成功返回这个域名的回调网址。而这个域名需要满足:

  1. 域名要备案

  2. 可以通过域名可以访问到网页,也就是有一个服务器在承载这个网页,服务器与域名绑定起来

备案目前在国内一般需要10多个工作日,难道域名备案没有下来,我就不能开发嘛?答案不是的,在开发阶段,没有服务器,没有域名,或者是域名没有备案,无法访问,那么我们就使用Sunny-Ngrok这个工具来帮助我们。

Sunny-Ngrok主要帮助我们实现本地映射到外网,使得外网可以访问到我们本地的代码,我们本地电脑直接开发好之后,不用传到服务器,微信公众号就可以访问到我们本地电脑的代码了,这样对于我们做微信公众号的开发就会非常方便高效。

Sunny-Ngrok官网:https://www.ngrok.cc/ 

有免费版,收费版,可以先试试免费版(免费可能速度有一点点慢),使用步骤:

  1. 注册用户,然后选择免费开通隧道

  2. 下载客户端安装,双击启动Sunny-Ngrok启动工具.bat

  3. 复制刚才开启好的隧道ID粘贴回车

即可看到如下启动界面,更多windows使用详细查看:https://www.sunnyos.com/article-show-71.html,  运行起来后,你会得到一个免费的调试域名如:xkd.free.ngrok.cc,免费版这个网址会对应你本地127.0.0.1:80,也就是本地服务器的80端口,你也可以试试自定义域名等功能。

image.png

类似的工具还有:https://natapp.cn/,都可以尝试尝试哦。 

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

59

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?