微信分享的坑

微信分享 + 支付宝分享

share.js

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import store from '../store';

/**
* @param {Object} config 传入的配置
* 标题: title
* 内容: content
* 图片: img
* 链接: url
*/
const share = config => {
// 判断环境
const browser = store.getters.browser
if (browser === 'wechat') {
wx.ready(() => {
wx.updateAppMessageShareData({
title: config.title || '',
desc: config.content || '',
imgUrl: config.img || '',
link: config.url || '',
success: () => {
console.log('微信分享设置成功')
}
})

// IOS要用这个
wx.onMenuShareAppMessage({
title: config.title || '',
desc: config.content || '',
link: config.url || '',
imgUrl: config.img || '',
success: () => {
console.log('微信分享2设置成功')
}
});
})
} else if (browser === 'alipay') {
ap.share({
title: config.title || '',
content: config.content || '',
image: config.img || '',
url: config.url || '',
captureScreen: false,
showToolBar: false
}, () => {
console.log('支付宝分享设置成功')
})
}
}

export default share

分享后会在链接插入一些东西,如果路由用的Hash模式需要做类似下面的处理

1
2
3
if (location.href.indexOf('?from=singlemessage') >= 0) {
location.href = location.href.replace(/\?from=singlemessage/, '')
}

在dist目录下新建文件 &isappinstalled=0 写入HTML
Hash模式下会定向到 &isappinstalled=0 这个地址下面,做跳转处理

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
location.href = location.href.replace(/&isappinstalled=0/,'')
</script>
</head>
</html>