自定義分享 · 微擎

[TOC=1,4] ###使用系統分享操作在微站模板使用 **{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> ```