新鲜热乎的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 [email protected] 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编辑，贴入以下代码：

    
    
    
    
    
    


    

        

            
小
        

        

            

                

关注
                

发现
                

写文章
                

消息
                

我的
            
        
    
    
    
    

1. 在./html/main.html中贴入以下代码：

    
    
    
    
    
    


    

        

            
什么都没有
        
    

真机调试运行

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

演示截图

Paste_Image.png