Skip to content

angular7/ionic4/权限控制/用户管理/状态/http/拦截器等 ,可用于商业项目,欢迎使用

License

Notifications You must be signed in to change notification settings

ezhuo/ionic-app

Repository files navigation

ionic-app

本APP是从 ionic-conference-app fork 而来, ionic4 + angular7 的集成环境,可用于商用

如果能帮到您,请留下您的star再走,谢谢!

目录说明

src
├─app\@core 核心控制
│       ├─control 基础页面类,使用者可继承
│       ├─data 权限控制、用户、状态类
│       ├─helpers 工具类
│       ├─i18n 语言类
│       ├─ionic cordova插件集成
│       ├─model 数据定义接口
│       ├─net http和拦截器
│       ├─startup 初始化服务
│       ├─utils 提醒等工具
│
├─app\@shared 共享模块
│       ├─ component 共享组件
│       ├─ directives 共享指令
│
├─app\layout 公共布局类
│       ├─ passport 登录布局
│       ├─ tabs 主tabs布局
│
├─app\routes 业务组件类
│       ├─ account 账户业务
│       ├─ support 扩展业务
│       ├─ tabs 主业务页面
│       ├─ tutorial 首次启动时业务介绍页
│
├─assets 静态资源类
├─environments 环境配置
├─theme 自定义样式类

环境配置

1. JAVA环境

(1)安装JDK
(2)新建->环境变量名"JAVA_HOME",变量值"C:\Java\jdk1.8.0_05"(即JDK的安装路径) 
(3)编辑->环境变量名"Path",在原变量值的最后面加上“ ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin ” 
(4)新建->环境变量名“CLASSPATH”,变量值“.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar”

2. ANDROID SDK 环境

(1)安装SDK
(2)新建->环境变量名"ANDROID_HOME",变量值"D:\Android\android-sdk"
(3)编辑->环境变量名"Path",在原变量值的最后面加上“ ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools ”

3. gradle 环境

(1)下载 gradle , 解压放到相关目录
(2)新建->环境变量名"GRADLE_HOME",变量值"D:\Android\gradle-4.4"
(3)新建->环境变量名"GRADLE_USER_HOME",变量值"D:\Android\.gradle"(本地仓库位置)
(4)编辑->环境变量名"Path",在原变量值的最后面加上“ ;%GRADLE_HOME%\bin ”

安装包

  • npm i
  • npm run platform
  • npm run serve
  • npm run live
  • npm run dev
  • npm run build
  • npm run release

编译

  • ionic cordova build android --release
  • ionic cordova platform add android --save
  • ionic cordova platform rm android --save
  • git config --system core.longpaths true

调试

  • ionic serve -lc
  • ionic cordova run android --device --livereload
  • ionic serve --address 192.168.168.202
  • weinre --boundHost 192.168.168.202
  • chrome://inspect/#devices
  • 然后运行 ionic cordova run android -l -c -s 或者 ionic cordova emulate android -lcs
  • ios 运行 ionic run/emulate ios -livereload -consolelogs -serverlogs
  • ionic serve -lc 感觉 ionic serve 已经支持热更新了,好像没有必要加上-lc 这个调试参数,谷歌浏览器本身就有 APP 模式,加上这个参数以后可以在地址后面加上平台参数来模拟平台如http://localhost:8100?ionicplatform=android
  • ionic cordova run android 在 android 模拟器或者真机上运行
  • ionic cordova run android -lc 可以在真机上远程调试
  • ionic cordova run android --device
  • ionic cordova run android --prod --release
  • ionic cordova build android --prod --release 生成发布的 apk

生成资源

  • ionic cordova resources

热更新

  • cordova-hcp build 将 conrdova-hcp.json 文件中 content_url , update 复制到 chcp.json 到这个中
  • cordova-hcp server
  • cordova build --chcp-dev

生成 key

另一种配置方法是使用 Gradle ,一个 Android 的自动化构建工具。
cordova build android 的过程其实就是使用它。
你要在 platforms/android 目录下建立 release-signing.properties 文件,内容类似下面这样:
storeFile=relative/path/to/keystore
storePassword=SECRET1
keyAlias=ALIAS_NAME
keyPassword=SECRET2

重置 ionic

  • ionic state reset

连接不上手机

  • adb start-server 启动服务
  • adb kill-server 停止服务
  • adb devices 查看已连接设备

编译过程错误(先清除平台,再编辑)

  • 如果在编译中发生错误,极有可能是plugin版本不对,或android版本不对,解决办法是 npm run unplatform 删除当前系统及plugin,并且一定要保证config.xml的plugin版本是最新的可用的,最好用 https://www.npmjs.com/package/package 查询下版本
  • 删除 C:\Users\Administrator.gradle\caches 缓存
  • cordova clean android
  • cordova build android

install plugin

删除 package.json 文件中 的 plugins 节点 和 config.xml 中的所有 <plugin 再进行如下安装
--apache & ionic----------
*  cordova plugin add --save cordova-plugin-whitelist cordova-plugin-statusbar cordova-plugin-device cordova-plugin-splashscreen cordova-plugin-inappbrowser cordova-plugin-camera cordova-plugin-dialogs cordova-plugin-geolocation cordova-plugin-network-information cordova-plugin-media-capture cordova-plugin-media
*  cordova plugin add --save cordova-plugin-file  cordova-plugin-file-transfer cordova-plugin-ionic-webview cordova-plugin-ionic-keyboard
--other----------
*  cordova plugin add --save cordova-hot-code-push-plugin cordova-plugin-app-version cordova-plugin-datepicker   cordova-plugin-x-toast cordova.plugins.diagnostic phonegap-plugin-barcodescanner cordova-plugin-appminimize
*  cordova plugin add --save cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="请允许使用图库"

remove plugin

*  cordova plugin rm --save cordova-plugin-whitelist cordova-plugin-statusbar cordova-plugin-device cordova-plugin-splashscreen cordova-plugin-inappbrowser cordova-plugin-camera cordova-plugin-dialogs cordova-plugin-geolocation cordova-plugin-network-information cordova-plugin-media-capture cordova-plugin-media
*  cordova plugin rm --save cordova-plugin-file  cordova-plugin-file-transfer cordova-plugin-ionic-webview cordova-plugin-ionic-keyboard
--other----------
*  cordova plugin rm --save cordova-hot-code-push-plugin cordova-plugin-app-version  cordova-plugin-datepicker   cordova-plugin-x-toast cordova.plugins.diagnostic phonegap-plugin-barcodescanner cordova-plugin-appminimize
*  cordova plugin rm --save cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="请允许使用图库"

编译不通的组件

* cordova plugin add --save https://github.com/namedjw/com.kit.cordova.amaplocation.git --variable KEY=418d3ef19c3b375b61c6e7c38e3794e8
这个plugin 有可能引起编译不通过,需要降到6.4

* cordova plugin add --save cordova-plugin-file-opener2 call-number

* cordova plugin add --save https://github.com/DaiHuaXieHuaKai/GaoDeLocation.git --variable API_KEY=418d3ef19c3b375b61c6e7c38e3794e8

cordova-plugin-compat 这个plugins 是为解决兼容性问题,但已经不再使用了,一用就编译就会有问题

闪退

* cordova plugin add  --save cordova-plugin-app-update

提醒

android 版本目前需要是6.4.0,主要原因是由于 com.kit.cordova.amaplocation 不能使用过高版本,所以才降级 

npm i -g [email protected]

About

angular7/ionic4/权限控制/用户管理/状态/http/拦截器等 ,可用于商业项目,欢迎使用

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published