微信公众号网页开发调试流程

        开发前，可以先到官方文档上查看微信公众号的注册等相关流程，了解微信公众号相关的准备内容：1开启公众号开发者模式 | 微信开放文档

  一、测试账号的申请

        先申请一个测试账号，方便开发网页时在本地微信开发者工具中调试，测试账号的申请地址：微信公众平台

       

二、开始开发 — 授权

测试账号申请完毕，基本上可以开始网页相关的开发了(不用测试账号也行，就是频繁发布有点费时)，微信网页开发根据自己需求来，比如需要用户访问的时候完成相关的授权工作等：网页授权 | 微信开放档

根据需求采用相关的授权方式，因为我只需要一个openid作为标识，从而实现静默登录

function authorize() {
  var redirect_uri = '完成授权的回调地址';
  var appid = '公众号AppId';
  window.location = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
};

// 在网页调用这个授权方法，回调之后的网址大概就是
// redirect_uri/?code=xxxxxxxxxx&state=STATE
// 直接从回调之后的url中获取code即可

测试阶段可以直接使用axios直接向一下地址发送请求，但线上环境是不行的，具体可查看文档

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

地址发送get请求获取到相关相关信息如openid等（记得将appid、secret替换成申请的测试账号信息，并将CODE替换成上一步获取到的code）

三、使用微信公众号相关接口——JS-SDK的引入

JS-SDK说明文档直通车: 概述 | 微信开放文档

在JS-SDK说明文档中的第  步骤三：通过config接口注入权限验证配置 中的配置信息获取过程

第一步： 发送请求获取access_token 将appid以及appSecret换成自己的测试账号即可
axios({
        url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${appSecret}`
    }).then(res=>{
  accesstoken = res.data.access_token  

})

第二步：用第一步获取到的access_token
 axios({
            url: `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${accesstoken}&type=jsapi`
        }).then(res => {
            ticket = res.data.ticket

            var str1 = `jsapi_ticket=${ticket}&noncestr=${noncestr}&timestamp=${timestamp}&url=${url}`
            var signature = CryptoJS.SHA1(str1).toString();
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: homeStore._AppId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: noncestr, // 必填，生成签名的随机串
                signature: signature,// 必填，签名
                jsApiList: ['scanQRCode','chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
            });
})

当以上代码执行完毕之后再微信开发者工具中看到如下图的提示则表示注入成功

 

这时就可以在相关页面中调用注册的方法了。