您所在的位置: 首页>关于我们>公司动态>建站知识>微信公众号接入网页开发指引

微信公众号接入网页开发指引

发表于:2019-08-17 阅读:6825 关键词: 公众号 微信公众号 网页开发

  由于微信开放平台中内容非常多,学起来不容易。这篇文章为公众号如何接入网页做了一个指引,帮助大家迅速入门。


  首先我们先了解一下微信订阅号提供的服务分为两大类:


微信公众号

  消息会话

  公众号是以微信用户的一个联系人形式存在的,消息会话是公众号与用户交互的基础。目前公众号内主要有这样几类消息服务的类型。

  群发消息:

  订阅号能主动推送的文字消息、图文消息、图片、视频、语音。

  模版消息:

  用户触发才能推送的有固定模版的消息。

  客服消息:

  可以有真人客服参与的消息。

  被动回复消息:

  系统自动回复的消息。

  以上消息类型用于不同的场景,这里不展开说。


微信公众号

  公众号内网页

  如果有许多复杂的业务场景,就需要通过网页形式来提供服务。开发者必须自己实现前端页面和后端服务,可以运用以下微信提供的开发工具帮助开发:

  开发者文档:

  这里包括订阅号,小程序,服务器API等等的文档集合。

  [doc]https://developers.weixin.qq.com/doc/

  公众号开发工具:

  该开发工具的优点是可以模拟微信客户端的环境帮助开发和调试。

  [doc]https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

  微信JS-SDK:

  是开发者在网页上通过JavaScript代码使用微信原生功能的工具包,开发者可以使用它在网页上录制和播放微信语音、监听微信分享、上传手机本地图片、拍照等许多能力。

  [doc]https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

  微信网页样式库:

  WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

  [doc]https://weui.io/

  微信服务API:

  提供微信各种后台服务的能力。

  [doc]https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

  在线接口调试工具:

  在线调试微信服务API。

  [doc]https://mp.weixin.qq.com/debug?token=1891459664&lang=zh_CN


微信公众号

  如何开发公众号内网页

  第一步:申请测试号。

  微信公众号的接口有权限控制,不同的公众号类型具备不同的接口权限,如果你的帐号还没有认证是不能使用需要认证权限的接口的。

  以下是公众号接口权限说明文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1433401084

  为了不受权限的影响,我们可以申请测试账号,就可以直接拥有所有接口的权限,方便开发。申请地址:https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index。

  第二步:下载公众号开发工具。

  下载地址:

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

  第三步:开发者授权。

  如果开发过程中需要接入订阅号,必须先通过订阅号给开发者的授权,授权方式如下:

  1. 在微信公众平台登录公众号

  2. 在【开发】-【开发者工具】-【web 开发者工具】中给订阅号开发者授权。

  3. 打开刚下载的公众号开发工具,用授权过的微信扫码登录,这样开发的时候就能有权限访问公众号的内容。

  第四步:前端网页开发。

  现在可以进行正式的开发了,关于前端开发,可以使用微信JS-SDK调用微信前端的能力,使用微信网页样式库遵循微信样式规范,还需要注意一些适配。同时可以通过公众号开发工具中的【公众号网页调试】功能调试页面。

  第五步:后端服务器开发。

  1. 获取access_token

  微信提供了微信服务API,但是必须先获取access_token才可以调用,access_token是公众号的全局唯一接口调用凭据。

  [doc]https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

  注意:必须先在公众号中设置服务器IP白名单,才有权限调用获取access_token的接口,通过AppID和AppSecret(可在【微信公众平台】-【开发】-【基本配置】页中获得,需要已经成为开发者,且帐号没有异常状态)。调用接口时,请登录【微信公众平台】-【开发】-【基本配置】提前将服务器IP地址添加到IP白名单中,点击查看设置方法,否则将无法调用成功。小程序无需配置IP白名单。

  2. 获取微信服务器IP地址

  如果公众号基于安全等考虑,需要获知微信服务器的IP地址列表。

  [doc]https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140187

  3. 获取用户信息

  获取用户信息需要使用到openid。这里理清一下什么是openid。公众号可以获取关注用户的openid,openid其实就是用户加密过的微信号,在同一个公众号里openid是用户的唯一id是不会重复的。

  但是如果你有两个公众号,同一个用户分别关注了你的两个公众号,此时这同一个用户在你两个公众号里的openid是不一样的。那么如果你有多个公众号中统一用户id的需求。这里就需要使用unionid,同一个用户关注你的多个移动应用、网站应用和公众号,虽然openid不同,但是你可以通过openid获取到用户信息中的unionid,unionid在你的多个应用中是唯一的。

  注意:前提是你必须把你的多个应用关联到同一个开发者账号中,在微信开放平台中的【管理中心】中关联。

  [doc]https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140839

  4. 通过在线接口调试工具调试API。

  5. 调用微信服务API完成开发。

  第六步:在公众号中配置后端服务器。

  公众号接入自己的后端服务器,开发者需要按文档配置。

  [doc]https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html