微信公众号开发

开发文档

注意事项

1、微信公众平台开发是指为微信公众号进行业务开发，为移动应用、PC 端网站、公众号第三方平台（为各行各业公众号运营者提供服务）的开发，请前往微信开放平台接入。

2、在申请到认证公众号之前，你可以先通过测试号申请系统，快速申请一个接口测试号，立即开始接口测试开发。

3、在开发过程中，可以使用接口调试工具来在线调试某些接口。

4、每个接口都有每日接口调用频次限制，可以在公众平台官网 - 开发者中心处查看具体频次。

5、在开发出现问题时，可以通过接口调用的返回码，以及报警排查指引（在公众平台官网 - 开发者中心处可以设置接口报警），来发现和解决问题。

6、公众平台以 access_token 为接口调用凭据，来调用接口，所有接口的调用需要先获取 access_token，access_token 在 2 小时内有效，过期需要重新获取，但 1 天内获取次数有限，开发者需自行存储，详见获取接口调用凭据（access_token）文档。

7、公众号页面上只可以向80或443 端口的后台服务接口发出请求。后台服务向公众平台接口请求无限制，但必须能够访问微信平台https://api.weixin.qq.com。**也就是说公众号页面上和后端交互的接口地址格式必须是 http://域名/接口地址 或者 https://域名/接口地址**

8、服务地址为域名、IP地址均可【加入白名单】；http、https 均可

基础

微信公众号分为订阅号、服务号和小程序 3 种，应用场景不同，能力依次增强
1. 订阅号：为媒体和个人提供一种新的信息传播方式，构建与读者之间更好的沟通与管理模式
  - 不支持：获取用户地理位置、网页授权获取用户openid/用户基本信息
  - 自定义菜单也不支持配置外部链接地址，只能是公众平台已发布的文章或素材链接地址
  - 支持每天群发一条消息
2. 服务号：给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台
  - 支持每月群发4条消息
3. 企业微信：企业微信是一个面向企业级市场的产品,是一个独立APP好用的基础办公沟通工具,拥有最基础和最实用的功能服务,专门提供给企业使用的IM产品。(适用于企业、政府、事业单位或其他组织)
4. 小程序：一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验
5. 订阅号和服务号中都可以申请开通小程序自定义菜单中可以配置小程序
不同的公众号类型具备不同的接口权限

https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html
OpenID 是对『微信应用』的用户唯一值，同一个『微信开发者账号』下的不同应用中，使用同一个『微信用户』登录，此值会不一样

UnionID 是针对『微信开发者账号』的用户唯一值，同一个『微信开发者账号』下的不同应用中，使用同一个『微信用户』登录，此值是一致的

准备工作

注册微信公众号

如果还未注册微信公众号，打开官方注册地址：https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN，点击「服务号」，使用邮箱注册
如果已经有微信公众号，打开官方登录地址：https://mp.weixin.qq.com/?token=&lang=zh_CN

使用账号登录或微信扫码登录

添加运营者【开发人员】

登陆微信后台，左侧设置-人员设置，运营者管理-点击「绑定运营者微信号」，选择长期，输入微信号【开发人员提供】，邀请绑定

获取 AppID 和 AppSecret，提供给开发人员

登陆微信后台，开发-基本配置，如果是新申请的微信公众号，会提示让开通成为开发者，点击同意开通即可。开通之后可以直接看到开发者 ID。点击开发者密码（APPSecret）后面的 “启用”，管理员微信扫码验证通过后，可以看到 AppSecret

小程序管理

登陆微信公众号后台 - 广告与服务-小程序管理

可关联或快速创建小程序，已关联的小程序可被使用在图文消息、自定义菜单、模板消息和附近的小程序等场景中。

公众号可关联10个“同主体或关联主体”的小程序，3个“非同主体”小程序

小程序 web-view 组件 src 指向网页的链接，如果是某公众号的文章，可以在该公众号后台关联当前小程序，来支持小程序打开关联公众号的文章

网页授权

关于特殊场景下的静默授权

以 scope 为 snsapi_base 的网页授权：静默授权，获取到用户的 openid，然后自动跳转到回调页面，用户无感知
以 scope 为 snsapi_userinfo 的网页授权：已关注公众号的用户，也是静默授权，用户无感知；未关注公众号的用户，则需要用户手动同意，才能获取用户的基本信息「推荐」

网页授权流程分为四步：

1、引导用户进入授权页面同意授权，获取 code

2、通过 code 换取网页授权 access_token（与基础支持中的 access_token 不同）

3、如果需要，开发者可以刷新网页授权 access_token，避免过期

4、「如果网页授权作用域为 snsapi_userinfo」通过网页授权 access_token 和 openid 获取用户基本信息（支持 UnionID 机制）

开发环境

内网穿透工具：参考 NATAPP配置，获取域名
测试号配置——https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
- appID 和 appsecret 配置到项目 wx.properties 相关配置项中
- 接口配置信息：http://域名/项目路径/checkIn/checkIn.do 「验证服务器」
- JS 接口安全域名：域名
- 网页账号-网页授权获取用户基本信息：域名

菜单配置：使用微信公众平台接口调试工具

注意：1. 同一个注册地址URL不能出现在多个公众号菜单中

获取、创建、删除菜单，菜单中注册路径使用正确域名

创建菜单

参考 https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Personalized_menu_interface.html

{
        "button": [
            {
                "name": "随手拍", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "我要举报", 
                        "url": "http://wangwz.natapp1.cc/scm-web/oauth2/oauth2buildAuthor.do?page=addevent", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "举报查询", 
                        "url": "http://wangwz.natapp1.cc/scm-web/oauth2/oauth2buildAuthor.do?page=eventSearch", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "诉求咨询", 
                        "url": "http://wangwz.natapp1.cc/scm-web/oauth2/oauth2buildAuthor.do?page=appeal", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "我的诉求", 
                        "url": "http://wangwz.natapp1.cc/scm-web/oauth2/oauth2buildAuthor.do?page=myAppeal", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "我的积分", 
                        "url": "http://wangwz.natapp1.cc/scm-web/oauth2/oauth2buildAuthor.do?page=myScore", 
                        "sub_button": [ ]
                    }
                ]
            }
        ]
    }

正式环境

微信号管理员登录微信公众号后台——https://mp.weixin.qq.com/
添加运营者「添加微信开发人员的微信号」

设置-人员设置-运营者管理-点击「绑定运营者微信号」，选择长期或短期「一个月」，输入微信号，邀请绑定。微信号持有者在微信 APP 中同意即可加入
添加授权微信网页调试的开发者「添加微信开发人员的微信号」，方便开发者在「微信开发者工具」中调试页面

参考：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Web_Developer_Tools.html#调试微信网页授权
1. 开发者微信先关注「公众平台安全助手」公众号
2. 开发-开发者工具-web 开发者工具-绑定开发者微信号-邀请绑定，如果提示「该微信用户未关注“公众号安全助手”，无法接收邀请，请先关注后再绑定」，则表示第一步开发者没有完成，可通知开发者关注公众号。关注后，再次邀请
获取开发者 ID(AppID) 、开发者密码 (AppSecret)
1. 在左侧找到 “开发 — 基本配置”，如果是新申请的微信公众号，会提示让开通成为开发者，点击同意开通即可
2. 开通之后可以直接看到开发者 ID
3. 点击开发者密码（APPSecret）后面的 “启用”，需要微信公众号的管理员进行验证，才能查看开发者密码。管理员验证通过后，查看到开发者密码
4. 将开发者 ID(AppID) 、开发者密码 (AppSecret)提供给运营者「运营者无法直接看到开发者密码」
配置 wx.properties 文件
- appId、appSecret 由微信管理员提供
- token 自己指定即可
- aesKey 可以为空，表示不加密
- destUrl 为项目地址，域名为正式域名，端口为 80
配置域名「运营者操作」
1. 设置 — 公众号设置 — 功能设置，点击业务域名最右侧的「设置」
2. 下载校验文件（txt 格式的），下载之后，上传到应用服务器上，放在 Tomcat—webapps—ROOT 文件夹下（如果 webapps 下没有 ROOT 文件夹，可新建一个 ROOT 文件夹，ROOT 要大写）
3. 填写域名，点击保存，提示保存成功，则业务域名绑定成功
4. 设置「JS 接口安全域名」和「网页授权域名」，不需要下载 txt
5. 功能-自定义菜单-菜单中路径域名改为正式域名

杂项

自定义菜单与接口配置菜单的关系

简单模式：自定义菜单，微信公众号后台自带功能

增强模式：通过接口配置菜单，启用「开发-基本配置-服务器配置」，禁用「自定义菜单」。通过微信提供的接口调试工具也可以配置该菜单，但获取 token 时可能需要将操作主机接入公网的 IP 加入到白名单，需管理员通过

以上两种菜单，只能二选一

IP 白名单

通过开发者 ID 及密码调用获取 access_token 接口时，需要设置访问来源 IP 为白名单
开发-基本配置-公众号开发信息-IP 白名单，需要管理员「或长期运营者」通过

项目

maven 引入依赖

<dependency>
  <groupId>com.soecode.wx-tools</groupId>
  <artifactId>wx-tools</artifactId>
  <version>2.1.4-RELEASE</version>
</dependency>

wx.properties

#测试
wx.appId=wxbcb076b53ecd69b0
wx.appSecret=be4ada6c0a205409e3d9274374080a34
wx.token=hingesoft
wx.aesKey=
wx.destUrl=http://mau56w.natappfree.cc/scm-web/

#正式
#wx.appId=wxc182e8edfd4b7c64
#wx.appSecret=b34419838c36ef79b81bb57c34c60a89
#wx.token=hingesoft
#wx.aesKey=
#wx.destUrl=http://lz.bjtcrj.com/scm/

wx.eventAddUrl=addevent
wx.eventSearchUrl=eventSearch
wx.myScoreUrl=myScore
wx.appealUrl=appeal
wx.myAppealUrl=myAppeal

#正式：微信公众号后台-自定义菜单配置
#案件上报： http://域名/项目名称/oauth2/oauth2buildAuthor.do?page=addevent
#案件查询： http://域名/项目名称/oauth2/oauth2buildAuthor.do?page=eventSearch
#我的积分： http://域名/项目名称/oauth2/oauth2buildAuthor.do?page=myScore
#诉求咨询： http://域名/项目名称/oauth2/oauth2buildAuthor.do?page=appeal
#我的诉求： http://域名/项目名称/oauth2/oauth2buildAuthor.do?page=myAppeal

前端

weui

https://github.com/Tencent/weui/wiki

weui.js

weui 的轻量级 js 封装 https://github.com/Tencent/weui.js

注意：由于微信小程序不支持 dom 操作，所以 weui.js 并不适用于小程序。不过 WeUI 也为小程序开发了另外的版本

功能演示：https://weui.io/weui.js

API文档：weui.js/docs at master · Tencent/weui.js · GitHub

JS-SDK

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

获取页面调用 JS SDK 签名认证

前端

function config(apiList) {
  $.get("/jeecg-boot/wx/jsApiList", {
    url: window.location.href,
    apis: apiList
  }, function (data, status) {
    if (status === "success") {
      wx.config({
        debug: true, // 开启调试模式，调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
        appId: data.appid, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.noncestr, // 必填，生成签名的随机串
        signature: data.signature,// 必填，签名，见附录 1
        jsApiList: data.jsApiList// 必填，需要使用的 JS 接口列表，所有 JS 接口列表见附录 2
      });
    }
  }, "json");
}

config([
  'getLocation'
]);

后端

@GetMapping(value = "/jsApiList")
public WxJsapiConfig jsApiList (@RequestParam String url, @RequestParam("apis[]") List<String> apis) {
  try {
    //把config返回到前端进行js调用即可。
    WxJsapiConfig config = wxService.createJsapiConfig(url, apis);
    log.info(config.toString());
    config.setAppid(WxConfig.getInstance().getAppId());
    return config;
  } catch (WxErrorException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
  }
  return null;
}

处理图片数据为 base64

wx.chooseImage 获取到的图片为一个临时路径，微信同时提供了 wx.getLocalImgData 方法可以把获取到的路径转为 base64 格式的数据，至此就可以轻松许多了，但是转出来的 base64 在 android 和 iOS 中稍有不同，需要特别注意一下

wx.getLocalImgData({
    localId: req.localIds[0].toString(),
    success: function (res) {
        const localData = res.localData;
        let imageBase64 = '';
        if (localData.indexOf('data:image') == 0) {
            //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
            imageBase64 = localData;
        } else {
            //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
            //此时一个正常的base64图片路径就完美生成赋值到img的src中了
            imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
        }
    }
});

WeixinJSBridge

//关闭当前页面
WeixinJSBridge.call('closeWindow');

//对比：JS-SDK
//需要引入微信的 js-sdk ,需要配置认证信息
wx.closeWindow();

//隐藏右下面工具栏
WeixinJSBridge.call('hideToolbar');

//显示右下面工具栏
WeixinJSBridge.call('showToolbar'); 

//隐藏右上角三个点按钮
WeixinJSBridge.call('hideOptionMenu'); 

//显示右上角三个点按钮
WeixinJSBridge.call('showOptionMenu'); 

//还提供一些高级功能功能，比如分享等
WeixinJSBridge.invoke

后端

~~Wx-tools——https://antgan.gitbooks.io/wx-tools/content/~~

微信开发者工具

参考

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Web_Developer_Tools.html

准备「正式微信号，开发人员强烈注意。测试微信号不用」

开发者微信先关注「公众平台安全助手」公众号
微信公众号管理员登录后台-开发-开发者工具-web 开发者工具-绑定开发者微信号-邀请绑定，如果提示「该微信用户未关注“公众号安全助手”，无法接收邀请，请先关注后再绑定」，则表示第一步开发者没有完成，可通知开发者关注公众号。关注后，再次邀请

功能

使用自己的微信号来调试微信网页授权

1. 手机端微信扫码微信开发者工具登录调试的微信公众号

2. 手机端微信关注公众号或测试公众号

3. 微信开发者工具选择公众号网页，地址栏输入菜单地址「需要调试的网页地址」
调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出
使用基于 weinre 的移动调试功能（仅 0.5.0-0.7.0 版本支持），支持 <a href=”http://x5.tencent.com/guide?id=4000"X5 Blink 介绍 “”target=”_blank”>X5 Blink 内核的远程调试
利用集成的 Chrome DevTools 协助开发

下载

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Web_Developer_Tools.html#5