IDE開(kāi)發(fā)流程之多入口開(kāi)發(fā)(Beta版)

隨著移動(dòng)互聯(lián)網(wǎng)的爆發(fā)，入口之爭(zhēng)愈演愈烈。從大的趨勢(shì)看，App、Web、微信成為最火熱的三大入口。這給移動(dòng)開(kāi)發(fā)者和移動(dòng)創(chuàng)業(yè)者帶來(lái)新的考驗(yàn)，需要考慮多個(gè)入口下的開(kāi)發(fā)與管理。
順應(yīng)這種趨勢(shì)，AppCan全新升級(jí)IDE系統(tǒng)，為開(kāi)發(fā)者提供全入口開(kāi)發(fā)支持，即一次開(kāi)發(fā)，多平臺(tái)，多入口，全適配?；贏ppCan新版IDE，開(kāi)發(fā)者可一鍵生成App、Web/微信 App兩種形式，輕松應(yīng)對(duì)市場(chǎng)需求，在競(jìng)爭(zhēng)中更勝一籌。

寫(xiě)在前面：以Windows版ide操作為例，mac版ide可參考以下操作。

1、使用范圍

當(dāng)您的應(yīng)用中僅涉及到了以下方法，均可支持生成Web/微信 App。

uexWindow.open
uexWindow.cbOpen
uexWindow.close
uexWindow.cbClose
uexWindow.closeByName
uexWindow.openPopover
uexWindow.closePopover
uexWindow.setPopoverFrame
uexWindow.setBounce
uexWindow.refreshBounce
uexWindow.evaluateScript
uexWindow.evaluatePopoverScript
uexWindow.alert
uexWindow.closeAlert
uexWindow.confirm
uexWindow.toast
uexWindow.closeToast
uexWindow.actionSheet
uexWindow.cbActionSheet
uexWindow.bringPopoverToFront
//窗口打開(kāi)暫不支持多窗口數(shù)組形式

另外，想要使用微信接口，需要后端提供一個(gè)簽名服務(wù)器（該版面提供nodejs 版本），并且再所有用到接口的頁(yè)面進(jìn)行簽名否則所有接口失效，該版本提供一個(gè)setWeiXinConfig(url)方法，進(jìn)行自動(dòng)簽名，URL是簽名接口的完整路徑。
已兼容接口：

· startRecord <==> uexAudio.startBackgroundRecord
· stopRecord <==> uexAudio.stopBackgroundRecord
· onVoiceRecordEnd <==> uexAudio.cbBackgroundRecord
· playVoice <==> uexAudio.open && uexAudio.play
· pauseVoice <==> uexAudio.pause
· stopVoice <==> uexAudio.stop
· onVoicePlayEnd <==> uexAudio.onPlayFinished
· chooseImage <==> uexImageBrowser.pick && uexImageBrowser.pickMulti
· previewImage <==> uexImageBrowser.open
· getNetworkType <==> device.getInfo(‘13’)
· openLocation <==> uexBaiduMap.open && uexBaiduMap.setZoomLevel && uexBaiduMap.setCenter
· getLocation <==> uexBaiduMap.getCurrentLocation
· scanQRCode <==> uexScanner.open
如想用微信其他接口，可自行封裝。

2、使用方法

在IDE中應(yīng)用開(kāi)發(fā)完成后，如要生成Web/微信 App，需先配置當(dāng)前應(yīng)用的config.xml文件，勾選”Web/微信 App”選項(xiàng)并保存；

請(qǐng)注意勾選保存之后，以下文件默認(rèn)會(huì)被替換成web微信文件，否則以下操作無(wú)法正常進(jìn)行！

注：勾選“Web/微信 App”后，請(qǐng)避免使用頁(yè)面實(shí)時(shí)預(yù)覽、模擬器調(diào)試及svn代碼上傳功能。如想使用，請(qǐng)?zhí)崆霸赾onfig.xml文件中勾掉不選。

在當(dāng)前應(yīng)用中選擇phone目錄右鍵，

1）、選擇“啟動(dòng)Web/微信 App服務(wù)”，可啟動(dòng)本地服務(wù)在內(nèi)網(wǎng)中預(yù)覽應(yīng)用效果，此時(shí)控制臺(tái)會(huì)顯示本機(jī)IP及端口

測(cè)試驗(yàn)證是否生效：在手機(jī)瀏覽器或微信中輸入或掃描IP+端口地址，直接預(yù)覽應(yīng)用效果；

2）、選擇“生成Web/微信 App”，在安裝目錄中的WebApp-Applications中生成一個(gè)zip包

將zip包部署至外網(wǎng)服務(wù)器即可訪(fǎng)問(wèn)。

3）、項(xiàng)目開(kāi)發(fā)完成后需要部署到服務(wù)器上才能訪(fǎng)問(wèn)，首先你需要一臺(tái)外網(wǎng)機(jī)器，以我的測(cè)試機(jī)器為例，登錄到服務(wù)器上

可以自己部署服務(wù)器，也可以用我們提供的nodejs包nodejs包，安裝nodejs，也可以參考nodejs官方文檔,按照完成后輸入node –version;查看nodejs是否安裝成功

部署我們提供的nodejs包，可以在index.js中修改端口號(hào)，你的webapp應(yīng)該放在public文件下，該目錄默認(rèn)為靜態(tài)文件目錄，你也可以在index.js中修改

把該包傳到服務(wù)器上然后，切換到相對(duì)應(yīng)目錄用node index.js來(lái)啟動(dòng)服務(wù)

注：使用node index.js啟動(dòng)服務(wù)時(shí)如遇以下錯(cuò)誤，請(qǐng)?jiān)诟夸泟?chuàng)建logs目錄即可

我們就可以在手機(jī)上訪(fǎng)問(wèn)我們的web app網(wǎng)站了地址為：http://ip:port/index.html
如果我們想生成微信的app，調(diào)用微信的接口，我們需要修改一下配置文件，來(lái)啟動(dòng)簽名服務(wù)。打開(kāi)config目錄下面的config.js文件

在微信的公眾號(hào)管理后臺(tái)中找到這些參數(shù)，參考：
http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html
http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

配置完成后重寫(xiě)啟動(dòng)node服務(wù)器后，可以打開(kāi)默認(rèn)的簽名服務(wù)接口

如需配置為自有的公眾號(hào)接入微信JS SDK接口，需登錄公眾號(hào)微信公眾平臺(tái)-》公眾號(hào)設(shè)置-》功能設(shè)置-》js接口安全域名設(shè)置，
例如：

生成微信版項(xiàng)目中plugin.js中已設(shè)置window.setWeinxinConfig()注冊(cè)簽名，在微信中打開(kāi)然后所有的接口都可用了，如需更改請(qǐng)根據(jù)需要傳入相應(yīng)參數(shù)。
微信jssdk接口驗(yàn)證使用的，只有使用的微信jssdk的時(shí)候才有用。設(shè)置當(dāng)前站點(diǎn)當(dāng)前頁(yè)面的url到微信jssdk官網(wǎng)驗(yàn)證通過(guò)

在微信中打開(kāi)然后所有的接口都可用了，demo效果,demo下載

3、常見(jiàn)問(wèn)題及解決方法

1）、名稱(chēng)沖突：如果你修改了一個(gè)元素屬性或者一個(gè)元素的樣式不起作用時(shí)，你可以考慮一下去檢查是不是元素命名沖突了，因?yàn)槲覀円阉械膒opover合并到一個(gè)頁(yè)面中所以會(huì)有沖突問(wèn)題。
2）、css樣式覆蓋：如果你加載一個(gè)頁(yè)面后原始頁(yè)面的其他樣式亂了，你可以考慮一下新頁(yè)面中的樣式是否把原有樣式覆蓋了，因?yàn)槲覀円阉械膒opover合并到一個(gè)頁(yè)面中所以會(huì)有沖突問(wèn)題。
3）、css樣式不起作用：如果你打開(kāi)一個(gè)新的popover頁(yè)面，引用的css文件中修改樣式不起作用，可以考慮這個(gè)問(wèn)題，同一個(gè)樣式在同一個(gè)win中只會(huì)加載一次，后續(xù)的不會(huì)加載。
4）、js沖突問(wèn)題：如果你新打開(kāi)一個(gè)浮動(dòng)窗口，然后關(guān)閉了，以前寫(xiě)的某個(gè)方法原本好的現(xiàn)在報(bào)錯(cuò)了，可以考慮一下這個(gè)問(wèn)題，因?yàn)槲覀円阉械膒opover合并到一個(gè)頁(yè)面中所以會(huì)有沖突問(wèn)題。
5）、js判斷問(wèn)題：如果你新打開(kāi)一個(gè)浮動(dòng)窗口，執(zhí)行一個(gè)判斷某一個(gè)變量是否存在，或者不是按照正確的方式，可以考慮一下這個(gè)問(wèn)題，因?yàn)槲覀円阉械膒opover合并到一個(gè)頁(yè)面中所以會(huì)有沖突問(wèn)題，所以后面執(zhí)行后會(huì)修改已存在的變量。
6）、body、html樣式問(wèn)題：如果你在body、html上面加了一些樣式，在web app中可能不顯示，因?yàn)槲覀兡J(rèn)會(huì)把所有的body、html、head等元素刪掉。
7）、滑動(dòng)區(qū)域高度問(wèn)題：如果你打開(kāi)popover之后操作dom,高度變化，請(qǐng)盡量調(diào)用refreshBounce更新IScroll高度，否則可能滑動(dòng)到底部會(huì)有顯示不完全的問(wèn)題
8）、白色popover問(wèn)題：由于popover會(huì)相互覆蓋，web app默認(rèn)會(huì)把所有的popover設(shè)置成白色，如果需要將popover設(shè)置成透明，請(qǐng)根據(jù)文檔設(shè)置extraInfo參數(shù)。
9）、返回按鈕：因?yàn)閛pen的頁(yè)面設(shè)計(jì)為跳轉(zhuǎn)，如果你在一個(gè)頁(yè)面調(diào)用openPopover，然后在popover內(nèi)調(diào)用open是從主窗口直接跳轉(zhuǎn)，然后close主窗口返回上一個(gè)主窗口，可能返回不到你之前在主窗口操作的記錄如底部有tab選項(xiàng)卡切換popover時(shí)，可通過(guò)setPopTabIndex(popName,index)設(shè)置浮動(dòng)窗口對(duì)應(yīng)的tab選項(xiàng)卡的索引值，配合監(jiān)控回調(diào)函數(shù)

            window.onUexWindowClose = function(obj){
                console.log(obj.tabIndex);
                tabview.moveTo(obj.tabIndex);
            }//實(shí)現(xiàn)close返回當(dāng)前主窗口時(shí)打開(kāi)對(duì)應(yīng)的浮動(dòng)窗口和tab選項(xiàng)卡

10）、修改頁(yè)面高度多出內(nèi)容會(huì)覆蓋：因?yàn)槲覀冇玫氖荌Scroll加載頁(yè)面，如果內(nèi)容修改需要重新刷新頁(yè)面保證頁(yè)面滾動(dòng)，請(qǐng)調(diào)用refreshBounce()來(lái)保證頁(yè)面效果。
11）、頁(yè)面展示內(nèi)容覆蓋：可以考慮內(nèi)容是否是異步加載的，因?yàn)槲覀兪侵苯尤‖F(xiàn)有的高度如果你異步加載某些內(nèi)容的話(huà)重新修改高度可能會(huì)把原來(lái)的已經(jīng)算好的popover覆蓋掉。
12）、頁(yè)面不能滑動(dòng)：如果你在某一個(gè)元素上面綁定了事件，同時(shí)阻止了事件的傳播這一塊可能造成IScroll接受不到事件導(dǎo)致頁(yè)面不能滑動(dòng)。
13）、功能不能用：請(qǐng)檢查是否用到了沒(méi)有封裝的接口，目前我們只對(duì)uexWindow做了封裝，如果是微信內(nèi)運(yùn)行的話(huà)還有一些微信的插件可以支持，另外如果取數(shù)據(jù)的話(huà)可以把a(bǔ)ppcan.request.ajax 改為Zepto.ajax,同時(shí)保證參數(shù)問(wèn)題，因?yàn)閆epto傳文件會(huì)有問(wèn)題，建議復(fù)用函數(shù)，這些多多少少還是有一點(diǎn)不同的，getJSON，get，post這些方法完全可以使用。
14）、元素點(diǎn)擊等默認(rèn)事件不響應(yīng)：如果打開(kāi)的頁(yè)面是popover,內(nèi)部在元素上添加了onclick事件，微信/web點(diǎn)擊的時(shí)候無(wú)法響應(yīng)，請(qǐng)給元素添加以btn開(kāi)頭的className,例如btn-click.因?yàn)閕frame內(nèi)容外層添加了IScroll,元素默認(rèn)的事件被阻止。
15）、close返回問(wèn)題：因?yàn)閣eb版新open方法打開(kāi)一個(gè)頁(yè)面是通過(guò)url跳轉(zhuǎn)，所以如果調(diào)用open方法打開(kāi)了a.html，當(dāng)a.html加載的時(shí)候調(diào)用open方法則從a.html跳轉(zhuǎn)到b.html,所以當(dāng)從b.html調(diào)用close方法返回到a.html的時(shí)候又會(huì)open跳轉(zhuǎn)到b.html從而陷入死循環(huán)，因此類(lèi)似原app版本的抽屜效果暫時(shí)未予支持