[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>
```
是不是很精简呢！这样我们就可以进行分享操作了！
## 问答
