zoukankan      html  css  js  c++  java
  • 一个基于Ionic3.x cordova的移动APP demo

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

    前端技术:

    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

  • 相关阅读:
    JavaScript 进阶篇的学习~
    JavaScript 基础的复习~
    JVM字节码解析
    Tomcat压力测试与优化方案
    Tomcat优化
    JVM垃圾收集器
    JVM的垃圾回收机制(GC)
    JVisual VM工具使用
    jstack监控JVM线程的运行情况
    监控JVM内存使用情况
  • 原文地址:https://www.cnblogs.com/easytuan/p/9605383.html
Copyright © 2011-2022 走看看