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