自定义分享微信页面时,更改分享的标题、图片、内容描述

主要解决android和ios在分享时,分享标题不同
具体可查看微信官方文档自定义分享

需要先引用

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

var _myurl1_= window.location.href;//需要把该参数通过ajax返回给后台获取以下4个数据
//分享时必填4个参数
var _appid_ = ""; // 必填,公众号的唯一标识
var _nonceStr_ = ""; // 必填,生成签名的时间戳
var _timestamp_ = ""; // 必填,生成签名的随机串
var _signature_ = ""; // 必填,签名

在ajax获取上面的信息之后调用wxconfig方法

function wxconfig() {
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: _appid_, // 必填,公众号的唯一标识
        timestamp: _timestamp_, // 必填,生成签名的时间戳
        nonceStr: _nonceStr_, // 必填,生成签名的随机串
        signature: _signature_, // 必填,签名
        jsApiList: [
            'updateTimelineShareData',
            'updateAppMessageShareData',
        ], // 必填,需要使用的JS接口列表(这里只调用了分享给朋友、分享到QQ、分享到朋友圈、分享到QQ空间)该接口调用引入的script版本要1.4.0以上
        success: function(res) {
            //alert("配置成功");
        },
        fail: function() {
            alert("配置失败");
        }
    });
    wx.ready(function() {
        //分享到朋友圈、分享到QQ空间
        wx.updateTimelineShareData({
            title: '', // 分享标题
            link: '', // 分享链接
            imgUrl: '',//分享图片
            desc: '', // 分享描述
            success: function(res) {
                //alert('已分享');
            }
        });
        //分享给朋友、分享到QQ
        wx.updateAppMessageShareData({
            title: '', // 分享标题
            link: '', // 分享链接
            imgUrl: '',//分享图片
            desc: '', // 分享描述
            type: 'link', // 分享类型,music、video或link,不填默认为link
            dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
            success: function() {
                // 用户确认分享后执行的回调函数
                //alert("已分享");
            }
        });
    });

以上是原生写法
vue中写法

//在vue中的index.html中引入
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

在不同vue函数中放入对应操作

created(){
	this.wxShare();
},
methods: {
	wxShare(){
	    // 微信分享
	    var _myurl_= window.location.href;//参数要传给后台
	    this.$ajax.get('后端接口url'+_myurl_).then(function (res){
	       console.log(res);
		   wx.config({
		       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
		       appId: res.appid, // 必填,公众号的唯一标识
		       timestamp: res.timestamp, // 必填,生成签名的时间戳
		       nonceStr: res.nonceStr, // 必填,生成签名的随机串
		       signature: res.signature, // 必填,签名
		       jsApiList: [
		           'updateTimelineShareData',
		           'updateAppMessageShareData'
		       ], // 必填,需要使用的JS接口列表,
		       success: function() {
		           // alert("配置成功");
		       },
		       fail: function() {
		           alert("配置失败");
		       }
		   });
	    });
	}
},
mounted() {
    wx.ready(()=>{
        //分享到朋友圈、分享到QQ空间
        wx.updateTimelineShareData({
            title: '', // 分享标题
            link: '', // 分享链接
            imgUrl:'',//分享图片
            desc: '', // 分享描述
            success: function(res) {
                // alert('分享成功');
            }
        });
        //分享给朋友、分享到QQ
        wx.updateAppMessageShareData({
            title: '', // 分享标题
            link: '', // 分享链接
            imgUrl:'',//分享图片
            desc: '', // 分享描述
            type: 'link', // 分享类型,music、video或link,不填默认为link
            dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
            success: function() {
                // 用户确认分享后执行的回调函数
                // alert("分享成功");
            }
        });
    });
},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值