# 微信朋友圈分享！
## 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`中可以查看效果！
