记一次微信公众号页面开发

首次做一个公众号网页项目,难免会有一些磕磕碰碰,但项目进展还算顺利,在此记录一下。

我用的框架是Vue。其实开发公众号里面的页面和其他移动端页面(h5)并没有多大不同,和平常是一样的开发方式。不同的地方主要是用户授权、鉴权和一些微信提供的接口 如分享给朋友、到朋友圈设置等。

微信授权有两种,1)一种是静默授权,用户基本无感,能获取到code再获取openId,从而识别用户,2)打开微信授权页面,用户手动同意,还可以获取到用户基本信息。关于微信公众号网页授权的详细,可查看文档

由于项目只需要识别用户,所以静默授权就可以满足项目需求。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的公众号appid&redirect_uri=授权成功后的重定向地址&response_type=code&scope=snsapi_base&state=123#wechat_redirect

静默授权就是请求一个授权链接,请求之后会回到你在授权链接里填的重定向地址,该地址上就携带了code.

 redirect_uri/?code=CODE

我们的业务逻辑大概是这样的:
1.我们用来鉴权的access_token是存在cookies中的,这个方法我们会调用多次可以封装起来,从而复用。

//设置cookies
setCookie(cname, cvalue, exdays, path = '/') {
    const date = new Date();
    date.setTime(date.getTime() + exdays * 24 * 60 * 60 * 1000);
    const expires = `expires=${date.toGMTString()}`;
    document.cookie = `${cname}=${cvalue}; ${expires}; path=${path}`;
 }

//获取cookies
getCookie(cname) {
   const name = `${cname}=`;
   const cookies = document.cookie.split(';');
   for (let i = 0; i < cookies.length; i += 1) {
     const cookie = cookies[i].trim();
     if (cookie.indexOf(name) === 0) {
       return cookie.substring(name.length, cookie.length);
     }
   }
   return '';
}


2.进入页面先判断有没有token,有token且token有效,就去获取用户相关数据,并进行其他操作。token是否有效字段我是通过localStorage存储和改变的,这里面有个小细节需要注意下,token是否有效的字段值我期望是布尔类型,但localStorage都会转为字符串,所以如果判断的时候不JSON.parse解析下,判断的时候就会出问题,因为字符串中除了空字符串其他转化为布尔类型都是true。当然在vue中你也可以使用vuex存放在store中,再通过一些插件把store中数据缓存在本地。
3.没有token或token失效 且没有code就去请求授权接口。这里也有个问题出现了,项目中我们用axios来发送ajax请求比较多,但是一开始我用aixos.get去请求,一直有问题,一时也找不出原因,最后放弃,通过window.loacation.href 去访问授权链接。
4.获取到code后,使用code去调后端接口获取token,写入cookies, 进行其他业务操作。获取url上参数的方法有可能多次调用,我们也可以简单封装下。

getQueryString(name) {
    const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
    const r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
  }
 //先判断有没有token
 //vue中可以在created生命周期钩子中
    const token = utils.getCookie('X-Access-Token') || '';
    const code = utils.getQueryString('code');
    const tokenValid = localStorage.getItem('tokenValid') || 'true';
    if (token && tokenValid === 'true') {
      进行业务操作操作
    } else if ((!token || tokenValid === 'false') && !code) {
      //token不存在或无效且没有code就去调微信授权获取code
      const url = encodeURIComponent(window.location.href);
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_base#wechat_redirect`
    } else if (code) {
      //code存在 用code去调后台登陆接口 获取并更新token
      this._login(code).then(进行业务操作)
    }


5.token失效的时候后端会统一报一个错误状态码,在axios响应错误拦截处,判断失效状态码,把token是否有效字段更新为失效并调微信授权接口重新授权。

 const fetch = Axios.create({
        withCredentials: false,
        baseURL,
        timeout: 20000, 
    });
// 添加响应拦截器
    fetch.interceptors.response.use(function (response) {
        //token有效
        localStorage.setItem('tokenValid', true)
        return response;
    }, function (error) {
        // 对响应错误做点什么
        const { status, data } = error.response;
        switch (status) {
          case 403:
            router.push('/register');
            window.toast(data.error.message);
            break;
          case 401:
          case 412:
            //token字段设为无效
            localStorage.setItem('tokenValid', false)
            const url = encodeURIComponent(window.location.href);
            // 重新授权
            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_base#wechat_redirect`
            break;
          default:
            window.toast(data.error.message)
            return Promise.reject(data);
        }
    });

授权相关基本上就上面那些了。如果我们公众号项目中还需要用到微信提供的js-sdk的话,需要进行一些额外操作。

1.首先你的项目域名必须要先在微信公众平台进行绑定,否则无法使用js-sdk;

2.引入js文件。vue项目的话,在public目录下面index.html文件中通过script标签引入就可以了。

//http https都可以
<script charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

3.在使用的地方进行相应配置。config里面的签名参数,由后端去获取返回。获取签名参数的url必须为当前页面的url,分享链接可以是其他页面的URL。

 wx.config({
    debug: true, // 开启调试模式
    appId: 'xxx', // 必填,公众号的唯一标识
    timestamp: that.signInfo.timestamp, // 必填,生成签名的时间戳
    nonceStr: that.signInfo.noncestr, // 必填,生成签名的随机串
    signature: that.signInfo.sign,// 必填,签名
   jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表
});
wx.ready(function(){
   wx.updateAppMessageShareData({ 
    title: '邀请好友,赢万元红包', // 分享标题
    desc: '新用户提交资料注册成功即可获得万元购物红包', // 分享描述
    link: that.shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: `${that.imgDomain}FlJfZ0rFuXGAeoYprsy735GZTzaB`, // 分享图标
    success: function () {
      window.toast('分享成功', 'txt')
      that.showImg = false;
    }
  })
  wx.updateTimelineShareData({ 
      title: '邀请好友,赢万元红包', // 分享标题
      link: that.shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: `${that.imgDomain}FlJfZ0rFuXGAeoYprsy735GZTzaB`, // 分享图标
          success: function () {
            window.toast('分享成功', 'txt')
            that.showImg = false;
          }
        })
      })

我们项目中分享功能当用户通过分享链接进来,邀请人是能获得相应奖励的。那如何获知用户是通过谁邀请进来的呢?其实很简单,用户在邀请的时候,把该用户标识拼接在分享链接上。其他人通过分享链接进入,获取链接上的用户标识就知道是谁邀请的了。

分享这里也踩了个坑,按照文档使用新的api,updateAppMessageShareData,updateTimelineShareData, IOS分享自定义设置是可以的,但是安卓不起作用,折腾了一会儿,最后换成旧的api, onMenuShareTimeline, onMenuShareAppMessage就可以了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值