微信开发-如何自定义页面分享元素

场景

微信网页分享到朋友圈及发送给朋友;
内置浏览器的做法是默认采用第一个img元素图片,使用标题作为文本;
需实现自定义
 

解决方案

通过jssdk实现自定义分享
 
参考文档
 

服务端代码

include (‘./Lib/COM/jssdk.php‘);
$jssdk = new JSSDK($tpl[‘appid‘], $tpl[‘appsecret‘]);
$signPackage = $jssdk -> GetSignPackage();
 
//在Action层实现jssdk初始化参数的获取,jssdk封装了api调用的细节
 
public function getSignPackage() {
$jsapiTicket = $this->getJsApiTicket();
 
// 注意 URL 一定要动态获取,不能 hardcode.
$protocol = (!empty($_SERVER[‘HTTPS‘]) && $_SERVER[‘HTTPS‘] !== ‘off‘ || $_SERVER[‘SERVER_PORT‘] == 443) ? "https://" : "http://";
$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
 
$timestamp = time();
$nonceStr = $this->createNonceStr();
 
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
 
$signature = sha1($string);
 
$signPackage = array(
"appId" => $this->appId,
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature,
"rawString" => $string
);
return $signPackage;
}

  

签名流程
 
1  获取jsapi_ticket;
2  生成随机字符串及时间戳
3  拼接待签名字符串
    jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url
4 生成shar1签名
 

前端开发

//执行配置
wx.config({
debug: true, //开发时开启调试,可获得弹出错误提示信息
appId: ‘wx2e0bde3x3fa332b‘,
timestamp: ‘1437016703‘,
nonceStr: ‘x7GInQ2pQtzF7fxt‘,
signature: ‘ef80a58a197ede439e0beb2360ef378e2b4fb204‘,
jsApiList: [
‘onMenuShareTimeline‘,
‘onMenuShareTimeline‘
]
});
//在ready方法中执行
wx.ready(function() {
//定制朋友圈分享
wx.onMenuShareTimeline({
title: ‘{维尔特}--明星讲故事‘, // 分享标题
link: ‘http://www.baidu.com‘, // 分享链接
imgUrl: ‘http://my.emplog.com/uploads/u/uxzdcn1426737865/d/2/0/6/thumb_55a4749bdac1c.jpg‘, // 分享图标
success: function() {
//分享成功
},
cancel: function() {
//分享取消
}
});
//定制发送给朋友
wx.onMenuShareAppMessage({
title: ‘{维尔特}--明星讲故事‘, // 分享标题
desc: ‘{维尔特}--明星讲故事‘, // 分享描述
link: ‘http://www.baidu.com‘, // 分享链接
imgUrl: ‘http://my.emplog.com/uploads/u/uxzdcn1426737865/d/2/0/6/thumb_55a4749bdac1c.jpg‘, // 分享图标
type: ‘‘, // 分享类型,music、video或link,不填默认为link
dataUrl: ‘‘, // 如果type是music或video,则要提供数据链接,默认为空
success: function() {
	
},
cancel: function() {
	
}
});
wx.error(function(res) {
//alert(res.errMsg);
});
})

  

 
 

常见问题

1  打开页面提示 config:error -- invalid signature
    检查生成签名的正确性,尤其注意当前url的一致性,即微信jssdk以浏览器页面url进行计算,而服务端也需要以同样的url。
 
    最常出错的场景是服务端通过nginx或apache配置了反向代理,而php通过$_SERVER[HTTP_HOST]获得的是反向代理主机的IP,于是出现错误,解决办法是:
在反向代理配置中实现HTTP_HOST的header透传,保证php可获得前端url的host信息,以nginx配置为例:
location / {
proxy_pass http://120.21.33.81:9031;
proxy_set_header Host $host;
}

  

2  页面提示错误  config:error  -- invalid domain
    未设置jssdk的安全域名,打开微信公众号后台,点击右上角名称,进入功能设置:
    设置安全回调域名即可

 

微信开发-如何自定义页面分享元素

上一篇:C#/ASP.NET MVC微信公众号接口开发之从零开发(二) 接收微信消息并且解析XML(附源码)


下一篇:微信支付:模板消息实现过程备忘