APICloud混合APP開發(fā)入門指引
技術(shù)選型
- APICloud 混合App開發(fā)技術(shù)之一
- Bootstrap 4 最流行的css框架，沒有之一
- Vue2 用數(shù)據(jù)渲染模板、事件處理
- jQuery 用它批量綁定事件和請求接口
準(zhǔn)備工作
- 去APICloud官網(wǎng)注冊賬號(可選)
- 下載AppLoader，用于APP開發(fā)過程的真機(jī)快速調(diào)試
- Sublime安裝
APICloud Snippets插件 - 安裝apicloud命令行工具：
npm install -g apicloud-cli
- 進(jìn)入開發(fā)App的項(xiàng)目根目錄，如：
~/app/或D:\app\\，在終端運(yùn)行以下命令（不要輸入#及其后面的內(nèi)容）：
apicloud help #看看都有啥命令
apicloud init --template default --name jianshu #創(chuàng)建一個(gè)apicloud項(xiàng)目，jianshu是項(xiàng)目和文件夾名
cd jianshu #進(jìn)入jianshu文件夾
yarn add jquery vue bootstrap@4.0.0-alpha.6 fastclick font-awesome #安裝所需的包
echo "**/node_modules/**" > .syncignore #向手機(jī)同步文件時(shí)忽略這些文件
cp `find node_modules -name "*.min.js"` script #復(fù)制所有的*.min.js到script文件夾
cp `find node_modules -name "*.min.css"` css #復(fù)制所有的*.min.css到css文件夾
cp -r node_modules/font-awesome/fonts . #復(fù)制Font Awesome的字體文件夾到當(dāng)前目錄
echo >index.html #清空index.html
echo > html/main.html #清空html/main.html
subl . #用sublime打開當(dāng)前項(xiàng)目
- 在Sublime中雙擊
index.html編輯，貼入以下代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小簡書</title>
<meta name="viewport" content="user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
</head>
<body>
<div id="app">
<nav id="header" class="text-center fixed-top pb-0">
<h5>小簡書</h5>
</nav>
<nav id="footer" class="text-center fixed-bottom text-muted">
<div class="d-flex pl-3 pr-3 pt-2 justify-content-between">
<div class="text-success"><i class="fa fa-users"></i><br>關(guān)注</div>
<div><i class="fa fa-safari"></i><br>發(fā)現(xiàn)</div>
<div><i class="fa fa-plus"></i><br>寫文章</div>
<div><i class="fa fa-bell-o"></i><br>消息</div>
<div><i class="fa fa-user-o"></i><br>我的</div>
</div>
</nav>
</div>
<script src="./script/api.js"></script>
<script src="./script/jquery.min.js"></script>
<script>
apiready = function () {
$api.fixStatusBar($api.byId('header'));
api.setStatusBarStyle({
style: 'dark'
});
api.openFrame({
name: 'main',
url: './html/main.html',
rect: {
x: 0,
y: $('#header').outerHeight(),
w: 'auto',
h: screen.height - $('#header').outerHeight() - $('#footer').outerHeight()
},
bounces: true
});
}
</script>
</body>
</html>
- 在
./html/main.html中貼入以下代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小簡書</title>
<meta name="viewport" content="user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div>
<div class="container pt-3">
<p>什么都沒有</p>
</div>
</div>
</body>
</html>
真機(jī)調(diào)試運(yùn)行
- 在終端中運(yùn)行
apicloud wifiStart開啟wifi同步服務(wù)器，注意顯示的ip和端口，不要關(guān)閉本窗口。 - 打開手機(jī)上的AppLoader，點(diǎn)擊右側(cè)中間的半透明圓球，輸入電腦的IP和端口連接，一般是
192.168.1.x和8686（確保手機(jī)和電腦在同一網(wǎng)段，連接后圓球?yàn)闇\綠色）。 - 連上后再打開一個(gè)終端，進(jìn)入項(xiàng)目文件夾，如:
~/app/jianshu，輸入apicloud wifiSync同步代碼到手機(jī)，手機(jī)應(yīng)該會顯示同步過程并自動運(yùn)行App。
演示截圖
Paste_Image.png
