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

场景

微信网页分享到朋友圈及发送给朋友；

内置浏览器的做法是默认采用第一个img元素图片，使用标题作为文本；

需实现自定义

解决方案

通过jssdk实现自定义分享

参考文档

http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

服务端代码

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的安全域名，打开微信公众号后台，点击右上角名称，进入功能设置：

设置安全回调域名即可