用友【APICloud】教你從零入門模塊及多端組件使用

APICloud開發(fā)平臺可實現(xiàn)快速開發(fā)iOS、Android、小程序等多端應用。使用模塊和多端組件可以極大提高開發(fā)效率,節(jié)省開發(fā)時間。

本文將詳細介紹APICloud 的原生模塊、H5模塊以及多端組件的使用教程,以期幫助開發(fā)者更好地使用平臺。

一、原生模塊使用教程

原生模塊是指使用 Android 和 iOS原生開發(fā)語言封裝的功能模塊。封裝好的模塊可以使用js調(diào)用。

(1)添加模塊

進入 APICloud 控制臺,找到模塊庫,搜索要使用的模塊。

用友【APICloud】教你從零入門模塊及多端組件使用

點擊”+“進行添加

用友【APICloud】教你從零入門模塊及多端組件使用

(2)編譯自定義loader ,并下載安裝到手機

自定義loader是Android或iOS安裝包,也是我們進行開發(fā)調(diào)試的運行環(huán)境。代碼修改后,使用開發(fā)工具 Studio 3 的 WiFi 同步功能,把代碼同步到自定義loader中,可以查看修改代碼的運行效果。如下圖,點擊自定義loader 導航, 點擊【編譯Android 自定義loader】按鈕或 【編譯iOS自定義loader】按鈕,進行編譯。編譯完成后,使用手機掃描二維碼,下載安裝到手機。

用友【APICloud】教你從零入門模塊及多端組件使用

用友【APICloud】教你從零入門模塊及多端組件使用

(3)根據(jù)模塊文檔,編寫調(diào)用模塊的代碼。

使用模塊前一定要仔細閱讀模塊文檔,尤其是看清楚模塊的支持平臺,是否Android、iOS都支持。某些模塊封裝第三方平臺的SDK, 如極光推送模塊,在使用這類模塊時,不僅要閱讀模塊文檔,還要閱讀極光官方的文檔。

以UIButton 模塊為例,打開編輯器,在頁面編寫代碼,調(diào)用UIButton模塊的open 接口。

用友【APICloud】教你從零入門模塊及多端組件使用

如何使用 Studio 3 編輯器檢出項目,新建項目,提交或更新代碼,本文不做介紹,可查看APICloud官網(wǎng)的Studio 3文檔進行學習。

(4)使用 Studio 3 WiFi 同步功能,將代碼同步到自定義loader 查看代碼運行效果。

如下圖,點擊真機同步快捷鍵 , 點擊 【通過Wi-Fi 連接新的設備】, 彈出二維碼和IP地址、端口號。

用友【APICloud】教你從零入門模塊及多端組件使用

打開手機上的自定義loader,點擊淺灰色圓圈,彈出如下界面,點擊掃一掃,可以掃描上圖的二維碼,自動連接。或者手動輸入IP地址和端口號,然后點連接。連接成功后,灰色圓圈變綠色。

在開發(fā)工具項目根目錄上右鍵 - 選擇 WiFi 同步全量命令,就可以把代碼同步到自定義loader。( 注意手機上自定義loader 要處于打開狀態(tài),不能退到后臺。)

用友【APICloud】教你從零入門模塊及多端組件使用

運行效果如下圖:可以看到按鈕模塊的效果已經(jīng)顯示在頁面上。

用友【APICloud】教你從零入門模塊及多端組件使用

其他注意事項:

(1)如果使用需要在config.xml 中配置appkey , 或res 目錄下需要配置文件。這兩種情形,要配置代碼后,先提交代碼,再編譯自定義loader,這樣這些配置項才能生效。

(2)open 接口的fixedOn 參數(shù)指定模塊所在頁面的name,如果傳錯誤,會造成模塊不顯示。

二、H5模塊使用教程

H5模塊是指使用HTML、CSS、JS語言開發(fā)的模塊。所以這類模塊需要下載模塊源碼,在頁面中引用。

用友【APICloud】教你從零入門模塊及多端組件使用

用友【APICloud】教你從零入門模塊及多端組件使用

將下載后的代碼包解壓:

用友【APICloud】教你從零入門模塊及多端組件使用

將 libs 目錄下的base.js 復制到項目script 目錄下,并在頁面中引入,如下圖:

用友【APICloud】教你從零入門模塊及多端組件使用

WiFi 同步后,運行效果如下:

用友【APICloud】教你從零入門模塊及多端組件使用

三、多端組件使用教程

多端組件是指使用 avm.js 開發(fā)的組件,通常同時適配Android、iOS、小程序、H5 , 具體支持情況還要看每個組件的說明文檔。

用友【APICloud】教你從零入門模塊及多端組件使用

同樣需要組件下載源碼,復制到項目中,在頁面引入依賴的組件。注意多端開發(fā)模式,使用的是stml 頁面,語法類似vue 。在openFrame 或 openWin 時 avm 參數(shù)傳true,可以打開stml 頁面。

用友【APICloud】教你從零入門模塊及多端組件使用

用友【APICloud】教你從零入門模塊及多端組件使用

將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 語法引入組件。

用友【APICloud】教你從零入門模塊及多端組件使用

WiFi 同步到自定義loader 運行效果如下:

用友【APICloud】教你從零入門模塊及多端組件使用

APICloud的模塊商城和多端組件可幫助開發(fā)者快速實現(xiàn)業(yè)務需求,非常適合剛接觸低代碼開發(fā)平臺的開發(fā)者,感興趣的小伙伴可以來學習嘗試下~

(免責聲明:本網(wǎng)站內(nèi)容主要來自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿,凡在本網(wǎng)站出現(xiàn)的信息,均僅供參考。本網(wǎng)站將盡力確保所提供信息的準確性及可靠性,但不保證有關資料的準確性及可靠性,讀者在使用前請進一步核實,并對任何自主決定的行為負責。本網(wǎng)站對有關資料所引致的錯誤、不確或遺漏,概不負任何法律責任。
任何單位或個人認為本網(wǎng)站中的網(wǎng)頁或鏈接內(nèi)容可能涉嫌侵犯其知識產(chǎn)權或存在不實內(nèi)容時,應及時向本網(wǎng)站提出書面權利通知或不實情況說明,并提供身份證明、權屬證明及詳細侵權或不實情況證明。本網(wǎng)站在收到上述法律文件后,將會依法盡快聯(lián)系相關文章源頭核實,溝通刪除相關內(nèi)容或斷開相關鏈接。 )