# 微信朋友圈分享！
## 1、開發HTML代碼
在開發前，我們必須得有一個`APP`的`HTML5`分享界面！我這里采用的是 `AUI`中的`底部分享盒子`，想看到實際效果的，請移步到這里 [底部分享盒子](http://hongweizhiyuan.oschina.io/aui/aui-20170109-v2.1/html/sharebox_frm.html) ，你右鍵便可以看到想要的代碼，這里我把關鍵性代碼貼出來！
```
<div class="aui-btn" tapmode onclick="openSharebox()">打開分享</div>
<p>點擊了第<strong class="aui-text-danger" id="button-index"></strong>個按鈕（buttonIndex）</p>
<p>點擊按鈕的值為<strong class="aui-text-danger" id="button-value"></strong>(buttonValue)</p>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-sharebox.js" ></script>
<script type="text/javascript">
var sharebox = new auiSharebox();
function openSharebox(){
sharebox.init({
frameBounces:true,//當前頁面是否彈動，（主要針對安卓端）
buttons:[{
image:'../image/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>
```
我們將以此代碼為基礎，進行開發！
## 2、開發準備
我們知道開發微信的時候，需要 [微信開放平臺](https://open.weixin.qq.com/)
## 3、`wx` 模塊兒使用
我們需要在 `apicloud` 上使用 `wx` 模塊兒，如圖：
>它有什么功能呢，官方說：本模塊封裝了微信開放平臺的原生 SDK，集成了微信登錄、微信分享功能；可用于實現微信賬號登錄，分享內容到朋友圈或好友、收藏等功能；輕松、高效集成微信功能到自己的 app 內。使自己的 app 和微信實現無縫鏈接。
### 第1步：在 `config.xml` 文件中填加配置文件
當然它還有相應的 [開發文檔](http://http://docs.apicloud.com/Client-API/Open-SDK/wx)。
```
<feature name="wx">
<param name="urlScheme" value="wx776d5c6a91c35b53"/>
<param name="apiKey" value="wx776d5c6a91c35b53"/>
<param name="apiSecret" value="24c98ebf27781a5035bc96cbd7ff0109"/>
</feature>
```
這些參數是從哪里來的呢？如圖所示！
注：
`urlSchmeme` 和 `apiKey` 是 `APPID` ，前兩者一樣！
`apiSecret` 是 `AppSecret`
### 第2步：JS相關代碼
以下是微信分享的相關代碼，當然你也可以封裝成函數！
```
//微信分享 三個賦值
var wx_smeta = '';//圖像
var wx_post_title = '';//標題
var wx_post_excerpt = '';//簡介
var wx_url = '';//url
//分享微信
function share(argument) {
var wx = api.require('wx');
//是否安裝微信
wx.isInstalled(function(ret, err) {
if (ret.installed) {
//分享
wx.shareWebpage({
scene : 'timeline', //朋友圈
title : wx_post_title, //標題
description : wx_post_excerpt, //簡介
thumb : 'widget://image/logo108.png', //圖像
contentUrl : wx_url //鏈接
}, function(ret, err) {
if (ret.status) {
showToast('分享成功', 2, 'bottom');
}
});
} else {
alert('當前設備未安裝微信客戶端');
}
});
}
```
如果有客戶要求登錄后才可以分享，你也可以這樣做！代碼如下，很容易理解的！
```
if (uid) {
//微信登錄
}else {
api.openWin({
name : 'login',
url : '../login_win.html'
});
}
```
第3步：在HTML頁面加入函數
既然寫好了函數，寫好了HTML代碼，接下來我們就要將兩者聯合起來，將以邊的代碼，加入！
在 代碼“回調的使用”下邊加入以下代碼：
```
//回調的使用
if (ret.buttonIndex == 1){
share_wx();
}
```
這樣，我們就完成了微信的分享，我們在`自定義loader`中可以查看效果！
