[TOC] # 分享 ## 一：相關說明 在 [文章頁](http://http://hongweizhiyuan.oschina.io/newthink_tpl/tpl/AUI/AUI2.1/module_article/article2.html) 這個鏈接中，我們可以看到，里邊即有分享的代碼頁，其關鍵代碼如下： ``` <!--分享--> <div class="aui-bar-tab-item" id="share" tapmode style="width: 2.2rem;" onclick="openSharebox()"> <i class="aui-iconfont aui-icon-share"></i> </div> <!--分享--> <div class="aui-bar-tab-item" id="share" tapmode style="width: 2.2rem;" onclick="openSharebox()"> <i class="aui-iconfont aui-icon-share"></i> </div> <script> //打開分享 var sharebox = new auiSharebox(); function openSharebox(){ sharebox.init({ frameBounces:true,//當前頁面是否彈動，（主要針對安卓端） buttons:[{ image:'images/share/wx.png', text:'微信', value:'wx'//可選 },{ image:'images/share/wx-circle.png', text:'朋友圈', value:'wx-circle' },{ image:'images/share/qq.png', text:'QQ好友', value:'qq' },{ image:'images/share/qzone.png', text:'QQ空間', value:'qq-qzone' },{ image:'images/share/qq-weibo.png', text:'QQ微博' },{ image:'images/share/sina-weibo.png', text:'新浪微博' },{ image:'images/share/message.png', text:'短信' }], col:5, cancelTitle:'關閉'//可選,當然也可以采用下面的方式使用圖標 // cancelTitle:'<i class="aui-iconfont aui-icon-close aui-font-size-16"></i>'//可選 },function(ret){ if(ret){ //回調的使用 //document.getElementById("button-index").textContent = ret.buttonIndex; //document.getElementById("button-value").textContent = ret.buttonValue; } }) } </script> ``` 因為我們這里只講到 `微信會話分享，朋友圈分享`，故相關代碼做一下修改,以下代碼修改為： ``` <!--分享--> <div class="aui-bar-tab-item" id="share" tapmode style="width: 2.2rem;" onclick="openSharebox()"> <i class="aui-iconfont aui-icon-share"></i> </div> <!--分享--> <div class="aui-bar-tab-item" id="share" tapmode style="width: 2.2rem;" onclick="openSharebox()"> <i class="aui-iconfont aui-icon-share"></i> </div> <script> //打開分享 var sharebox = new auiSharebox(); function openSharebox(){ sharebox.init({ frameBounces:true,//當前頁面是否彈動，（主要針對安卓端） buttons:[{ image:'../../image/share/wx.png', text:'微信', value:'wx'//可選 },{ image:'images/share/wx-circle.png', text:'朋友圈', value:'wx-circle' }], col:5, cancelTitle:'關閉'//可選,當然也可以采用下面的方式使用圖標 // cancelTitle:'<i class="aui-iconfont aui-icon-close aui-font-size-16"></i>'//可選 },function(ret){ if(ret){ //回調的使用 //document.getElementById("button-index").textContent = ret.buttonIndex; //document.getElementById("button-value").textContent = ret.buttonValue; } }) } </script> ``` ## 二：分享朋友圈相關操作 接下來，我們就開始操作，包括以下幾個步驟： >1、在config.xml引入分享模塊兒 2、進行分享的JS操作并加入分享的相關代碼 3、加入 shareWebpage 函數 4、分享文章模板里加入相關代碼 ### 步驟一：在config.xml引入分享模塊兒 在根目錄下的`config.xml`下加入如下代碼： ``` <feature name="wx"> <param name="urlScheme" value="wx4489f0b8009731e9"/> <param name="apiKey" value="wx4489f0b8009731e9"/> <param name="apiSecret" value="4ef1c72c37b414dd82f31ec12c3833f3"/> </feature> ``` 注意： 1、首先這三個參數是從微信開放平臺獲取這里的信息； 2、這里的 `urlScheme` 和 `apiKey` 代碼是一樣的，`apiSecret` 查看的話需要重置！如圖：  3、分享后的作者就是“微信開放平臺”的作者，所以起名兒也是很重要的！如圖：  ### 步驟二：進行分享的JS操作并加入分享的相關代碼 對上邊的一些靜態頁面做修改，如： ``` <script> //打開分享 var sharebox = new auiSharebox(); function openSharebox(){ sharebox.init({ frameBounces:true,//當前頁面是否彈動，（主要針對安卓端） buttons:[{ image:'../../image/share/wx.png', text:'微信', value:'wx'//可選 },{ image:'../../image/share/wx-circle.png', text:'朋友圈', value:'wx-circle' }], col:5, cancelTitle:'關閉'//可選,當然也可以采用下面的方式使用圖標 },function(ret){ if(ret){ //朋友圈分享,注：描述不起作用（由于微信平臺限制，對不同平臺部分場景本參數無效） //縮略圖有要求，暫時以本地路徑為限 if (ret.buttonIndex == 1){ shareWebpage('session','啤咔聚聚：'+wx_title,wx_description,'widget://icon/logo.jpg',wx_url) } if (ret.buttonIndex == 2){ shareWebpage('timeline','啤咔聚聚：'+wx_title,wx_description,'widget://icon/logo.jpg',wx_url) } } }) } ``` 注：以上的 `wx_title`、`wx_description`、`wx_url` 幾個參數，需要我們在文章函數加入相關代碼，如下： ``` //文章內容 function portalArticle(){ let object_id = api.pageParam.object_id; let term_id = api.pageParam.term_id; let serverURL = Config.api.Portal_Article; let data = {values:{id:object_id}}; let callback = function(ret){ if(ret.data.info){ set_doT(ret.data.info, 'portal_article_script', 'portal_article_html',true); //微信分享-全局變量 wx_title = ret.data.info.post_title; wx_description = ret.data.info.post_excerpt; wx_thumb = serverUrl + 'data/upload/' + ret.data.info.smeta.thumb; wx_url = serverUrl + 'index.php?g=Portal&m=article&a=index&id='+object_id+'&cid='+term_id; } else { showToast('文章內容暫時沒有數據！', 2, 'bottom'); } }; runAjax(serverURL, data,callback); } ``` 仔細看上邊的代碼，以下代碼片斷就是我們新加的： ``` //微信分享-全局變量 wx_title = ret.data.info.post_title; wx_description = ret.data.info.post_excerpt; wx_thumb = serverUrl + 'data/upload/' + ret.data.info.smeta.thumb; wx_url = serverUrl + 'index.php?g=Portal&m=article&a=index&id='+object_id+'&cid='+term_id; ``` 這里是全局變量，不用加 `var wx_title` 之類的！ ### 步驟三：加入 shareWebpage 函數 我在 weixin.js 已經封裝了關于微信的很多函數，這里貼出這里用的函數即可！ ``` /** * 分享網頁 * * @param Vscene 場景,session 會話、timeline 朋友圈、favorite 收藏 * @param title string （可選項）分享網頁的標題 * @param description string （可選項）分享網頁的描述。由于微信平臺限制，對不同平臺部分場景本參數無效 * @param thumb string （可選項）分享網頁的縮略圖地址，要求本地路徑（fs://、widget://）大小不能超過32K,需要路徑包含圖片格式后綴，否則如果原圖片為非png格式，會分享失敗 * @param contentUrl string 分享網頁的 url 地址，長度不能超過10k。 * * @example <span tapmode onclick="shareWebpage('session')"> shareWebpage('session') </span> * @example <span tapmode onclick="shareWebpage('timeline')"> shareWebpage('timeline') </span> * @example <span tapmode onclick="shareWebpage('favorite')"> shareWebpage('favorite') </span> */ function shareWebpage(Vscene,title,description,thumb,contentUrl) { let wx = api.require('wx'); wx.shareWebpage({ apiKey : '', scene : Vscene, title : title, description : description, thumb : thumb, contentUrl : contentUrl }, function(ret, err) { if (ret.status) { showToast('分享成功！', 2, 'bottom'); //alert(JSON.stringify(ret)) } else { showToast('分享失敗！', 2, 'bottom'); //alert(JSON.stringify(err)) } }); } ``` ### 步驟四：分享文章模板里加入相關代碼 在我們的模塊兒 portal 的 templets 加入相關代碼，因為我們分享的時候，不需要更多的操作，只要看到我們分享的內容即可！什么收藏、查看、分享、評論都不需要，所以這里的代碼就很精簡，我的目錄是`themes/default/Portal/article.html` ，具體相關代碼如下 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>網站標題- {$post_title}</title> <meta name="keywords" content="{$post_keywords}" /> <meta name="description" content="{$post_excerpt}"> <link rel="stylesheet" type="text/css" href="__TMPL__Public/css/aui.css" /> <style type="text/css"> body{background: #FFFFFF;font-family: "微軟雅黑";} /*文章*/ .aui-content-padded h2{line-height: 36px; border-bottom: 1px solid #dddddd;padding-bottom: 10px;} .aui-content-padded img{margin-bottom: 15px;margin-top: 15px;} .aui-content-padded p{line-height: 24px;} </style> </head> <body> <!--文章/start--> <div class="aui-content-padded" id="portal_article_html"> <h2>{$post_title}</h2> <div class="aui-font-size-14" style="color:#999999;padding-top:10px;">{$post_date}</div> <div> {$post_content} </div> </div> <!--文章/end--> </body> </html> ``` 是不是很精簡呢！這樣我們就可以進行分享操作了！ ## 問答