2018.12.24迭代上线,本次迭代主要做了一个活动页面,并且需要调用企业微信的分享功能分享出去.

本次难点:

1.活动页在react项目的src目录外,需要重新配置一个webpack

2.调用企业微信的分享接口

解决办法:

1.老大帮忙配置了一下webpack,但是需要把webpack的学习提上日程了

2.调用企业微信的分享   https://work.weixin.qq.com/api/doc#90000/90136/90490

a.分享到朋友圈

1. wx.onMenuShareTimeline({
2. title: '', // 分享标题
3. link: '', // 分享链接
4. imgUrl: '', // 分享图标
5. success: function () {
6. // 用户确认分享后执行的回调函数
7. },
8. cancel: function () {
9. // 用户取消分享后执行的回调函数
10. }
11. });

b.分享到微信

1. wx.invoke(
2. "shareWechatMessage", {
3. title: '', // 分享标题
4. desc: '', // 分享描述
5. link: '', // 分享链接
6. imgUrl: '' // 分享封面
7. }, function(res) {
8. if (res.err_msg == "shareWechatMessage:ok") {
9. }
10. }
11. );

c.分享到企业微信

1. wx.invoke(
2. "shareAppMessage", {
3. title: '', // 分享标题
4. desc: '', // 分享描述
5. link: '', // 分享链接
6. imgUrl: '' // 分享封面
7. }, function(res) {
8. if (res.err_msg == "shareAppMessage:ok") {
9. }
10. }
11. );

坑: 分享的路由中要携带一些参数,这些参数的value有对象和中文,因此传参的时候需要先encodeurl一下,变成URL编码,分享后企业微信才可以打开,如果没有encode,企业微信无法打开分享的页面.

3.移动端的点击与长按事件

Question: 一个二维码,点击的时候要可以跳转,长按要可以识别.  div注册点击事件以后,长按的时候也会触发点击事件

Answer:

首先,移动端不用click事件,而用touch和tap事件.

其次,因为一个对象被触发的时候要分两种情况,所以选择用touchstart和touchend来解决

代码: 

// 二维码注册点击跳转事件,触发开始与结束的时间差,时间差小于500页面跳转,时间差大于500长按识别

let startTime;

let endTime;

let touchTime;

qrcodeWrap.addEventListener('touchstart', () => {

startTime = new Date();

});

qrcodeWrap.addEventListener('touchend', () => {

endTime = new Date();

touchTime = endTime - startTime;

if (touchTime < 500) {

window.location.href = qrcodeUrl;

} else {

// Donothing 企业微信和微信会弹窗识别二维码

}

});