自定义分享 · 微擎开发手册

# 自定义分享 - [使用系统分享操作](#_1) - [1. PHP 自定义分享数据](#1_PHP__2) - [2. js 自定义分享数据](#2_js__3) - [3. jssdk 接口调用](#3_jssdk__4) - [纯手工设置分享操作](#_5) ### 使用系统分享操作在微站模板使用 **{template 'common/header'}** **{template 'common/footer'}** 可以使用此方式执行分享操作. 微擎系统会为每个页面或应用**自动生成分享内容**, 粉丝用户可以随意的将此内容进行分享(发送给朋友、分享到朋友圈或腾讯微博). 微擎系统为开发人员提供如下扩展功能: #### 1. PHP 自定义分享数据微擎系统会自动生成一个分享内容, 但是开发者也可以在 app 端的 PHP 代码或 HTML 页面中定义要分享的数据结构 $\_share, 来替换微擎系统自动生成的分享数据. $\_share 结构如下: ``` <?php $_share = array( 'title' => ?, 'link' => ?, 'imgUrl' => ?, 'content' => ? ); ?> ``` #### 2. js 自定义分享数据在模板页面 {template 'common/footer'} 之前定义 window.sharedata ``` <script> sharedata = { 'title' : ?, // 'desc' : ?, // 'link' : ?, // 'imgUrl' : ? // } sharedata.success = function(){ // 自定义分享成功后执行的 js 代码. } <script> ``` \>> 示例 ``` <script> // 自定义分享数据的调用 sharedata = { title: '微信JS-SDK Demo', desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务', link: 'http://demo.open.weixin.qq.com/jssdk/', imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0', success: function(){ alert('xixi'); } }; </script> ``` 如果使用系统生成分享数据, 自定义回调方法, 请这么使用. ``` <script> // 自定义分享数据的调用, 确保 sharedata 对象存在. sharedata = { success: function(){ alert('xixi'); } }; // 或 sharedata = { }; sharedata.success = function(){ alert('xixi'); } </script> ``` 详情参阅 ☞ \[\[dev:js:share|分享操作\]\] #### 3. jssdk 接口调用页面中添加以下代码, 用于调试 ``` <script> jssdkconfig.debug = true; </script> ``` 如果开发者想在微站页面调用 jssdk 方法, 可以这样: ``` <script> // 自定义接口调用 require(['jquery'], function($){ wx.ready(function () { // 图片预览 // 注意: 仅支持 DOM 选择 $('#previewImage')[0].onclick = function () { wx.previewImage({ current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg', urls: [ 'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg', 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg', 'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg' ] }); }; }); }); </script> ``` ### 纯手工设置分享操作不使用系统 **header** / **footer**, 需要在页面调用 **{php echo register\_jssdk(true);}** 注册 **jssdk**. 具体 jssdk 方法调用请参见: [微信 JSSDK 开发文档](http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html) \>> 方法介绍 ``` function register_jssdk($debug) // 参数 $debug 为 boolean, 是否使用调试. ``` \>> 页面调用示例此示例, 自动注册 jssdk, 如设置了分享借用, 将自动借用. ``` <html> <head> <title>测试 register_jssdk</title> {php echo register_jssdk(true);}  </head> <body> <ul class="nav nav-tabs" style="margin-bottom: 10px;"> <li><a href="{php echo $this->createMobileUrl('store', array('op'=>'display'));}">全部商品</a></li> <li class="active"><a href="{php echo $this->createMobileUrl('jssdk');}">分享测试</a></li> </ul> <script> wx.ready(function () { sharedata = { title: '微信JS-SDK Demo', desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务', link: 'http://demo.open.weixin.qq.com/jssdk/', imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0', success: function(){ alert('success'); }, cancel: function(){ alert('cancel'); } }; wx.onMenuShareAppMessage(sharedata); }); </script> </body> </html> ```