APICloud開發(fā)平臺(tái)可實(shí)現(xiàn)快速開發(fā)iOS、Android、小程序等多端應(yīng)用。使用模塊和多端組件可以極大提高開發(fā)效率,節(jié)省開發(fā)時(shí)間。
本文將詳細(xì)介紹APICloud 的原生模塊、H5模塊以及多端組件的使用教程,以期幫助開發(fā)者更好地使用平臺(tái)。
一、原生模塊使用教程
原生模塊是指使用 Android 和 iOS原生開發(fā)語(yǔ)言封裝的功能模塊。封裝好的模塊可以使用js調(diào)用。
(1)添加模塊
進(jìn)入 APICloud 控制臺(tái),找到模塊庫(kù),搜索要使用的模塊。
點(diǎn)擊”+“進(jìn)行添加
(2)編譯自定義loader ,并下載安裝到手機(jī)
自定義loader是Android或iOS安裝包,也是我們進(jìn)行開發(fā)調(diào)試的運(yùn)行環(huán)境。代碼修改后,使用開發(fā)工具 Studio 3 的 WiFi 同步功能,把代碼同步到自定義loader中,可以查看修改代碼的運(yùn)行效果。如下圖,點(diǎn)擊自定義loader 導(dǎo)航, 點(diǎn)擊【編譯Android 自定義loader】按鈕或 【編譯iOS自定義loader】按鈕,進(jìn)行編譯。編譯完成后,使用手機(jī)掃描二維碼,下載安裝到手機(jī)。
(3)根據(jù)模塊文檔,編寫調(diào)用模塊的代碼。
使用模塊前一定要仔細(xì)閱讀模塊文檔,尤其是看清楚模塊的支持平臺(tái),是否Android、iOS都支持。某些模塊封裝第三方平臺(tái)的SDK, 如極光推送模塊,在使用這類模塊時(shí),不僅要閱讀模塊文檔,還要閱讀極光官方的文檔。
以UIButton 模塊為例,打開編輯器,在頁(yè)面編寫代碼,調(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)。
打開手機(jī)上的自定義loader,點(diǎn)擊淺灰色圓圈,彈出如下界面,點(diǎn)擊掃一掃,可以掃描上圖的二維碼,自動(dòng)連接?；蛘呤謩?dòng)輸入IP地址和端口號(hào),然后點(diǎn)連接。連接成功后,灰色圓圈變綠色。
在開發(fā)工具項(xiàng)目根目錄上右鍵 - 選擇 WiFi 同步全量命令,就可以把代碼同步到自定義loader。( 注意手機(jī)上自定義loader 要處于打開狀態(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ǔ)言開發(fā)的模塊。所以這類模塊需要下載模塊源碼,在頁(yè)面中引用。
將下載后的代碼包解壓:
將 libs 目錄下的base.js 復(fù)制到項(xiàng)目script 目錄下,并在頁(yè)面中引入,如下圖:
WiFi 同步后,運(yùn)行效果如下:
三、多端組件使用教程
多端組件是指使用 avm.js 開發(fā)的組件,通常同時(shí)適配Android、iOS、小程序、H5 , 具體支持情況還要看每個(gè)組件的說(shuō)明文檔。
同樣需要組件下載源碼,復(fù)制到項(xiàng)目中,在頁(yè)面引入依賴的組件。注意多端開發(fā)模式,使用的是stml 頁(yè)面,語(yǔ)法類似vue 。在openFrame 或 openWin 時(shí) avm 參數(shù)傳true,可以打開stml 頁(yè)面。
將a-button.stml 頁(yè)面復(fù)制到項(xiàng)目的components目錄,因?yàn)閍-button.stml 又依賴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的模塊商城和多端組件可幫助開發(fā)者快速實(shí)現(xiàn)業(yè)務(wù)需求,非常適合剛接觸低代碼開發(fā)平臺(tái)的開發(fā)者,感興趣的小伙伴可以來(lái)學(xué)習(xí)嘗試下～
（免責(zé)聲明：本網(wǎng)站內(nèi)容主要來(lái)自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿，凡在本網(wǎng)站出現(xiàn)的信息，均僅供參考。本網(wǎng)站將盡力確保所提供信息的準(zhǔn)確性及可靠性，但不保證有關(guān)資料的準(zhǔn)確性及可靠性，讀者在使用前請(qǐng)進(jìn)一步核實(shí)，并對(duì)任何自主決定的行為負(fù)責(zé)。本網(wǎng)站對(duì)有關(guān)資料所引致的錯(cuò)誤、不確或遺漏，概不負(fù)任何法律責(zé)任。
任何單位或個(gè)人認(rèn)為本網(wǎng)站中的網(wǎng)頁(yè)或鏈接內(nèi)容可能涉嫌侵犯其知識(shí)產(chǎn)權(quán)或存在不實(shí)內(nèi)容時(shí)，應(yīng)及時(shí)向本網(wǎng)站提出書面權(quán)利通知或不實(shí)情況說(shuō)明，并提供身份證明、權(quán)屬證明及詳細(xì)侵權(quán)或不實(shí)情況證明。本網(wǎng)站在收到上述法律文件后，將會(huì)依法盡快聯(lián)系相關(guān)文章源頭核實(shí)，溝通刪除相關(guān)內(nèi)容或斷開相關(guān)鏈接。 ）
