公众号
为识别用户，每个用户对每个公众号有一个唯一的OpenID，如果要在多个公众号、移动应用之间做用户互通，则需前往开放平台，将它们绑定到同一开放平台账号下，绑定后，一个用户虽然对多个公众号和应用有多个不同的OpenID，但是只有一个唯一的UnionID，可以通过获取 用户信息 中的 UnionID 来区分用户的唯一性。
公众号主要通过 公众号消息会话 和 公众号内网页 来为用户提供服务。
公众号分为 订阅号、服务号 和 企业号。
订阅号 和 服务号 的区别：
- 功能使用：服务号比订阅号可使用的更多的功能，订阅号只能使用大部分功能，已认证的服务号可使用全部功能；
- 群发消息的能力：订阅号每天可以发送一条群发消息，服务号为每月4次；
- 适用群体：订阅号适用于个人和媒体，服务号适用于企业、政府或其他组织；
获取access_token
access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。
这里access_token的获取只需服务端调用微信接口获取并存储即可，无需前端通过接口调用。
网页授权
网页授权流程（详细流程可查看 微信公众号开发文档），以Vue项目为例：
- 初次进入页面时先访问微信授权页面进行授权，获取code；
<!-- App.vue -->
<script>
import { weChatConfig } from "utils/weChatConfig";
export default {
async created() {
// 获取url上的参数
const params = getUrlParams(window.location.href);
// 通过是否已经获取到用户openid，或者是url上是否携带了code参数来判断是否需要进行授权操作
// 授权成功页面回调时redirect_uri/?code=CODE&state=STATE会在url上携带相关的参数
if (!getSessionItem(process.env.VUE_APP_STORAGE_OPENID) && !params.code) {
// 授权回调地址需要进行 urlEncode 处理
const backUrl = encodeURIComponent(`${window.location.protocol}//${window.location.host}`);
// 授权成功后可在回调地址中通过state添加参数，最多128字符
const backParmas = JSON.stringify(params);
// process.env.VUE_APP_AUTH_URL = https://open.weixin.qq.com/connect/oauth2/authorize
// 如果无需获取用户信息，此处使用静默授权scope=snapi_base即可
window.location.href = `${process.env.VUE_APP_AUTH_URL}?appid=${process.env.VUE_APP_APPID}&redirect_uri=${backUrl}&response_type=code&scope=snsapi_base&state=${backParmas}#wechat_redirect`;
return;
}
/* 授权完成后可调用服务端接口获取用户openid */
if (params.code) {
// 将授权回调回来的code传给服务端进行openid的获取
const result = await Api.getOpenid({
code: params.code
});
setSessionItem(process.env.VUE_APP_STORAGE_OPENID, result.openid); // 缓存openid
// 调用服务端接口获取签名，进行JS-SDK的初始化
Api.getWechatConfig({
url: window.location.host
}).then(res=> {
const { timestamp, nonceStr, signature } = res.data;
weChatConfig({
timestamp: parseInt(timestamp),
nonceStr,
signature
});
});
}
}
};
</script>
<!-- wechatConig.js -->
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
- 授权成功，通过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
注意：
- 这里的URL，需要服务端提供一个完整的接口路径；
- 为方便调试，JS接口安全域名支持配置本地IP地址，但访问页面时的端口号必须是80端口，否则在页面进行授权时会报redirect_uri参数错误；
<!-- vue.config.js -->
module.exports = {
devServer: {
port: 80 // 指定端口号为80端口
}
};
-
配置授权回调页面域名：
image.png此处同样支持配置本地IP地址，但端口号也只能是80端口
微信公众平台接口调试工具
利用 微信公众平台接口调试工具 进行相关的配置。
image.png
access_token由服务端提供。
image.png
微信浏览器缓存清理
微信浏览器是在webview的上层做的缓存：如果请求过了这个地址，就会存在本地，之后不取线上了。因此在做公众号网页开发时经常要做浏览器缓存的清理：
- 用微信内置浏览器打开这个网页debugx5.qq.com或http://debugtbs.qq.com/；
-
勾选相应的缓存清理
image.png
