# 樂(lè)推微信前端基于requirejs的工作模式
# 資源網(wǎng)址：
*樂(lè)推官網(wǎng)：[http://ng.letwx.com](http://ng.letwx.com)
*樂(lè)推wiki網(wǎng)址：[http://wewiki.sinaapp.com](http://wewiki.sinaapp.com)
*樂(lè)推接口文檔：[http://wewiki.sinaapp.com/Ng.letwx.com接口文檔](http://wewiki.sinaapp.com/Ng.letwx.com接口文檔)
*協(xié)作平臺(tái)worktile：[https://worktile.com/](https://worktile.com/)
*SVN工作目錄：
* app文件夾： http://203.195.189.40/svn/ng/app
* styles文件夾： http://203.195.189.40/svn/ng/styles
# 如何構(gòu)建本地工作環(huán)境
請(qǐng)先仔細(xì)閱讀上述`資源網(wǎng)址`中的`樂(lè)推接口文檔`中的1,2,3部分酪我，然后再向下閱讀闲坎。
樂(lè)推服務(wù)器上的工作目錄如下：
ng.letwx.com
|
|----app???????????????????項(xiàng)目的工作目錄
|----styles
|----css??????????項(xiàng)目中可能會(huì)用到的插件所依賴的css文件
|----jsng????????項(xiàng)目中可能會(huì)用到的插件 和 require.config.js文件
開(kāi)發(fā)人員需要svn更新上述`SVN工作目錄`中的兩個(gè)svn目錄项戴。
為了使得項(xiàng)目上線和本地開(kāi)發(fā)盡可能一致宛裕，在項(xiàng)目提交時(shí)改動(dòng)的內(nèi)容最小化，且便于團(tuán)隊(duì)之間相互合作牙勘，
要保證 `app` 文件夾 和 `styles` 文件夾在同一級(jí)目錄下职恳，并且保證你的本地服務(wù)器可以直接訪問(wèn)到app所在的目錄，
因此你的本地工作路徑應(yīng)該是這樣的：http://192.168.1.2:8080/app/xxx/xxx.html
# 開(kāi)發(fā)規(guī)則
###開(kāi)發(fā)人員需要遵守如下規(guī)則：
1.開(kāi)發(fā)人員所做的項(xiàng)目放在`app`文件夾中方面，在其中創(chuàng)建項(xiàng)目文件夾放钦，并在文件夾中創(chuàng)建自己的項(xiàng)目，
例如恭金，test項(xiàng)目的形式如下：
```
app
|----test????????????????????項(xiàng)目目錄
|----index.html????????項(xiàng)目頁(yè)面
|----css????????????存放項(xiàng)目中css文件的文件夾
|----images????????????存放項(xiàng)目中圖片文件的文件夾
|----js????????????????存放項(xiàng)目中js文件的文件夾
|----resource????????存放項(xiàng)目中其他文件的文件夾操禀，例如音頻文件
```
2.頁(yè)面中引用require.min.js的方式：
```html
```
3.require.config.js的服務(wù)器路徑為：http://ng.letwx.com/styles/jsng/require.config.js
4.js中需要自動(dòng)判斷是服務(wù)器還是本地環(huán)境（為了減少代碼提交時(shí)的手動(dòng)改動(dòng)）：
```js
var isDebug = (function(){
var hostnameIndex = window.location.hostname.split('.')[0];
return (hostnameIndex == '192') || (hostnameIndex == '127') || (hostnameIndex == 'localhost') || (hostnameIndex == '');
}());
```
5.應(yīng)用需要驗(yàn)證token信息的，代碼如下：
```js
require(['MHJ', 'auth'],function(MHJ,oAuth){
check(MHJ,oAuth,init);
function init(letwxid,apiopenid,apitoken){
dosomething();
}
});
function check(MHJ,oAuth,cb){
var letwxid = MHJ.getUrlParam().letwxid;
if (letwxid) {
oAuth.cfg(letwxid, isDebug);
oAuth.checkToken(function(apiopenid, apitoken) {
cb && cb(letwxid, apiopenid, apitoken);
}, function() {
//alert('checktoken錯(cuò)誤蔚叨！');
});
} else alert('應(yīng)用ID錯(cuò)誤');
}
```
6.頁(yè)面中需要有l(wèi)oading頁(yè)面，請(qǐng)引用‘loading’這個(gè)組件辙培，可以這樣引用：
```js
require(['loading','x','xxx'],function(M,x,xx){
M.loading(1,1);
dosomething();
M.loadingHide();
});
```
使用loading時(shí)蔑水，最好是將頁(yè)面中的其他元素隱藏，為此約定如下：
>頁(yè)面中的所有內(nèi)容都要被id="content"的元素包含扬蕊，且在html中就將content元素隱藏搀别，
等到需要加載的元素或進(jìn)行的操作進(jìn)行完畢后，再將content元素顯示尾抑。
7.主邏輯部分：
主邏輯部分應(yīng)該在`loading`歇父、`checktoken`之后進(jìn)行。
主邏輯部分的代碼應(yīng)該保證代碼的`簡(jiǎn)潔性`和`可讀性`再愈。
>注意：在代碼中會(huì)涉及到服務(wù)器請(qǐng)求榜苫，你需要判斷服務(wù)器傳過(guò)來(lái)的數(shù)據(jù)中的error信息是否等于1002，如果等于1002就需要清除`token`信息（error等于1002代表token信息過(guò)期）翎冲，具體代碼如下：
>
var error = data.error - 0;
if(error == 1002){
alert('您的身份信息已過(guò)期垂睬，點(diǎn)擊確定重新加載頁(yè)面！');
oAuth.clear();
window.location.reload();
}
8.在測(cè)試地址下，`微信分享`是無(wú)法正常調(diào)用的驹饺，因?yàn)樾枰谖⑿藕笈_(tái)設(shè)置相應(yīng)的域名才可以钳枕，所以建議`微信分享`的代碼在其他邏輯都完成之后再加入到頁(yè)面中去。
9.開(kāi)發(fā)人員開(kāi)發(fā)的任何一個(gè)項(xiàng)目的url上都需要帶有`letwxid`這個(gè)字段赏壹，形式如下：
```
http://ng.letwx.com/app/xxx/index.html?letwxid=12
```
目的是為了便于管理鱼炒、修改相關(guān)應(yīng)用，以及依賴于`letwxid`會(huì)做一些其他的操作蝌借。開(kāi)發(fā)人員開(kāi)發(fā)時(shí)昔瞧，如果一個(gè)應(yīng)用中有多個(gè)頁(yè)面，應(yīng)該保證`letwxid`都是從首頁(yè)傳遞下去的骨望，即只需要在首頁(yè)的url上加上`letwxid`,其他頁(yè)面的`letwxid`都是通過(guò)首頁(yè)傳遞下去的形式添加的硬爆。
>`letwxid`的查詢地址：http://wewiki.sinaapp.com/NG平臺(tái)letwxid對(duì)應(yīng)關(guān)系表
10.微信分享引用`wxshare`插件，在驗(yàn)證了身份信息后調(diào)用方法如下：
```js
wxshare.initWx(shareInfo,gameid,apiopenid,apitoken); //可能會(huì)有變動(dòng)
```
在沒(méi)有驗(yàn)證身份信息的時(shí)候調(diào)用方法如下：
```js
wxshare.initWxAuth(share, letwxid);
```
具體調(diào)用方式請(qǐng)參考下方的`wxshare.js的使用方法`擎鸠。
# jsng文件夾中的插件說(shuō)明
jsng文件夾中存放著項(xiàng)目中可能會(huì)用到的插件和`require.config.js`文件缀磕，
下面是jsng中各插件的的作用和使用說(shuō)明：
| 文件名稱?????|使用代號(hào)????| 說(shuō)明????????| 使用方法??????|
| :-------- |:---------|:---------| :-------- |
| require.config.js??| 無(wú) | requirejs的配置文件，其中規(guī)定了各種插件????|?????????????|
| MHJ.js?????| MHJ??| 包含了一些常用的基礎(chǔ)js方法?????|[MHJ.js使用方法](MHJ.md)|
| auth.js????| oAuth????| 用于進(jìn)行樂(lè)推的oAuth認(rèn)證????|[auth.js的使用方法](auth.md)|
| ngapi.js??????| ngapi???| 對(duì)服務(wù)器的請(qǐng)求（封裝了跨域請(qǐng)求和post請(qǐng)求）?????|[ngapi.js的使用方法](ngapi.md)|
| imgpreload.js????????| imgpreload????| 用于進(jìn)行圖片預(yù)加載????|[imgpreload.js的使用方法](imgpreload.md)|
| wxshare.js????| wxshare????| 對(duì)微信分享進(jìn)行了封裝????|[wxshare.js的使用方法](wxshare.md)|
| loading.js????| M????| 用于頁(yè)面進(jìn)行請(qǐng)求時(shí)的loading效果????|[loading.js的使用方法](loading.js)|
| css.min.js????| css????| 用于加載css文件????|[css.min.js的使用方法](https://github.com/guybedford/require-css)|
| hammer.min.js????| Hammer????| 一個(gè)觸摸插件????|[hammer.min.js的使用方法](https://github.com/hammerjs/hammer.js)|
| idangerous.swiper.min.js | Swiper????| swiper單頁(yè)滑動(dòng)插件????|[swiper.min.js的使用方法](https://github.com/nolimits4web/swiper/)|
| idangerous.swiper.hashnav.js????|??Swiper????|????依賴于swiper.min.js的添加hash的插件????|[hashnav.js的使用方法](hashnav.md)|
| idangerous.swiper_progress.js????|??Swiper????|????依賴于swiper.min.js的progress插件????|[progress.js的使用方法](progress.md)|
| qrcode.js????| QRCode????| 二維碼生成插件????|[qrcode的使用方法](https://github.com/kazuhikoarase/qrcode-generator)|
| shake.js????| Shake?????|搖一搖插件????|[shake.js的使用方法](https://github.com/alexgibson/shake.js)|
| jquery.min.js | $????????| jquery插件 |[jquery中文文檔](http://www.hemin.cn/jq/)|
| zepto.min.js?????| $????????| zepto插件（jQuery的簡(jiǎn)化版）????|[zepto中文文檔](http://mweb.baidu.com/zeptoapi/)|
| wx????| wx?????| 微信官方出的微信分享插件????|[使用方法](http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html)|
