1. 程式人生 > >1.3.0 APICloud HelloWorld

1.3.0 APICloud HelloWorld

HelloWorld

本文主要介紹使用apicloud建立第一個app

建立第一個APP

開啟IDE首頁登陸賬號新建一個移動應用

本節需要下載IDE和搭建開發環境
沒有下載IDE或環境搭建請移步APICLOUD 1.1.0 開發環境搭建
在這裡插入圖片描述

填入完整資訊選擇完成

在這裡插入圖片描述

說明:如果是mac系統並且建立失敗的話以下這種情況
在這裡插入圖片描述

Can't locate SVN/Core.pm in @INC (you may need to install the SVN::Core module) (@INC contains: 
/usr/local/git/lib/perl5/site_perl/5.18.2/darwin-thread-multi-2level /usr/local/git/lib/perl5/site_perl/5.18.2 
/usr/local/git/lib/perl5/site_perl /Library/Perl/5.18/darwin-thread-multi-2level /Library/Perl/5.18 /Network/Library/Perl/5.18/darwin-thread-multi-2level /Network/Library/Perl/5.18 
/Library/Perl/Updates/5.18.2 /System/Library/Perl/5.18/darwin-thread-multi-2level /System/Library/Perl/5.18 
/System/Library/Perl/Extras/5.18/darwin-thread-multi-2level /System/Library/Perl/Extras/5.18 .) at /usr/local/git/lib/perl5/site_perl/Git/SVN/Utils.pm line 6. BEGIN failed--compilation aborted at /usr/local/git/lib/perl5/site_perl/Gi
t/SVN/Utils.pm line 6. Compilation failed in require at /usr/local/git/lib/perl5/site_perl/Git/SVN.pm line 25. BEGIN failed--compilation aborted at /usr/local/git/lib/perl5/site_perl/Git/SVN.pm line 32. Compilation failed in require at /usr/local/git/libexec/git-core/git-svn line 21. BEGIN failed--compilation aborted at /usr/local/git/libexec/git-core/git-svn line 21.
檢出到指定路徑:false

解決方案:

開啟終端輸入

sudo ln -s /Applications/Xcode.app/Contents/Developer/Library/Perl/5.18/darwin-thread-multi-2level/SVN/ /Library/Perl/5.18/SVN
sudo mkdir /Library/Perl/5.18/auto
sudo ln -s /Applications/Xcode.app/Contents/Developer/Library/Perl/5.18/darwin-thread-multi-2level/auto/SVN/ /Library/Perl/5.18/auto/SVN

這裡主要是因為svn的路徑問題
解決方案大致就是:
通過命令列軟鏈到新建立的目錄下
搞定了以後

專案結構是這樣子的

在這裡插入圖片描述

開啟html資料夾下的main.html

第一步
首先找到下面這行程式碼

<label id="con">Hello APIcloud</label>

改為:

<label id="con">Hello World</label>

第二步

在第一步程式碼的下一行是:

   <div id='sys-info'></div>

改為

  <!-- <div id='sys-info'></div> -->

第三步

大概在60幾行,找到下面程式碼

$api.byId('sys-info').innerHTML = str;

改為:

// $api.byId('sys-info').innerHTML = str;

開啟之前搭建環境APICLOUD 1.1.0 開發環境搭建安裝的模擬器

開啟apploader
在這裡插入圖片描述

注意:這裡的輸入的是你的ip地址和埠
對應的就是IDE對應的IP和埠

在這裡插入圖片描述

ps:如果你用自己的手機執行APPloader要和電腦在同一網路環境(wifi)下才能連結

在這裡插入圖片描述

我這裡有兩個ip選一個填就好了

填好以後點選連線如果像上手機截圖一樣 透明的懸浮球變成綠色了說明就已經連線成功了
成功以後回到IDE 點選專案>執行就能看見效果了!!
在這裡插入圖片描述

這就是執行效果圖了

最後,專案結構介紹

HelloWorld
├── config.xml 配置檔案
├── css 樣式資料夾
│ ├── api.css
│ ├── aui-iconfont.ttf
│ ├── aui-slide.css
│ └── aui.css
├── feature 全域性常量定義
├── html 佈局資料夾
│ └── main.html
├── icon APP圖示
│ └── icon150x150.png
├── image 靜態圖片資料夾
├── index.html 入口布局
├── launch APP啟動頁面
│ └── launch1080x1920.png
├── res 資源擴充套件
├── script 指令碼資料夾
│ ├── api.js
│ ├── aui-slide.js
│ └── aui-tab.js
└── wgt 可以將這個app作為一個weigt放入資料夾作為模組使用