P7:react微信分享组件

组件封装及使用

—src
|
—-common
|
———wechat
|
————–share.js
————–wxUtils.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
51
52
53
54
55
export default function Share(config){
    window.wx.config({
        debug: false, // 开启调试模式
        appId: config.appid, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名，见附录1
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
}
Share.prototype = {
    constructor:Share,
    init(config){
        this.imgUrl = config.imgUrl;
        this.link = config.link;
        this.description = config.description;
        this.title = config.title;
        
        window.wx.ready(()=>{
            this.toFriend();
            this.toTimeline();
        });
        
        window.wx.error(res=>{
            alert(`${res.errMsg}`)
        });
    },
    
    toFriend(){
        window.wx.onMenuShareAppMessage({
            imgUrl: this.imgUrl,
            link: this.link,
            title: this.title,
            desc: this.description,
            success: function () {
                // 用户确认分享后执行的回调函数
                alert('success')
            },
        });
    },
    
    toTimeline() {
        window.wx.onMenuShareTimeline({
            imgUrl: this.imgUrl,
            link: this.link,
            title: this.title,
            desc: this.description,
            success: function () {
                // 用户确认分享后执行的回调函数
                alert('succes11s')
            },
        });
    }
}

wxUtils

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
import Share from './share';
let wxUtils = {};
wxUtils.share = function(shareInfo){
    getConfig(shareInfo)
}
function getConfig(shareInfo){
    let href = window.location.href.split('#')[0];
    post(ROOT_URL,'/share',{urlName:`${href}`}).then((res)=>{
        //这里不一定需要 传递链接进行微信加密。。。
        console.log(res)
        if(res){
            share2wx(res,shareInfo)
        }else{
            Toast.info('微信验证失败');
        }
    })
}
function share2wx(config,shareInfo){
    const share = new Share({
        appid: 'appid', // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.noncestr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名
    });
    share.init(Object.assign({}, shareInfo));
}
export default wxUtils

使用：

1
2
3
4
5
6
7
8
9
10
11
12
import wxUtils from 'src/common/wechat/wxUtils'
...some
<Button onClick={()=>{
    wxUtils.share({
        title: "title",
        description: "description",
        link: window.location.href,
        imgUrl: "https://www.baidu.com/img/bd_logo1.png"
    });
}}></Button>
【React.js】, AMap公众号