一段分享到微信的代码

var WeixinApi = (function () {


    "use strict";


    function weixinShareTimeline(data, callbacks) {
        callbacks = callbacks || {};
        var shareTimeline = function (theData) {
            WeixinJSBridge.invoke('shareTimeline', {
                "appid":theData.appId ? theData.appId : '',
                "img_url":theData.imgUrl,
                "link":theData.link,
                "desc":theData.title,
                "title":theData.desc, // 注意这里要分享出去的内容是desc
                "img_width":"120",
                "img_height":"120"
            }, function (resp) {
                switch (resp.err_msg) {
                    // share_timeline:cancel 用户取消
                    case 'share_timeline:cancel':
                        callbacks.cancel && callbacks.cancel(resp);
                        break;
                    // share_timeline:fail 发送失败
                    case 'share_timeline:fail':
                        callbacks.fail && callbacks.fail(resp);
                        break;
                    // share_timeline:confirm 发送成功
                    case 'share_timeline:confirm':
                    case 'share_timeline:ok':
                        callbacks.confirm && callbacks.confirm(resp);
                        break;
                }
                // 无论成功失败都会执行的回调
                callbacks.all && callbacks.all(resp);
            });
        };
        WeixinJSBridge.on('menu:share:timeline', function (argv) {
            if (callbacks.async && callbacks.ready) {
                window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
                if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
                    window["_wx_loadedCb_"] = new Function();
                }
                callbacks.dataLoaded = function (newData) {
                    window["_wx_loadedCb_"](newData);
                    shareTimeline(newData);
                };
                // 然后就绪
                callbacks.ready && callbacks.ready(argv);
            } else {
                // 就绪状态
                callbacks.ready && callbacks.ready(argv);
                shareTimeline(data);
            }
        });
    }


    function weixinSendAppMessage(data, callbacks) {
        callbacks = callbacks || {};
        var sendAppMessage = function (theData) {
            WeixinJSBridge.invoke('sendAppMessage', {
                "appid":theData.appId ? theData.appId : '',
                "img_url":theData.imgUrl,
                "link":theData.link,
                "desc":theData.desc,
                "title":theData.title,
                "img_width":"120",
                "img_height":"120"
            }, function (resp) {
                switch (resp.err_msg) {
                    // send_app_msg:cancel 用户取消
                    case 'send_app_msg:cancel':
                        callbacks.cancel && callbacks.cancel(resp);
                        break;
                    // send_app_msg:fail 发送失败
                    case 'send_app_msg:fail':
                        callbacks.fail && callbacks.fail(resp);
                        break;
                    // send_app_msg:confirm 发送成功
                    case 'send_app_msg:confirm':
                    case 'send_app_msg:ok':
                        callbacks.confirm && callbacks.confirm(resp);
                        break;
                }


                callbacks.all && callbacks.all(resp);
            });
        };
        WeixinJSBridge.on('menu:share:appmessage', function (argv) {
            if (callbacks.async && callbacks.ready) {
                window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
                if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
                    window["_wx_loadedCb_"] = new Function();
                }
                callbacks.dataLoaded = function (newData) {
                    window["_wx_loadedCb_"](newData);
                    sendAppMessage(newData);
                };
                // 然后就绪
                callbacks.ready && callbacks.ready(argv);
            } else {
                // 就绪状态
                callbacks.ready && callbacks.ready(argv);
                sendAppMessage(data);
            }
        });
    }


    function weixinShareWeibo(data, callbacks) {
        callbacks = callbacks || {};
        var shareWeibo = function (theData) {
            WeixinJSBridge.invoke('shareWeibo', {
                "content":theData.desc,
                "url":theData.link
            }, function (resp) {
                switch (resp.err_msg) {
                    case 'share_weibo:cancel':
                        callbacks.cancel && callbacks.cancel(resp);
                        break;


                    case 'share_weibo:fail':
                        callbacks.fail && callbacks.fail(resp);
                        break;


                    case 'share_weibo:confirm':
                    case 'share_weibo:ok':
                        callbacks.confirm && callbacks.confirm(resp);
                        break;
                }


                callbacks.all && callbacks.all(resp);
            });
        };
        WeixinJSBridge.on('menu:share:weibo', function (argv) {
            if (callbacks.async && callbacks.ready) {
                window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
                if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
                    window["_wx_loadedCb_"] = new Function();
                }
                callbacks.dataLoaded = function (newData) {
                    window["_wx_loadedCb_"](newData);
                    shareWeibo(newData);
                };


                callbacks.ready && callbacks.ready(argv);
            } else {


                callbacks.ready && callbacks.ready(argv);
                shareWeibo(data);
            }
        });
    }




    function imagePreview(curSrc,srcList) {
        if(!curSrc || !srcList || srcList.length == 0) {
            return;
        }
        WeixinJSBridge.invoke('imagePreview', {
            'current' : curSrc,
            'urls' : srcList
        });
    }


    function showOptionMenu() {
        WeixinJSBridge.call('showOptionMenu');
    }




    function hideOptionMenu() {
        WeixinJSBridge.call('hideOptionMenu');
    }


    function showToolbar() {
        WeixinJSBridge.call('showToolbar');
    }


    function hideToolbar() {
        WeixinJSBridge.call('hideToolbar');
    }


    function getNetworkType(callback) {
        if (callback && typeof callback == 'function') {
            WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                callback(e.err_msg);
            });
        }
    }


    function closeWindow() {
        WeixinJSBridge.call("closeWindow");
    }
    function wxJsBridgeReady(readyCallback) {
        if (readyCallback && typeof readyCallback == 'function') {
            var Api = this;
            var wxReadyFunc = function () {
                readyCallback(Api);
            };
            if (typeof window.WeixinJSBridge == "undefined"){
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', wxReadyFunc, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', wxReadyFunc);
                    document.attachEvent('onWeixinJSBridgeReady', wxReadyFunc);
                }
            }else{
                wxReadyFunc();
            }
        }
    }


    return {
        version         :"1.8",
        ready           :wxJsBridgeReady,
        shareToTimeline :weixinShareTimeline,
        shareToWeibo    :weixinShareWeibo,
        shareToFriend   :weixinSendAppMessage,
        showOptionMenu  :showOptionMenu,
        hideOptionMenu  :hideOptionMenu,
        showToolbar     :showToolbar,
        hideToolbar     :hideToolbar,
        getNetworkType  :getNetworkType,
        imagePreview    :imagePreview,
        closeWindow     :closeWindow
    };
})();
前端实现Web分享微信的核心是调用微信JS-SDK提供的接口,获取分享参数并生成分享链接。以下是一个使用Vue.js框架实现Web分享微信的示例代码: ```html <template> <div> <button @click="shareToWechat">分享微信</button> </div> </template> <script> import wx from 'weixin-js-sdk' export default { methods: { async shareToWechat() { const url = window.location.href.split('#')[0] // 分享的网址 const title = '分享标题' // 分享的标题 const description = '分享描述' // 分享的描述 const imageUrl = 'https://example.com/share-image.jpg' // 分享的图片链接 const response = await fetch('/api/wechat-signature?url=' + encodeURIComponent(url)) const { appId, timestamp, nonceStr, signature } = await response.json() wx.config({ debug: false, appId, timestamp, nonceStr, signature, jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] }) wx.ready(() => { wx.updateAppMessageShareData({ title, desc: description, link: this.generateShareLink(url, title, description, imageUrl), imgUrl: imageUrl, success: () => { console.log('分享微信好友成功') }, cancel: () => { console.log('取消分享微信好友') } }) wx.updateTimelineShareData({ title, link: this.generateShareLink(url, title, description, imageUrl), imgUrl: imageUrl, success: () => { console.log('分享微信朋友圈成功') }, cancel: () => { console.log('取消分享微信朋友圈') } }) }) }, generateShareLink(url, title, description, imageUrl) { const encodedUrl = encodeURIComponent(url) const encodedTitle = encodeURIComponent(title) const encodedDescription = encodeURIComponent(description) const encodedImageUrl = encodeURIComponent(imageUrl) return `http://example.com/wechat-share.html?url=${encodedUrl}&title=${encodedTitle}&desc=${encodedDescription}&imgUrl=${encodedImageUrl}` } } } </script> ``` 这段代码中,我们使用了Vue.js框架和weixin-js-sdk库。在点击“分享微信”按钮时,我们首先向后端API请求获取微信签名,然后在前端JS代码中调用wx.config函数配置微信JS-SDK的参数。在配置完成后,我们使用wx.updateAppMessageShareData和wx.updateTimelineShareData函数来设置分享微信好友和微信朋友圈的参数,并在分享成功或取消分享时触发回调函数。最后,我们使用generateShareLink函数来生成分享链接,该链接包含了分享的网址、标题、描述和图片链接等参数,供微信客户端识别并显示分享内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员入门进阶(免费辅导开题报告)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值