封装微信分享到朋友/朋友圈js

1 篇文章 0 订阅

只封装了微信分享到朋友和朋友圈:
在页面引入:

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/js/wxShare-1.1.0"></script>

然后在业务代码里调用:

wxShare.title='title';
wxShare.desc='desc';
wxShare.successCallback=function(){};
wxShare.ok();

tips:
微信每次更新分享话术都要重新调一次wx.onMenuShareAppMessage 或者wx.onMenuShareTimeline;
所以如果修改话术调用完封装的wxShare.title 等信息后,要再调一次wxShare.ok() 进行更新分享

/**
 * 微信分享给朋友/朋友圈
 * @wxShare  {object} 分享给朋友/朋友圈的参数和成功失败回调
 * wxShare.title.desc.url.imgUrl.successCallback.cancelCallback.ok()
 * @return {[type]} [description]
 */
$.get('/wxShare.action', { url: location.href.split('#')[0] }).done(function(res) {
    wx.config({
        debug: false,
        appId: res.appId,
        timestamp: res.timestamp,
        nonceStr: res.nonceStr,
        signature: res.signature,
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
        ]
    });
}).fail(function() { console.log('微信分享获取后台参数ajax失败!'); });

var wxShare = {
    ok: function() {
        var self = this;
        self.title = self.title || 'title';
        self.desc = self.desc || 'desc';
        self.link = self.link || location.href;
        self.imgUrl = self.imgUrl || location.protocol + '//' + location.host + '/logo.jpg';
        wx.ready(function() {
            wx.onMenuShareAppMessage({
                title: self.title,
                desc: self.desc,
                link: self.link,
                imgUrl: self.imgUrl,
                success: function() {
                    console.log('分享给朋友成功!');
                    if (typeof self.successCallback === 'function') {
                        self.successCallback();
                    }
                },
                cancel: function() {
                    console.log('分享给朋友失败!');
                    if (typeof self.cancelCallback === 'function') {
                        self.cancelCallback();
                    }
                }
            });
            wx.onMenuShareTimeline({
                title: self.title2 || self.title,
                desc: self.desc2 || self.desc,
                link: self.link2 || self.link,
                imgUrl: self.imgUrl2 || self.imgUrl,
                success: function() {
                    console.log('分享到朋友圈成功!');
                    if (typeof self.successCallback2 === 'function') {
                        self.successCallback2();
                    } else if (typeof self.successCallback === 'function') {
                        self.successCallback();
                    }
                },
                cancel: function() {
                    console.log('分享到朋友圈失败!');
                    if (typeof self.cancelCallback2 === 'function') {
                        self.cancelCallback2();
                    } else if (typeof self.cancelCallback === 'function') {
                        self.cancelCallback();
                    }
                }
            });
        });
    }
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
封装微信分享功能,首先需要引入微信 JS-SDK,并且要在微信公众平台中配置好相关的权限和域名。以下是封装微信分享功能的步骤: 1. 引入微信 JS-SDK 在 index.html 中引入微信 JS-SDK: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 配置微信分享 在需要分享的页面中,通过微信 JS-SDK 的 wx.config 方法进行微信分享的配置,具体代码如下: ```javascript import wx from 'weixin-js-sdk' // 配置微信分享 function wxShare(title, desc, imgUrl, link) { wx.ready(() => { wx.updateAppMessageShareData({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function () { // 分享成功回调 } }) wx.updateTimelineShareData({ title: title, // 分享标题 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function () { // 分享成功回调 } }) }) wx.error(function (res) { console.log(res) }) wx.config({ debug: false, // 调试模式 appId: '', // 公众号的唯一标识 timestamp: '', // 生成签名的时间戳 nonceStr: '', // 生成签名的随机串 signature: '', // 签名 jsApiList: [ // 需要使用的接口列表 'updateAppMessageShareData', 'updateTimelineShareData' ] }) } ``` 其中,title 表示分享的标题,desc 表示分享的描述,imgUrl 表示分享的图片链接,link 表示分享的链接。 3. 调用微信分享 在需要分享的地方,调用 wxShare 方法进行微信分享,具体代码如下: ```javascript wxShare('分享标题', '分享描述', '分享图片链接', '分享链接') ``` 这样就可以实现 Vue3 中微信分享功能的封装了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值