微信自定义分享

前一段之间做微信自定义分享,积累了一些经验,分享给大家。



步骤一、二在微信开发者文档中已经很详细了,直接从步骤三开始吧。

步骤三要参数微信的参数,除了appId之外,其他的参数都是动态的,这里,我用的php语言,在后端生成的参数,代码如下:

php端代码:

public function getwxinfo(){
    $dataurl = I('dataurl');
    include('./ThinkPHP/Library/Vendor/jssdk/jssdk.php');
    $jssdk = new \JSSDK('appId','appSecret');
    $signPackage = $jssdk->GetSignPackage($dataurl);
    exit(response('1','ok',$signPackage));
}

生成签名时,必须获取当前页面的URL,所以$dataurl是通过下面JS动态获取的,切记。

JS端代码:

var dataurl = window.location.href;
$.ajax({
    type:'post',
    data:{'dataurl':dataurl},
    url:'/index.php/Home/Index/getwxinfo',
    dataType:'json',
    success:function(json){
    	var list = json.data;
    	var appId = list.appId;
    	var timestamp = list.timestamp;
    	var nonceStr = list.nonceStr;
    	var signature = list.signature;
    	weixinInfo(appId,timestamp,nonceStr,signature);
    },
    error:function() {
        //alert('网络不给力哦...')
    }
});
function weixinInfo(appId,timestamp,nonceStr,signature){
	wx.config({
		debug: false,
	    appId: appId,
	    timestamp:timestamp ,
	    nonceStr:nonceStr,
	    signature:signature,
	    jsApiList: [
	       'checkJsApi',  //判断当前客户端版本是否支持指定JS接口
	       'onMenuShareTimeline', //分享到朋友圈
	       'onMenuShareAppMessage', //分享给好友
	       'onMenuShareQQ',  //分享到QQ
	       'onMenuShareWeibo' //分享到微博
	    ]
	});
}

wx.ready(function () {
	//微信好友
	var s_title = '分享标题';
	var s_desc = '分享描述';
	var s_link = '分享后的链接';
	var s_imgUrl = '图片链接';
	wx.onMenuShareAppMessage({  //例如分享到朋友圈的API  
		title: s_title, // 分享标题
		desc: s_desc, // 分享描述
		link: s_link, // 分享链接
		imgUrl: s_imgUrl, // 分享图标
		success: function () { },
	    cancel: function () { }
	});
	//朋友圈
    wx.onMenuShareTimeline({
        title: s_title, // 分享标题
        link: s_link, // 分享链接
        imgUrl: s_imgUrl, // 分享图标
        success: function () { },
        cancel: function () { }
    });
	//QQ好友
    wx.onMenuShareQQ({
        title: s_title, // 分享标题
        desc: s_desc, // 分享描述
        link: s_link, // 分享链接
        imgUrl: s_imgUrl, // 分享图标
        success: function () { },
        cancel: function () { }
    });
});	

wx.error(function (res) {
	alert(res.errMsg);  //打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示
});

就这么简单。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值