微信公众号网页开发

公众号

为识别用户，每个用户对每个公众号有一个唯一的OpenID，如果要在多个公众号、移动应用之间做用户互通，则需前往开放平台，将它们绑定到同一开放平台账号下，绑定后，一个用户虽然对多个公众号和应用有多个不同的OpenID，但是只有一个唯一的UnionID，可以通过获取 用户信息 中的 UnionID 来区分用户的唯一性。

公众号主要通过 公众号消息会话 和 公众号内网页 来为用户提供服务。

公众号分为 订阅号、服务号 和 企业号。

订阅号 和 服务号 的区别：

1. 功能使用：服务号比订阅号可使用的更多的功能，订阅号只能使用大部分功能，已认证的服务号可使用全部功能；
2. 群发消息的能力：订阅号每天可以发送一条群发消息，服务号为每月4次；
3. 适用群体：订阅号适用于个人和媒体，服务号适用于企业、政府或其他组织；

获取access_token

access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。
这里access_token的获取只需服务端调用微信接口获取并存储即可，无需前端通过接口调用。

网页授权

网页授权流程（详细流程可查看 微信公众号开发文档），以Vue项目为例：

1. 初次进入页面时先访问微信授权页面进行授权，获取code；

export function weChatConfig({
  timestamp,
  nonceStr,
  signature
}) {
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: process.env.VUE_APP_APPID, // 必填，公众号的唯一标识
    timestamp, // 必填，生成签名的时间
    nonceStr, // 必填，生成签名的随机串
    signature, // 必填，签名
    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'chooseWXPay'], // 必填，需要使用的JS接口列表
  });
}

注意：

• 由于同一个开放平台可绑定多个移动应用，一个用户对多个公众号或移动应用有多个openid，因此openId建议使用sessionStorage进行存储，而不使用localStorage；
• 测试帐号只能对关注者网页授权，因此在使用测试账号扫码直接进入网页进行授权时，会出现未关注测试号微信登录失败的弹窗提示，正式帐号可以对未关注者授权，因此可以忽略此问题；
  
  

  image.png

2. 授权成功，通过code换取网页授权access_token和openid：
   这里通过code换取的是一个特殊的网页授权access_token，与基础支持的access_token不同（该access_token用于调用其他接口，区别可查看获取基础access_token），如果网页授权的作用域为snsapi_base，则本步骤中获取到网页授权access_token的同时，也获取到了openid。
   由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

测试号申请

扫码 公众平台测试号申请，填写相应的配置：

image.png

注意：

1. 这里的URL，需要服务端提供一个完整的接口路径；
2. 为方便调试，JS接口安全域名支持配置本地IP地址，但访问页面时的端口号必须是80端口，否则在页面进行授权时会报redirect_uri参数错误；

module.exports = {
    devServer: {
        port: 80 // 指定端口号为80端口
    }
};

3. 配置授权回调页面域名：

   
   
   

   image.png

   此处同样支持配置本地IP地址，但端口号也只能是80端口

微信公众平台接口调试工具

利用 微信公众平台接口调试工具 进行相关的配置。

image.png

access_token由服务端提供。

image.png

微信浏览器缓存清理

微信浏览器是在webview的上层做的缓存：如果请求过了这个地址，就会存在本地，之后不取线上了。因此在做公众号网页开发时经常要做浏览器缓存的清理：

1. 用微信内置浏览器打开这个网页debugx5.qq.com或http://debugtbs.qq.com/；

2. 勾选相应的缓存清理

   
   
   

   image.png