微信分享到朋友圈,分享给朋友JS代码

控制器中

tp3.2引入类(/thinkphp/library/vendor/weixin/jssdk.php)

import('Vendor.Weixin.JSSDK','','.php');

http://xiaohuang.cc/post/357.html


$jssdk = new \JSSDK("XXXXXX", "XXXXXX");
$signPackage = $jssdk->GetSignPackage();
//p($signPackage);
$this->assign('signPackage',$signPackage);


模板中

<script src="__PUBLIC__/js/wx_js_1.0.0.js"></script>

<script>
  // 注意:所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 
  // 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
  // 完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
  wx.config({
    appId: '{$signPackage["appId"]}',
    timestamp: {$signPackage["timestamp"]},
    nonceStr: '{$signPackage["nonceStr"]}',
    signature: '{$signPackage["signature"]}',
    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
  });
  wx.ready(function () {
    // 在这里调用 API
 
    wx.onMenuShareTimeline({
        title: '点进来就送10元,可以买土鸡蛋', // 分享标题
        link: '', // 分享链接
        imgUrl: 'http://weixin.yoco365.com/Public/images/yhq10.jpg', // 分享图标
        success: function () { 
            // 用户确认分享后执行的回调函数
        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });
     
    wx.onMenuShareAppMessage({
        title: '点进来就送10元,可以买土鸡蛋', // 分享标题
        desc: '下单立减10元,快来领优惠券吧!', // 分享描述
        link: '', // 分享链接
        imgUrl: 'http://weixin.yoco365.com/Public/images/yhq10.jpg', // 分享图标
        type: '', // 分享类型,music、video或link,不填默认为link
        dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
        success: function () { 
            // 用户确认分享后执行的回调函数
        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });
     
  });
</script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现步骤如下: 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> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值