360SDN.COM

首页/Ionic/列表

使用Ionic3框架开始第一个混合开发APP

来源:  2018-03-30 14:04:30    评论:0点击:

来源https://segmentfault.com/a/1190000010632905
什么是Android混合开发?

简单来说,就是在开发移动应用中同时使用NativeWeb的开发方式。

什么是Ionic3框架?

Ionic3框架是一个混合开发框架,其本身依赖于AngularSassCordova

使用Ionic3框架可以做什么?

使用Ionic3可以使用前端相关技术快速开发多平台的移动APP。

Ionic3环境搭建

  1. 安装Visual Studio 2011以上版本。
  2. 安装python 2.7版本。
  3. 安装node
  4. 使用npm全局安装CordovaIonic。命令行输入npm install -g cordova ionic
  5. 安装Android Studio
  6. 安装Git。(可选)

安装完了之后,命令行输入ionic -h如下图

初始化第一个应用

输入ionic start -h查看初始化命令详情,如下。

 

ionic start - Create a new project
 
    This command creates a working Ionic app. It installs dependencies for you and sets up your project.
 
    ionic start will create a new app from template. You can list all templates with the --list option. For more
    information on starter templates, see the CLI documentation[1].
 
    You can also specify a git repository URL for template and your existing project will be cloned.
 
    [1]: https://ionicframework.com/docs/cli/starters.html
 
  Usage:
 
    $ ionic start [<name>] [<template>] [options]
 
  Inputs:
 
    name ..................... The name of your project directory
    template ................. The starter template to use (e.g. blank, tabs; use --list to see all)
 
  Options:
 
    --list, -l ............... List starter templates available
    --type ................... Type of project to start (e.g. ionic-angular, ionic1) (default: ionic-angular)
    --display-name, -n ....... Human-readable name (use quotes around the name)
    --cordova ................ Include Cordova integration
    --pro-id ................. Specify an app ID from the Ionic Dashboard to link
 
  Advanced Options:
 
    --no-deps ................ Do not install npm/yarn dependencies
    --no-git ................. Do not initialize a git repo
    --no-link ................ Do not ask to connect the app with the Ionic Dashboard
    --bundle-id .............. Specify the bundle ID/application ID for your app (reverse-DNS notation)
 
  Examples:
 
    $ ionic start
    $ ionic start --list
    $ ionic start myApp blank
    $ ionic start myApp tabs --cordova
    $ ionic start myApp blank --type=ionic1
    $ ionic start myConferenceApp https://github.com/ionic-team/ionic-conference-app

 

  • name是项目名
  • template是初始化的模板
  • --type是项目类型,有Ionic1Ionic-angular(也就是Ionic2Ionic3)
  • --app-name是App的名称,可以之后通过config.xml修改
  • --list是打印出所有可用模板
  • --cordova是集成Cordova
  • --no-deps是不安装npm依赖
  • --no-git是不初始化git仓库
  • --no-link是不链接到Ionic平台

好了,输入ionic start HelloWorld blank --cordova --no-deps --no-git --no-link来初始化一个项目。完成之后如下图。

这个时候工作目录下就生成了一个HelloWorld目录,进去。

输入npm install安装依赖,安装完如图。

无视掉那几个警告

输入ionic serve,第一次会出现下图,输入Y安装。

 

然后再次输入ionic serve,如图继续输入Y安装,安装完后用启动serve,如下图。

 

游览器会自动打开localhost:8100,如果没有就在游览器里面手动打开本网页,界面如下图。

F12打开控制台,然后切换到移动显示,如下图。

这个样子大概就是我们应用界面的样子了。

然后回到控制台,Ctrl + C结束调试服务器。然后输入ionic cordova,然后输入Y安装插件,如下图。

输入ionic cordova platform add android,这是添加一个Android平台的命令。如果是ios就是将Android那里替换为ios,成功后如下图。PS:ios需要安装XCode,也就是需要在MAC OSX系统上。

输入ionic cordova build android --prod生成一个Debug包,如下图。

这样就打包完毕了,去到platfrom/android/outputs/apk/目录下,android-debug.apk就是我们打包出来的APP。安装到手机上就可以使用或者调试了。注意:这个包是Debug版本,并非正式包,正式包需要先生成签名

至此,你就开始了第一个Ionic3应用。


为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权