APICloud混合APP开发入门指引
技术选型
- APICloud 混合App开发技术之一
- Bootstrap 4 最流行的css框架，没有之一
- Vue2 用数据渲染模板、事件处理
- jQuery 用它批量绑定事件和请求接口
准备工作
- 去APICloud官网注册账号(可选)
- 下载AppLoader，用于APP开发过程的真机快速调试
- Sublime安装
APICloud Snippets插件 - 安装apicloud命令行工具：
npm install -g apicloud-cli
- 进入开发App的项目根目录，如：
~/app/或D:\app\\，在终端运行以下命令（不要输入#及其后面的内容）：
apicloud help #看看都有啥命令
apicloud init --template default --name jianshu #创建一个apicloud项目，jianshu是项目和文件夹名
cd jianshu #进入jianshu文件夹
yarn add jquery vue bootstrap@4.0.0-alpha.6 fastclick font-awesome #安装所需的包
echo "**/node_modules/**" > .syncignore #向手机同步文件时忽略这些文件
cp `find node_modules -name "*.min.js"` script #复制所有的*.min.js到script文件夹
cp `find node_modules -name "*.min.css"` css #复制所有的*.min.css到css文件夹
cp -r node_modules/font-awesome/fonts . #复制Font Awesome的字体文件夹到当前目录
echo >index.html #清空index.html
echo > html/main.html #清空html/main.html
subl . #用sublime打开当前项目
- 在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>关注</div>
<div><i class="fa fa-safari"></i><br>发现</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>
真机调试运行
- 在终端中运行
apicloud wifiStart开启wifi同步服务器，注意显示的ip和端口，不要关闭本窗口。 - 打开手机上的AppLoader，点击右侧中间的半透明圆球，输入电脑的IP和端口连接，一般是
192.168.1.x和8686（确保手机和电脑在同一网段，连接后圆球为浅绿色）。 - 连上后再打开一个终端，进入项目文件夹，如:
~/app/jianshu，输入apicloud wifiSync同步代码到手机，手机应该会显示同步过程并自动运行App。
演示截图
Paste_Image.png
