微信容器h5开发模拟微信h5搭建

转载

mob64ca14010a69 2024-04-16 22:00:55

首先要在html文件中引入微信文件，它会暴露出一个全局的对象:wx

<link rel="preload" ,href="//res.wx.qq.com/open/js/jweixin-1.3.2.js" ,as="script" />

其次是init基础配置，比如微信好友/朋友圈分享。这个一般写在全局方法中，一开始就调用。
从后端获取appid 这些数据，目的是安全。

async function weixinConfig() {
  try {
    let res = await request.get(后端接口，{ params: { url: window.location.href } },
    );

    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.appid, // 必填，企业号的唯一标识，此处填写企业号corpid
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.nonce_str, // 必填，生成签名的随机串
      signature: res.data.signature, // 必填，签名，见附录1
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline', //分享到朋友圈
        'onMenuShareAppMessage',// 分享给朋友
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
      ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
  } catch (err) {
    console.log('微信初始化失败', err);
  }
}

然后是在入口页面进行授权操作【总不能每个界面都授权一次把？太慢了】，先判断是否是微信浏览器，

在这之前先说授权流程：会从自己页面跳到一个授权页面，进行授权（用户点击弹窗同意，当然有个静默授权，无需操作），授权后会跳回来你自己的页面，此时你的url上面会多一个?code=071zrs000NyXKL1X6R100gYx0k4z&state=STATE这个code只能用一次或者5分钟后自动失效，你拿着071zrs000NyXKL1X6R100gYx0k4z请求后端接口，获取用户信息。

所以你需要截取url保存code，然后请求接口，请求失败就是不正确/使用过，需要重新授权。

if (微信环境？) {
      if (有code？) {
        let res = await wxAuthLogin({ code:code });
        // code不正确或已使用过，重新请求授权
        if (!res.success) {
          this.wxAuth();
        }
      } else {
        // 请求授权
        this.wxAuth();
      }
    } else {
    	console.log('请在微信环境中打开'
    }

这一步讲怎么发起授权：就一步，跳到某个链接就发起授权了

window.location.replace(
        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`,
      );

这里要说三个点:

appid: 通过文章开头，全局存起来
redirect：这是授权后重定向回来的地址，就是你的地址，并且微信会给你的地址多补上code=xxx&state=STATE。code就是你这步最终要拿到的东西。当然这个地址是要经过转义编码的，浏览器会其自动解码的。
const redirect = window.encodeURIComponent(window.location.href);
scope：有两种情况，官方这么说的

微信容器h5开发模拟微信h5搭建_端接