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’参数。