使用monaca快速开发HybridApp

Posted on   |   In   |     |  

安装Monaca CLI

1
npm install -g monaca

注意要全局安装，也就是加上-g

国内如果直接安装不上的话，可以试试cnpm

1
cnpm install -g monaca

cnpm 可以通过 npm install -g cnpm来进行安装，是阿里为npm在国内的镜像网；

安装成功后

1
2
monaca -v
2.1.6

这样就说明安装无误了

创建一个APP应用

1
monaca create my-app

接下来你会看到有几个模板，其实也可以说是monaca目前集成好的几个框架可以选用，相当于一个脚手架，monaca跟OnsenUI的集成还是非常棒的，有基于Angular 1 、Angular 2 、React,当然还有Ionic也可以选择，也可以选择一个不用任何框架的版本No Framework

1
2
3
4
5
6
7
8
9
monaca create my-app
? Choose a category: 
    Onsen UI 
    Onsen UI and Angular 1 
    Onsen UI and Angular 2 
    Onsen UI and React 
    Ionic 
  > No Framework 
    Sample Apps

从上面选择一个你喜欢的框架，接下来monaca就会从云端将你选择的这套脚手架下载下来
例如我这边想下载一个不用任何框架的,这样你就可以将自己开发的html5页面放到里面直接在app里看了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ monaca create weui
? Choose a category: No Framework
? Select a template - Press P to see a preview Blank

Downloading template...
www/components already exists. Skipping.

Project created successfully.

Type "cd weui" and run monaca command again.
  > monaca preview      => Run app in the browser
  > monaca debug        => Run app in the device using Monaca Debugger
  > monaca remote build => Start remote build for iOS/Android/Windows
  > monaca upload       => Upload this project to Monaca Cloud IDE

monaca preview 预览模式

这样就直接会在你浏览器打开这个项目，默认是监听8080端口，只要你一修改，就会即时刷新，结合控制台能够很方便的快速开发

monaca debug

这样就可以直接在你的手机上去运行这个APP了，你手机上需要下载一个monaca，注册一个monaca账号就可以了，再按照引导步骤连上你本机的IP，就可以在手机上运行了，并且它也会即时响应你的改变，热加载刷新。

   当我发现monaca的时候，真的感觉这个工具真是相当不错，特此跟大家分享一下，Onsen也是值得大家去用一下的一个非常精美的UI框架。

https://monaca.io/
https://onsen.io/