纯前端实现微信自定义分享

一、引入sha1.js、jwexin1.6.0.js文件

二、wx.config()配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

三、拿到timestamp、nonceStr、signature、access_token、jsapi_ticket。

完整代码：

var AppId = "";
var Appsecret = "";

////转发去代码
function getToken2(){
    if(window.localStorage.getItem('token2_time')){
        var token2_time = window.localStorage.getItem('token2_time');
        var currentTime = (new Date()).getTime();
        if(currentTime - token2_time>120000){
//            alert("时间过期重新获取token")
            getNewToken2();
        }else{
            // alert("使用缓存中的数据")
            var jsapi_ticket = window.localStorage.getItem('jsapi_ticket');
            var nonce_str = createNonceStr().toString();
            var timestamp = createTimeStamp().toString();
            var url = location.href.split('#')[0];
            var string1 = getString1(nonce_str,timestamp,jsapi_ticket,url);
            var signature = sha1(string1);
            // alert("signature:"+signature)
            wx.config({
                debug: false,
                appId: AppId,
                timestamp: timestamp,
                nonceStr: nonce_str,
                signature: signature,
                jsApiList: [
                    'checkJsApi',
                    'updateAppMessageShareData',
                    'updateTimelineShareData',
                'onMenuShareAppMessage']
            });
        }
    }else{
        // alert("第一次进入，保存数据")
        getNewToken2();
    }

}

function getNewToken2(){
    $.ajax({
        type: "get",
        url: "/proxy_all/api.weixin.qq.com/cgi-bin/token",
        async: true,
        dataType:"json",
        data: {
            "grant_type":"client_credential",
            "appid": AppId,
            "secret":Appsecret
        },
        success: function(data) {
            var token = data.access_token;
            // alert("token",token)
            console.log("转发的token:"+data.access_token)
            getTicket(token);
        }
    });
}
function getTicket(token){
    $.ajax({
        type:'get',
        url:"/proxy_all/api.weixin.qq.com/cgi-bin/ticket/getticket",
        async: true,
        dataType:'json',
        data:{
            "access_token":token,
            "type":"jsapi"
        },
        success:function(response){
        if(response.errcode=="0"){
                produceSign(response.ticket);
            }
        }
    })
}



function produceSign(ticket) {
    var nonce_str = createNonceStr().toString();
    var timestamp = createTimeStamp().toString();
    var jsapi_ticket = ticket;
    var url = location.href.split('#')[0];
    var string1 = getString1(nonce_str, timestamp, jsapi_ticket, url);
    var signature = sha1(string1);
    console.log("signature:" + signature);

    // alert(""+ticket);
    window.localStorage.setItem("jsapi_ticket", jsapi_ticket);
    var currentTime = (new Date()).getTime();
    window.localStorage.setItem('token2_time', currentTime);
    wx.config({
        debug:false,
        appId: AppId,
        timestamp: timestamp,
        nonceStr: nonce_str,
        signature: signature,
        jsApiList: [
            'checkJsApi',
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareAppMessage'
          ]
    });
    //"main.html?main_params="+Authorization_Str;
    wx.ready(function () {
        // 在这里调用 API
        //发送朋友
        wx.updateAppMessageShareData({
            title: "迎新春，阖家欢",    //分享标题
            desc: "2021牛年大吉，感恩有你。", // 分享描述
            link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "", // 分享图标
            success: function (res) {

            },
            cancel: function () {
            }

        });

//朋友圈
        wx.updateTimelineShareData({
            title: "迎新春，阖家欢",    //分享标题
            desc: "2021牛年大吉，感恩有你。", // 分享描述
            link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "", // 分享图标
            success: function (res) {

            },
            cancel: function () {
            }

        });


        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            console.log(res);
        });

    });
}

wx.ready(function(){
    // alert("微信验证OK");
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

    wx.updateAppMessageShareData({
        title: "迎新春，阖家欢",    //分享标题
        desc: "2021牛年大吉，感恩有你。", // 分享描述
        link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: "", // 分享图标
        success: function (res) {

            // 设置成功
            // alert("分享成功")

        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }

    });

    wx.updateTimelineShareData({
        title: "迎新春，阖家欢",    //分享标题
        desc: "2021牛年大吉，感恩有你。", // 分享描述
        link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: "", // 分享图标
        success: function (res) {

        },
        cancel: function () {
        }

    });

});
wx.error(function(res){

// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    alert("微信验证失败");
});

/**
     * 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式 （即 key1=value1&key2=value2…）拼接成字符串string1
     * @param nonce_str
     * @param timestamp
     * @param jsapi_ticket
     * @param url
     * @return
     */
function getString1(nonce_str,timestamp,jsapi_ticket,url){
    var arr = ["noncestr="+nonce_str,"timestamp="+timestamp,"jsapi_ticket="+jsapi_ticket,"url="+url];
    arr.sort();
    var sb = arr.join("&");
    return sb;
}

function getSha1(str){
    return hex_sha1(str);
}

function createNonceStr(){
    return (new Date()).getTime();
}

function createTimeStamp(){
    var time = (new Date()).getTime().toString();
    return time.substr(0,9);
}