微信分享给朋友及朋友圈JS代码

<script>
        var imgUrl = "图片地址";
        var lineLink = "网址";
        var descContent = '描述文字在这里.....';
        var shareTitle = '标题';
        var appid = '';
         
        function shareFriend() {
            WeixinJSBridge.invoke('sendAppMessage',{
                "appid": appid,
                "img_url": imgUrl,
                "img_width": "200",
                "img_height": "200",
                "link": lineLink,
                "desc": descContent,
                "title": shareTitle
            }, function(res) {
                //_report('send_msg', res.err_msg);
            })
        }
        function shareTimeline() {
            WeixinJSBridge.invoke('shareTimeline',{
                "img_url": imgUrl,
                "img_width": "200",
                "img_height": "200",
                "link": lineLink,
                "desc": descContent,
                "title": shareTitle
            }, function(res) {
                   //_report('timeline', res.err_msg);
            });
        }
        function shareWeibo() {
            WeixinJSBridge.invoke('shareWeibo',{
                "content": descContent,
                "url": lineLink,
            }, function(res) {
                //_report('weibo', res.err_msg);
            });
        }
        // 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            // 发送给好友
            WeixinJSBridge.on('menu:share:appmessage', function(argv){
                shareFriend();
            });
            // 分享到朋友圈
            WeixinJSBridge.on('menu:share:timeline', function(argv){
                shareTimeline();
            });
            // 分享到微博
            WeixinJSBridge.on('menu:share:weibo', function(argv){
                shareWeibo();
            });
        }, false);
</script>

本文转自:http://xiaohuang.cc/post/357.html


  • 8
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现步骤如下: 1. 引入微信JSSDK 首先需要在页面中引入微信JSSDK,可以通过以下CDN地址引入: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 配置微信JSSDK 在Vue组件中,可以通过`mounted()`生命周期函数初始化微信JSSDK。在初始化之前,需要先获取微信JSSDK的配置信息,可以通过后端API获取: ```javascript mounted() { // 获取微信JSSDK配置信息 axios.get('/api/wechat/config', { params: { url: window.location.href.split('#')[0], }, }).then(res => { // 配置微信JSSDK wx.config({ debug: false, appId: res.data.appId, timestamp: res.data.timestamp, nonceStr: res.data.nonceStr, signature: res.data.signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData', ], }); }).catch(error => { console.log(error); }); }, ``` 需要注意的是,`url`参数需要传入当前页面的URL地址,但需要去除URL中的锚点部分。 3. 分享微信朋友 分享微信朋友可以通过`wx.updateAppMessageShareData()`方法实现,代码如下: ```javascript // 分享微信朋友 wx.updateAppMessageShareData({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享图标', success: function () { // 分享成功后的回调函数 console.log('分享微信朋友成功'); }, cancel: function () { // 分享取消后的回调函数 console.log('取消分享微信朋友'); }, }); ``` 4. 分享朋友圈 分享朋友圈可以通过`wx.updateTimelineShareData()`方法实现,代码如下: ```javascript // 分享朋友圈 wx.updateTimelineShareData({ title: '分享标题', link: '分享链接', imgUrl: '分享图标', success: function () { // 分享成功后的回调函数 console.log('分享朋友圈成功'); }, cancel: function () { // 分享取消后的回调函数 console.log('取消分享朋友圈'); }, }); ``` 完整代码如下: ```javascript <template> <div> <button @click="shareToWechatFriend">分享微信朋友</button> <button @click="shareToWechatTimeline">分享朋友圈</button> </div> </template> <script> import axios from 'axios'; export default { mounted() { // 获取微信JSSDK配置信息 axios.get('/api/wechat/config', { params: { url: window.location.href.split('#')[0], }, }).then(res => { // 配置微信JSSDK wx.config({ debug: false, appId: res.data.appId, timestamp: res.data.timestamp, nonceStr: res.data.nonceStr, signature: res.data.signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData', ], }); }).catch(error => { console.log(error); }); }, methods: { // 分享微信朋友 shareToWechatFriend() { wx.updateAppMessageShareData({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享图标', success: function () { console.log('分享微信朋友成功'); }, cancel: function () { console.log('取消分享微信朋友'); }, }); }, // 分享朋友圈 shareToWechatTimeline() { wx.updateTimelineShareData({ title: '分享标题', link: '分享链接', imgUrl: '分享图标', success: function () { console.log('分享朋友圈成功'); }, cancel: function () { console.log('取消分享朋友圈'); }, }); }, }, }; </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值