樂推微信前端基于requirejs的工作模式

資源網(wǎng)址：

• 樂推官網(wǎng)：http://ng.letwx.com
• 樂推wiki網(wǎng)址：http://wewiki.sinaapp.com
• 樂推接口文檔：http://wewiki.sinaapp.com/Ng.letwx.com接口文檔
• 協(xié)作平臺(tái)worktile：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)址中的 樂推接口文檔 中的1,2,3部分，然后再向下閱讀。

樂推服務(wù)器上的工作目錄如下：
    ng.letwx.com
        |
        |----app                項(xiàng)目的工作目錄
        |----styles          
                 |----css       項(xiàng)目中可能會(huì)用到的插件所依賴的css文件
                 |----jsng      項(xiàng)目中可能會(huì)用到的插件 和 require.config.js文件

開發(fā)人員需要svn更新上述 SVN工作目錄 中的兩個(gè)svn目錄。

為了使得項(xiàng)目上線和本地開發(fā)盡可能一致，在項(xiàng)目提交時(shí)改動(dòng)的內(nèi)容最小化，且便于團(tuán)隊(duì)之間相互合作，
要保證 `app` 文件夾 和 `styles` 文件夾在同一級(jí)目錄下，并且保證你的本地服務(wù)器可以直接訪問到app所在的目錄，
因此你的本地工作路徑應(yīng)該是這樣的：http://192.168.1.2:8080/app/xxx/xxx.html

開發(fā)規(guī)則

開發(fā)人員需要遵守如下規(guī)則：

1.開發(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的方式：

<script data-main="js/index" defer="defer" async="async" src="http://ngcdn.letwx.com/styles/jsng/require.min.js"></script>

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)）：

var isDebug = (function(){
    var hostnameIndex = window.location.hostname.split('.')[0];
    return (hostnameIndex == '192') || (hostnameIndex == '127') || (hostnameIndex == 'localhost') || (hostnameIndex == '');
}());

5.應(yīng)用需要驗(yàn)證token信息的，代碼如下：

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è)組件，可以這樣引用：

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ù)器傳過來的數(shù)據(jù)中的error信息是否等于1002，如果等于1002就需要清除token信息（error等于1002代表token信息過期），具體代碼如下：

    var error = data.error - 0;
    if(error == 1002){
        alert('您的身份信息已過期，點(diǎn)擊確定重新加載頁(yè)面！');
        oAuth.clear();
        window.location.reload();
    }

8.在測(cè)試地址下，微信分享是無法正常調(diào)用的，因?yàn)樾枰谖⑿藕笈_(tái)設(shè)置相應(yīng)的域名才可以，所以建議微信分享的代碼在其他邏輯都完成之后再加入到頁(yè)面中去。

9.開發(fā)人員開發(fā)的任何一個(gè)項(xiàng)目的url上都需要帶有 letwxid 這個(gè)字段，形式如下：

http://ng.letwx.com/app/xxx/index.html?letwxid=12

目的是為了便于管理、修改相關(guān)應(yīng)用，以及依賴于 letwxid 會(huì)做一些其他的操作。開發(fā)人員開發(fā)時(shí)，如果一個(gè)應(yīng)用中有多個(gè)頁(yè)面，應(yīng)該保證 letwxid 都是從首頁(yè)傳遞下去的，即只需要在首頁(yè)的url上加上 letwxid ,其他頁(yè)面的 letwxid 都是通過首頁(yè)傳遞下去的形式添加的。

letwxid 的查詢地址：http://wewiki.sinaapp.com/NG平臺(tái)letwxid對(duì)應(yīng)關(guān)系表

10.微信分享引用 wxshare 插件，在驗(yàn)證了身份信息后調(diào)用方法如下：

wxshare.initWx(shareInfo,gameid,apiopenid,apitoken); //可能會(huì)有變動(dòng)

在沒有驗(yàn)證身份信息的時(shí)候調(diào)用方法如下：

wxshare.initWxAuth(share, letwxid);

具體調(diào)用方式請(qǐng)參考下方的 wxshare.js的使用方法。

jsng文件夾中的插件說明

jsng文件夾中存放著項(xiàng)目中可能會(huì)用到的插件和 require.config.js文件，

下面是jsng中各插件的的作用和使用說明：

var config = (function(){
    var baseurl = 'http://lppz.letwx.com/app/eat/';
    var arr = window.location.hostname.split('.')[0];
    var isDebug = (arr=='192')||(arr=='127')||(arr=='localhost')||(arr=='');
    return {
        touch : 'touchstart',
        isDebug : isDebug,
        baseUrl : isDebug ? '../../../lppz/eat' : baseurl,
        urlConfig : isDebug ? 'js/libs/require.config.js':baseurl+'js/libs/require.config.js'
    }
}());