zoukankan      html  css  js  c++  java
  • Ionic模版的使用

    Hybird HTML5 App(移动应用开发)之4.Ionic模版的使用

    在Windows系统下使Ionic模版,可以使用之前安装的Git工具中的Git Bash。在Mac系统中可以直接使用系统自带的命令工具。在Windows系统中安装Git后,从开始菜单中找到Git文件下的Git Bash工具并打开。下面通过命令来创建App。

    cd e:/work/Ionic 通过cd命令进入自定义的项目位置

    ionic start defaultApp tabs 通过ionic命令生成一个以tabs为模版的App,其中defaultApp是App的项目名,tabs是Ionic的默认模板名,即使不输入tabs,创建的App仍然是基于tabs的项目。

    cd e:/work/Ionic/defaultApp ionic serve 进入App项目的根目录,输入ionic serve命令来运行应用程序,浏览器会自动打开并预览tabs模版的App。浏览器预览的效果如下: tabs模板.png

    退出启动的应用程序: 在Git Bash中输入q ,就可以退出已经启动的应用程序。 退出gitbash.png

    其实,通过命令我们还可以使用其他的Ionic模版,比如: 1、 ionic start blankApp blank。创建包含标题栏的App blank.png 2、 ionic start sideApp sidemenu。创建包含侧边栏的App 应用程序主视图。 sidemenu.png 打开应用程序的侧边栏。 程序侧边栏.png

    在GitHub上有很多模版的类型,查考链接:https://github.com/driftyco/ionic-cligithub模板.png

    可以发现。Named template、Github Repo和Codepen是比较常用的类型。前面使用的tabs、sidemenu和blank属于Named template。 而且Named template还会随时间推移,逐渐增加。你可以根据这些模版的名字,把模版下载到本地。

    下面为你介绍另外一种下载Ionic模版的方法。 打开链接:http://codepen.io/ionic/pens/public/另一个模板.png 在网站中,可以看到很多Ionic模版,点击一个模版进入,效果图如下: 效果图.png

    复制浏览器的链接,可以使用该链接把模版下载到本地。下载的命令如下: ionic start navApp http://codepen.io/ionic/pen/QwamEW 下载到本地后,就可以在浏览器中查看应用程序的效果了。如下图: 浏览器语言.png

    了解如何下载Ionic模版后,那么这些模版在Android 和 IOS上显示的效果是什么的呢?下面我来看一下: 以defaultApp项目为例,使cd命令进入该项目的根目录,然后在使用命令:ionic serve –l 就可以查看应用程序在Android和IOS设备中的效果,如下: ios和android.png 可以看到,浏览器以一种不同的有趣的方式打开了App。展示了IOS和Android两种不同设备上的App的呈现视图。两者的不同之处可以很明显的看出:IOS的菜单在页面的底部,而Android的菜单位于页面的顶部。在真实的移动设备上,它们各自的App也会有这样不同的呈现。不同的页面和不同的模板App,浏览器呈现都可能会有不同,Ionic会为我们处理这些不同。以默认模版为例,你可以使用特殊的配置,可以两个平台的菜单位置保持一致。在后续的内容中会涉及到这个部分内容。好了,今天就写这么多。明天继续!详细内容可点击链接http://pan.baidu.com/s/1kTXZNuf进入云盘查看。


     



  • 相关阅读:
    ThinkPHP 3.2.2 实现持久登录 ( 记住我 )
    Java实现 LeetCode 20 有效的括号
    Java实现 LeetCode 20 有效的括号
    Java实现 LeetCode 19删除链表的倒数第N个节点
    Java实现 LeetCode 19删除链表的倒数第N个节点
    Java实现 LeetCode 19删除链表的倒数第N个节点
    Java实现 LeetCode 18 四数之和
    Java实现 LeetCode 18 四数之和
    Java实现 LeetCode 18 四数之和
    Java实现 LeetCode 17 电话号码的字母组合
  • 原文地址:https://www.cnblogs.com/Full--Stack/p/8041715.html
Copyright © 2011-2022 走看看