作用及系统

公众号的作用

以联系人形式存在的，提供资讯和服务的平台

账号系统：

OpenID 和 UnionID

graph TD
开放平台账号-UnionID --> 公众号1-OpenID1
开放平台账号-UnionID --> 公众号2-OpenID2
开放平台账号-UnionID --> 公众号3-OpenID3

token系统：

微信服务api的，接口调用凭据

access_token：

公众号的全局唯一接口调用凭据，7200秒有效期，有获取次数限制，需要后端中控服务器缓存和刷新（主要后端使用的）

ac次数.png

jsapi_ticket：

公众号用于调用微信JS接口的临时票据，7200秒有效期，有获取次数限制，需要后端中控服务器缓存和刷新（前端使用，启用微信SDK的配置时，也需要这个票据，生成signature签名）

获取jsapi_ticket次数.png

网页授权access_token：

公众号可以获取到一个网页授权特有的接口调用凭证，7200秒有效期，无次数限制，用来换取OpenID的，每次调用后端接口时带上OpenID，告诉后端你是谁
前端只需要网页授权登录时获取到code（只能使用一次）
后端根据code => 网页授权access_token 和 OpenID

授权次数.png

后端的工作：

给用户提供消息服务

消息服务类型：

1.群发消息，订阅号为每天1次，服务号为每月4次
2.回复消息，用户消息 =》 微信服务器 =》 开发者服务器（开发者服务器对消息进行处理）
3.客服消息，用户发消息/触发特定行为，开发者可以在一段时间内调用客服接口，给用户发送多条消息
4.模板消息，发送模板通知

前端的工作：

整个公众号的界面，以及回复消息和前端都没有任何关系，前端主要负责跳转到的H5授权页面

公众号的配置：

设置与开发/公众号设置/功能设置 => 安全域名、网页授权域名的配置
开发者工具/web开发者工具 => 绑定开发者工具号（强烈建议使用微信开发者工具调试，有些报错可以在上面看到）

网页授权域名如果是https,则引入SDK一定也要使用https的资源，否则SDK引入失败，在开发者工具上可以很容易看到报错，手机调试则不一定 公众号授权域名配置.png 公众号web开发工具的账号绑定.png

微信网页开发：

网页授权：

目的：获取OpendID
流程：
    打开授权登录的链接
    const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(RedirectUrl)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
    window.location.replace(url);
    授权成功后，页面将跳转回重定向的页面，带上code参数
    redirect_uri/?code=CODE&state=STATE
    获取code并，给到后端，换来OpenID
    其实后端也就时调用了 https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code接口
    获取网页授权access_token和OpenID（附带获取）

授权链接产生的BUG：使用微信授权链接，在IOS手机上，会产生一个多余的页面即授权跳转前的页面

当前解决方案A：

专门做一个授权跳转过渡页，微信授权后重定向到其他页面，过渡页可以加上提示和关闭浏览器
优点：页面层次更加清晰，方便抽离授权逻辑,单独写授权页面UI
缺点：没有在全局入口，使用微信授权链接，子页面直接访问时，没有微信授权，故每次必须进入过渡页面，然后再跳转，有直接去子页面的要求时，需要加上pathName参数

授权页 授权页.png 授权页面的逻辑 1.过渡页面的授权逻辑.png 目的页面获取OpenId（方法现在store里面） 2.目的页面获取OpenId.png

解决方案B：

在全局入口router组件内，使用微信授权链接，重定向回当前页面，同时router中的路由组件，只有获取到openId后才去展示，获取之前，使用提示信息
优点：
    全局入口做了，微信授权链接，所有子页面都自动微信授权，不要配置pathName参数
缺点：
    1.直接在router中，在授权跳转前/openId未获取到前，混入过渡页面提示
    2.需要SDK的功能去掉刷新功能，因为刷新router的过渡页面提示时，openId获取到了，会导致展示跳转后的页面，出现2个相同的页面

授权时全局入口的逻辑 1.授权时全局入口的逻辑.png 授权时全局入口的页面展示逻辑 2.授权时全局入口的页面展示逻辑.png

配置SDK：

引入SDK：
    https://res.wx.qq.com/open/js/jweixin-1.6.0.js（如果授权网页域名是https一定要用https的路径）
获取签名：
    1.获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）
    https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
    2.获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）
    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
    3.获取签名的参数：
        noncestr=Wm3WZYTPz0wzccnW
        jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
        timestamp=1414587457（时间戳只能10位，需要截取）
        url=http://mp.weixin.qq.com?params=value（获取路由前面的路径：window.location.href.split("#")[0]）
        拼接成 => string1 =  `jsapi_ticket=${jsapi_ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`
    4.获取签名signature（sha1加密）
        引入：import SHA1 from "crypto-js/sha1";
        使用：signature = SHA1(string1).toString()（需要toString()一下）

签名校验工具 签名校验工具.png 第1、2步，后端接口处理，直接返回jsapi_ticket，后端维护好这个票据

启用SDK的config：

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

SDK的config状态：

config成功：wx.ready(function(){}
config失败：wx.error(function(res){}
判断接口的支持：wx.checkJsApi({jsApiList: ['chooseImage'],success: function(res) {},fail: function(error) {}

接口调用：

wx.closeWindow(); // 这个引入SDK可以直接用
wx.chooseImage(); // 选择图片

前端公众开发经验总结