APICloud開(kāi)發(fā)平臺(tái)可實(shí)現(xiàn)快速開(kāi)發(fā)iOS、Android、小程序等多端應(yīng)用。使用模塊和多端組件可以極大提高開(kāi)發(fā)效率,節(jié)省開(kāi)發(fā)時(shí)間。
本文將詳細(xì)介紹APICloud 的原生模塊、H5模塊以及多端組件的使用教程,以期幫助開(kāi)發(fā)者更好地使用平臺(tái)。
一、原生模塊使用教程
原生模塊是指使用 Android 和 iOS原生開(kāi)發(fā)語(yǔ)言封裝的功能模塊。封裝好的模塊可以使用js調(diào)用。
(1)添加模塊
進(jìn)入 APICloud 控制臺(tái),找到模塊庫(kù),搜索要使用的模塊。
點(diǎn)擊”+“進(jìn)行添加
(2)編譯自定義loader ,并下載安裝到手機(jī)
自定義loader是Android或iOS安裝包,也是我們進(jìn)行開(kāi)發(fā)調(diào)試的運(yùn)行環(huán)境。代碼修改后,使用開(kāi)發(fā)工具 Studio 3 的 WiFi 同步功能,把代碼同步到自定義loader中,可以查看修改代碼的運(yùn)行效果。如下圖,點(diǎn)擊自定義loader 導(dǎo)航, 點(diǎn)擊【編譯Android 自定義loader】按鈕或 【編譯iOS自定義loader】按鈕,進(jìn)行編譯。編譯完成后,使用手機(jī)掃描二維碼,下載安裝到手機(jī)。
(3)根據(jù)模塊文檔,編寫(xiě)調(diào)用模塊的代碼。
使用模塊前一定要仔細(xì)閱讀模塊文檔,尤其是看清楚模塊的支持平臺(tái),是否Android、iOS都支持。某些模塊封裝第三方平臺(tái)的SDK, 如極光推送模塊,在使用這類(lèi)模塊時(shí),不僅要閱讀模塊文檔,還要閱讀極光官方的文檔。
以UIButton 模塊為例,打開(kāi)編輯器,在頁(yè)面編寫(xiě)代碼,調(diào)用UIButton模塊的open 接口。
如何使用 Studio 3 編輯器檢出項(xiàng)目,新建項(xiàng)目,提交或更新代碼,本文不做介紹,可查看APICloud官網(wǎng)的Studio 3文檔進(jìn)行學(xué)習(xí)。
(4)使用 Studio 3 WiFi 同步功能,將代碼同步到自定義loader 查看代碼運(yùn)行效果。
如下圖,點(diǎn)擊真機(jī)同步快捷鍵 , 點(diǎn)擊 【通過(guò)Wi-Fi 連接新的設(shè)備】, 彈出二維碼和IP地址、端口號(hào)。
打開(kāi)手機(jī)上的自定義loader,點(diǎn)擊淺灰色圓圈,彈出如下界面,點(diǎn)擊掃一掃,可以?huà)呙枭蠄D的二維碼,自動(dòng)連接?；蛘呤謩?dòng)輸入IP地址和端口號(hào),然后點(diǎn)連接。連接成功后,灰色圓圈變綠色。
在開(kāi)發(fā)工具項(xiàng)目根目錄上右鍵 - 選擇 WiFi 同步全量命令,就可以把代碼同步到自定義loader。( 注意手機(jī)上自定義loader 要處于打開(kāi)狀態(tài),不能退到后臺(tái)。)
運(yùn)行效果如下圖:可以看到按鈕模塊的效果已經(jīng)顯示在頁(yè)面上。
其他注意事項(xiàng):
(1)如果使用需要在config.xml 中配置appkey , 或res 目錄下需要配置文件。這兩種情形,要配置代碼后,先提交代碼,再編譯自定義loader,這樣這些配置項(xiàng)才能生效。
(2)open 接口的fixedOn 參數(shù)指定模塊所在頁(yè)面的name,如果傳錯(cuò)誤,會(huì)造成模塊不顯示。
二、H5模塊使用教程
H5模塊是指使用HTML、CSS、JS語(yǔ)言開(kāi)發(fā)的模塊。所以這類(lèi)模塊需要下載模塊源碼,在頁(yè)面中引用。
將下載后的代碼包解壓:
將 libs 目錄下的base.js 復(fù)制到項(xiàng)目script 目錄下,并在頁(yè)面中引入,如下圖:
WiFi 同步后,運(yùn)行效果如下:
三、多端組件使用教程
多端組件是指使用 avm.js 開(kāi)發(fā)的組件,通常同時(shí)適配Android、iOS、小程序、H5 , 具體支持情況還要看每個(gè)組件的說(shuō)明文檔。
同樣需要組件下載源碼,復(fù)制到項(xiàng)目中,在頁(yè)面引入依賴(lài)的組件。注意多端開(kāi)發(fā)模式,使用的是stml 頁(yè)面,語(yǔ)法類(lèi)似vue 。在openFrame 或 openWin 時(shí) avm 參數(shù)傳true,可以打開(kāi)stml 頁(yè)面。
將a-button.stml 頁(yè)面復(fù)制到項(xiàng)目的components目錄,因?yàn)閍-button.stml 又依賴(lài)a-icon.stml index.js Toast.js , 所以將這些文件也放到components目錄。通過(guò)閱讀readme.md 文檔,可以查查看a-button.stml 的使用介紹。如下圖,通過(guò)在 view 標(biāo)簽中 添加 a-button 標(biāo)簽,在 script 標(biāo)簽中通過(guò) import 語(yǔ)法引入組件。
WiFi 同步到自定義loader 運(yùn)行效果如下:
APICloud的模塊商城和多端組件可幫助開(kāi)發(fā)者快速實(shí)現(xiàn)業(yè)務(wù)需求,非常適合剛接觸低代碼開(kāi)發(fā)平臺(tái)的開(kāi)發(fā)者,感興趣的小伙伴可以來(lái)學(xué)習(xí)嘗試下～
