新鲜热乎的2017年Hyper App开发姿势

APICloud混合APP开发入门指引

技术选型

  • APICloud 混合App开发技术之一
  • Bootstrap 4 最流行的css框架,没有之一
  • Vue2 用数据渲染模板、事件处理
  • jQuery 用它批量绑定事件和请求接口

准备工作

  • APICloud官网注册账号(可选)
  • 下载AppLoader,用于APP开发过程的真机快速调试
  • Sublime安装APICloud Snippets插件
  • 安装apicloud命令行工具: npm install -g apicloud-cli
  1. 进入开发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打开当前项目
  1. 在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>
  1. ./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>

真机调试运行

  1. 在终端中运行apicloud wifiStart开启wifi同步服务器,注意显示的ip和端口,不要关闭本窗口。
  2. 打开手机上的AppLoader,点击右侧中间的半透明圆球,输入电脑的IP和端口连接,一般是192.168.1.x8686(确保手机和电脑在同一网段,连接后圆球为浅绿色)。
  3. 连上后再打开一个终端,进入项目文件夹,如:~/app/jianshu,输入apicloud wifiSync 同步代码到手机,手机应该会显示同步过程并自动运行App。

演示截图

《新鲜热乎的2017年Hyper App开发姿势》 Paste_Image.png

    原文作者:全栈之巅Johnny
    原文地址: https://www.jianshu.com/p/ff70bcdde4cf
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞