a coder's diaries

0%

微信网页授权、分享与测试环境搭建

发表于 分类于

背景：微信JS-SDK开发H5页面，使用了微信授权和分享功能。代码库使用Vue的基础配置。本文主要分享以下几个方面的正确打开方式:）

  • 微信分享与QQ分享
  • 微信网页授权
  • 微信浏览器兼容
  • 其他问题

一、网页分享

1，微信分享，参考微信JS-SDK说明文档

step1. 把分享链接的域名填入公众号JS安全域名里

step2. 引入微信1.3.2基础库（此库升级后分享功能会受影响）：

step3. 封装config方法

step4. 配置微信分享代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let config = {
  title: '',  // 分享标题
  desc: '',  // 分享描述
  link: '',  // 分享链接
  imgUrl: '', // 分享图标
  success: function () {
    // 用户确认分享后执行的回调函数
  },
  cancel: function () {
    // 用户取消分享后执行的回调函数
  }
}

this.addShareInfo(config)

addShareInfo(config) {
  if (!!window.wx) {
    wx.ready(() => {
      wx.onMenuShareTimeline(config);
      wx.onMenuShareAppMessage(config);
      wx.onMenuShareQQ(config);
      wx.onMenuShareQZone(config);
    });
  } else {
    setTimeout(() => {
      this.addShareInfo();
    }, 100);
  }
}

step5. 上线测试，由于微信环境的限制，只能在线上测微信分享

2，QQ分享相对简单一些，参考对外分享组件接口文档

step1. 引入分享组件

step2. setShareInfo一个方法搞定

1
2
3
4
5
6
setShareInfo({
  title: '', // 分享标题
  summary: '', // 分享描述
  pic: '', // 分享图标
  url: '', // 分享链接，必须与页面URL同一域名，否则设置不生效。         
});

需要注意的是，QQ和微信使用的key是不一样的，而且QQ的summary不能为空，否则失效。

step3. 测试。借助Ngrok，可以在本地测试QQ分享功能。Ngrok文档里有详细使用方法，将内网映射到外网，并且生成一个域名。这个文档版本是免费的，正式版本需要付费。

二、微信网页授权

step1. 把回调域名填入公众号的“网页授权获取用户基本信息”配置选项中，该公众号必须是服务号。

step2. 下载微信web开发者工具。最新版虽然可以调试小程序和公众号网页，但是无法连接真机调试。所以要用0.7.0版本，在文档里可找到下载地址。

step3. 根据开发者文档，调起静默授权或者用户信息授权

step4. 本地调试。由于回调域名必须是个正式域名，这里我们需要准备的有：Fiddler、一个可用域名。

首先，打开Fiddler，选择Tools–>Hosts，弹出Host Remapping，在里面填入“自己起的服务，空格，准备的可用域名”，例如：

192.168.0.0:80 www.baidu.com

然后勾选Enable，点击Save。

如同配置系统的hosts文件一样，可将线上地址指向自己的服务器，而且Fiddler的有点是可以加端口号。如果使用的其他工具例如Charles不能写端口号的，可以把自己的服务改成80端口。

接着开启代理，Tools–>Options–>Connections，默认是8888端口。系统代理也会改变。

打开微信web开发者工具，如果有弹框是否信任代理，选择信任。调试真机，可用开发者工具默认9973端口号的代理，或者Fiddler的代理。

最后访问准备的域名，就可以调试本地代码起的服务了。

需要注意的是，授权接口传的redirect_uri在本地测试时要用准备的域名才能跳转正确。授权用户信息之后，微信不能清除授权缓存，失效之前，不会再弹授权框。

三、微信浏览器兼容

1，不支持location.reload()

解决方法：判断如果是微信浏览器，使用window.location.href跳转，并在链接上加一个随机数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let isWeixin = function() {
  let ua = navigator.userAgent.toLowerCase();
  return ua.match(/MicroMessenger/i) == "micromessenger";
};
if (isWeixin) {
  let random = Math.floor(Math.random() * 10000 + 1);
  url = decodeURI(location.href);
  if (url.indexOf("?") < 0) {
     url = url + "?random" + random;
  } else {
    url = url.substr(0, url.indexOf("?random")) + "?random" + random;
  }
  window.location.href = url;
}

2，setTimeout 做计时器不准确

解决方法：用setTimeout做毫秒级的计时器时，时间有偏差，由于不能及时处理，导致时间延长，所以改成秒级计时器。

3，setTimeout 递归调用引起内存泄露

解决方法：调完后使用clearTimeout及时回收

四、其他问题

1，iOS设备不会自动加载audio文件，这是由于iOS系统限制，用户不操作不允许自动播放音频。

解决方法：监听微信JS-SDK的ready事件，然后再触发音频播放

1
2
3
4
5
document.addEventListener("WeixinJSBridgeReady", () => {
  if (!!this.isMusicPlay && !this.isAndroid) {
    audio.play();
  }
},false);

2，有些用img引用的图片，会变成base64不显示。未解之谜，暂时改成背景图片。

3，生成图片时，如果有图片，为了保证显示顺序，图片要放在new Image的onload事件里。当所有异步完成后再用toDataURL(“image/png”)。如果图片有透明背景，一定要用‘image/png’参数。