项目地址如遇网络不佳,请移步国内镜像加速节点

前端技术:

Angular4.x + ionic3.x + cordova

项目运行:


git clone git@github.com:EasyTuan/ionic-cordova-demo.git # 国内镜像加速节点:git@gitee.com:easytuan/ionic-cordova-demo.git # 全局安装ionic和cordova
npm install -g cordova ionic # 安装项目依赖
npm install # 在浏览器中启动项目
npm run serve # 添加android平台
ionic cordova platform add android # usb连接安卓手机运行
npm run dev

项目名:[A Ionic3.x project],Ionic3.x的移动APP demo。

1. 如何运行

node版本 [8.0.0]

1.1 开发环境配置


# 安装ionic和cordova
npm install -g cordova ionic # 安装项目依赖
npm install

1.2 开发过程

1.2.1 命令


# 在浏览器中启动项目
ionic serve # 添加android平台
ionic cordova platform add android # usb连接安卓手机运行
ionic cordova run android

1.3 发布


# 打包
npm run build

2. 业务介绍

2.1 小程序业务入口

入口地址为 src/app/app.module.ts

目录结构

ionic-conference-app/
|
|-- resources/
|
|-- src/
| |-- app/
| | ├── app.component.ts
| | └── app.module.ts
| | └── app.template.html
| | └── main.ts
| |
| ├── assets/
| | ├── fonts/
| | |
| | ├── icon/
| | |
| | └── images/
| |
| |-- components/ * 组件
| |
| |-- pages/ * 页面
| |
│ ├── services/ * angular主题
| | └── httpService.ts.scss * http请求封装
| |
│ ├── theme/ * ionic主题配置
| | └── variables.scss * 主题 Sass 变量
| |
| └── index.html
|
├── .editorconfig * 代码风格配置文件
├── .gitignore * git忽略目录
├── LICENSE
├── README.md
├── config.xml * Cordova配置文件
├── ionic.config.json * Ionic配置文件
├── package.json * 依赖配置文件
├── tsconfig.json * TypeScript配置选项
└── tslint.json * 定义 TypeScript 规则

2.2 已完成功能

  • 底部tabbar的跳转
  • 组件间的通信
  • 二级页面的跳转
  • http请求通信
  • app图标以及启动页的配置

部分截图展示

首页展示 && 店铺列表









3. 其他

ionic开发文档地址

https://ionicframework.com/docs/

4. 友情链接

项目完整版本(基于mui)

License

MIT

一个基于Ionic3.x cordova的移动APP demo的更多相关文章

  1. 一个基于Angular+Ionic+Phonegap的混合APP实战

    这个项目做得比较早,当时是基于ionic1和angular1做的.做了四个tabs的app,首页模仿携程首页,第二页主要是phonegap调用手机核心功能,第三页模仿微信和qq聊天页,第四页模仿一般手 ...

  2. 一个基于cocos2d-x 3.0和Box2d的demo小程序

    p图demo小应用.想怎么p就怎么p 本文參考于http://blog.csdn.net/xiaominghimi/article/details/6776096和http://www.cnblogs ...

  3. [Android App]IFCTT,即:If Copy Then That,是一个基于IFTTT的"This"实现

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/8075738.html IFCTT,即:If Copy Then ...

  4. [Android App]IFCTT,即:If Copy Then That,一个基于IFTTT的"This"实现

    IFCTT,即:If Copy Then That,是一个基于IFTTT(If This Then That)的"This"实现,它打通了"用户手机端操作"与& ...

  5. 一个基于NodeJS开发的APP管理CMS系统

    花了大概3周独立开发了一个基于NodeJS的CMS系统,用于公司APP的内容管理( **公司APP?广告放在最后 ^_^ ** ,管理员请理解~~~ )晚上看了部电影还不想睡,闲着也是闲着就作下小小总 ...

  6. cordova 一个将web应用程序封装成app的框架

    cordova的详细介绍请参考这个链接:http://www.zhoujingen.cn/blog/7034.html 我接下来主要将如何搭建. 1.首先你需要下载几样东西 1.jdk. 2.andr ...

  7. 公布一个基于 Reactor 模式的 C++ 网络库

    公布一个基于 Reactor 模式的 C++ 网络库 陈硕 (giantchen_AT_gmail) Blog.csdn.net/Solstice 2010 Aug 30 本文主要介绍 muduo 网 ...

  8. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  9. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

随机推荐

  1. DHCP与PPPOE 区别

    1.静态IP的方式,如果是占用一个INTERNET的IP的话,上网都是很贵的,当然这个也是最方便的,开机就能上网,不用做任何拨号或者认证的过程.2.PPPOE,只是多了一个获得IP的过程,一旦获得了I ...

  2. how to use windows azure market

    here is the sample. namespace USCrime2006and2007 { class Program { static void Main(string[] args) { ...

  3. Map/Reduce应用开发基础知识-摘录

    Map/Reduce 这部分文档为用户将会面临的Map/Reduce框架中的各个环节提供了适当的细节.这应该会帮助用户更细粒度地去实现.配置和调优作业.然而,请注意每个类/接口的javadoc文档提供 ...

  4. 使用过多的递归出现错误,“System.StackOverflowException”类型的未经处理的异常在 mscorlib.dll 中发生

    class Program { static void Main(string[] args) { sub(0); }     private static void sub(int count) { ...

  5. [Maven]Codehaus的Maven Repository地址

    In ~/.m2/settings.xml you can update the URL to be used for specific repositories. For example: < ...

  6. Android RecyclerView组件和 Spinner(下拉列表框)

    1.RecyclerView <1>知识点介绍 RecyclerView 比 ListView 更高级且更具灵活性. 它是一个用于显示庞大数据集的容器,可通过保持有限数量的视图进行非常有效 ...

  7. 洛谷 P1453 城市环路 ( 基环树树形dp )

    题目链接 题目背景 一座城市,往往会被人们划分为几个区域,例如住宅区.商业区.工业区等等.B市就被分为了以下的两个区域--城市中心和城市郊区.在着这两个区域的中间是一条围绕B市的环路,环路之内便是B市 ...

  8. codeforces1097D Makoto and a Blackboard 数学+期望dp

    题目传送门 题目大意: 给出一个n和k,每次操作可以把n等概率的变成自己的某一个因数,(6可以变成1,2,3,6,并且概率相等),问经过k次操作后,期望是多少? 思路:数学和期望dp  好题好题!! ...

  9. datagrip 导出数据库备份到本地

    1.建立自己的数据库 2.如图 3,结果

  10. 2.5 References & Borrowing

    Here is how you would define and use a calculate_length function that has a reference to an object a ...