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

场景

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

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

需实现自定义

 

解决方案

通过jssdk实现自定义分享

 

参考文档

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

 

服务端代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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签名

 

前端开发

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

//执行配置 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配置为例：

?

1 2 3 4

location / { proxy_pass http://120.21.33.81:9031; proxy_set_header Host $host; }

　　

2  页面提示错误  config:error  -- invalid domain

    未设置jssdk的安全域名，打开微信公众号后台，点击右上角名称，进入功能设置：

    设置安全回调域名即可