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

寫在前面：以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
//窗口打開暫不支持多窗口數(shù)組形式

另外，想要使用微信接口，需要后端提供一個(gè)簽名服務(wù)器（該版面提供nodejs 版本），并且再所有用到接口的頁面進(jìn)行簽名否則所有接口失效，該版本提供一個(gè)setWeiXinConfig(url)方法，進(jìn)行自動簽名，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)用開發(fā)完成后，如要生成Web/微信 App，需先配置當(dāng)前應(yīng)用的config.xml文件，勾選”Web/微信 App”選項(xiàng)并保存；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3、常見問題及解決方法

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

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