单页面应用微信公众号开发

最近一年开发的项目都是微信公众号相关的，遇到了很多坑，没有发现一个相对来说完整的文档，因此自己记录一下，欢迎大家补充。

获取用户的唯一标识

    在用户与公众号产生消息交互后，公众号可获得用户的openid(加密后的微信号，每个用户对每个公众号的openid是唯一的，不同公众号，同一用户的openid不同)

    如果开发者想要把多个公众号、移动应用、小程序之前做账号的统一，则需要UnionID机制

    不管是获取openid还是unionid，前端和微信的交互流程都是一样的, 前端就直接在router.beforeEach中去判断就可以

      

1. 静默授权

       即用户无需关注 ，无需手动点击授权进入页面自动跳转到回调页，即可拿到用户的openid，用户的感知就是直接进入了回调页,scope 为 snsapi_base

2. 用户手动授权

     获取openid是需要用户手动授权方可获取，拿到openid可以换取unionid,scope为snsapi_userinfo

     注意：对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知

 // appid 公众号的appid
 // redirect_uri 指的是在微信公众号后台 公众号设置-网页授权域名的回调中配置的
 // url 后端获取到openid后, 需要重定向到前端的url地址，如果地址是hash模式，则"#"需要用特殊字符代替，后端拼接后回跳
// scope snsapi_base为静默授权，即用户进入接口拿到openid   snsapi_userinfo需要用户手动授权才可以，不仅可以拿到openid，可以拿到用户的Unionid
 window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=${url}#/wechat_redirect`

前端获取openid的方法：

1. 将openid作为参数拼接到重定向的url中，尽管前端可以拿到，但是也有一定的问题

         弊端：但是url中拼接用户的openid有一个弊端，就是当用户把带openid的链接分享给别人，当别人进来是不会重新获取的           openid的

        解决办法：在带有openid的页面，隐藏微信的分享和复制链接的功能，但是如果用户有企业微信，依旧可以拿到该链接

    2. 将openid作为参数拼接到重定向的url中，尽管前端可以拿到，但是也有一定的问题

         后端获取到openid后直接打在cookie，然后重定向

        前提：前后端需要同一个域或者是有同一个父域，前后端需要约定好openid的字段名

jssdk功能

      分享：如果需要每个页面都需要分享自定义的图片和标题，则需要每次都调用wx.config注入一下该页面的配置信息

      其他jssdk功能：需要在wx.config中注册