[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>
```
是不是很精簡呢!這樣我們就可以進行分享操作了!
## 問答