my-ionic-demo
v0.0.12
Published
An Ionic project
Readme
Link移动端工程
一、写在前面【重要！！！】
1、编码过程中，切莫只盯着自己的模块，若发现有通用型组件，务必咨询是否已有可用组件，若有，则直接使用，对于不能完全满足自身需求的，可与组件创建人协商如何兼容；若没有，则告知大家本人即将开发某某通用组件，不要重复封装
2、对于编写好的通用组件、服务或管道等等，应该完善注释和使用方式，并在提交之后告知所有人开发者，后续类似某某功能可使用此通用组件
3、对于复杂组件等，应该在app-dev处提供使用demo【可选】
二、工程目录
.
├── build [平台初始化/编译脚本]
├── cordova [cordova工程相关文件]
├── e2e [端到端测试]
├── platforms [原生工程目录]
├── android [预置的android工程，编译打包时会使用到，勿动]
├── ios [预置的ios工程，编译打包时会使用到，勿动]
├── src [主要工程目录文件]
├── app [业务代码]
├── app-basic [基础内容和全局方法、参数]
├── function.ts [基础方法，可直接再组件等ts文件中import使用，若需要在html中使用，则方法应该在global.ts中再次声明，并通过global服务进行调用]
├── global.ts [全局变量，存储应用、基础、系统、用户信息]
├── app-component [guide、login、version等等游离于业务模块之外的顶层组件]
├── app-dms [DMS业务模块]
├── app-marketing [Marketing业务模块]
├── lnk-component [通用组件模块文件]
├── lnk-directive [指令模块文件]
├── lnk-pipe [管道模块文件]
├── lnk-service [服务文件]
├── address [地址值列表服务]
├── data [数据共享服务]
├── http [Http服务和拦截器]
├── i18 [多语言服务]
├── init-app [应用初始化服务]
├── ionic-api [封装ionic api reference]
├── ionic-native [封装ionic native api]
├── jpush [极光推送服务]
├── local-storage [封装的localStorge服务]
├── location [定位服务]
├── log [日志服务]
├── login [登录服务]
├── lov [值列表服务]
├── register-device [设备注册服务]
├── route [路由服务]
├── version [版本检测服务]
├── workflow [工作流服务]
├── router-guard [路由守卫]
├── app.component.html [根组件]
├── app.component.spec.ts [根组件]
├── app.component.ts [根组件]
├── app.module.ts [根模块]
├── app-routing.module.ts [根模块路由]
├── typings.d.ts [第三方插件变量声明]
├── assets [资源文件]
├── i18n [多语言]
├── icon [图标]
├── iconfont [字体图标]
├── img [图片]
├── libs [第三方资源库]
├── style [自定义样式]
├── theme [ionic主题]
├── variables.scss [ionic主体色变量，勿修改]
├── environments [各环境信息]
├── global.scss [scss import，只做引入，勿单独编写scss代码]
├── index.html [入口HTML]
├── karma.conf.js [Karma单元测试配置]
├── main.ts [应用主要入口点]
├── polyfills.ts [腻子脚本]
├── test.ts [单元测试主要入口点]
├── tsconfig.app.json [TypeScript配置文件]
├── tsconfig.spec.json [TypeScript配置文件]
├── .gitignore [git提交忽略信息]
├── angular.json [angular配置信息]
├── ionic.config.json [ionic配置信息]
├── package.json [npm依赖管理]
├── package-lock.json [npm依赖版本管理]
├── README.md [工程说明文档]
├── tsconfig.json [TypeScript配置文件]
├── tslint.json [额外的Linting配置] 三、环境安装
1、要求环境
[email protected]
[email protected]
ionic&typescript&angular/cli 最新版即可2、node安装，参考官网
node - v # 显示当前Node.js的版本
npm -v # 显示当前npm的版本3、安装ionic环境
npm install -g ionic4、安装typescript
npm install -g typescript5、安装 Angular CLI
npm install -g @angular/cli
ng version6、安装Cordova环境
npm install -g [email protected]四、通用配置
1、【自行配置】WebStorm Editor - Code Style下调整JavaScript、TypeScript、SCSS、sass、html的Tab Size、Indent、Continuation indent的值，统一调整为2
2、【工程已做】在angular.json文件下的build和serve目录下，新增uat的内容，以支持uat环境
3、【工程已做】在theme/variables.scss下，将primary主题色调整为Link基础色 #20A6FC
五、运行说明
1、安装依赖
npm install2、运行开发环境【DMS/Marketing共用】
npm run dev 3、运行DMS测试环境
npm run dms:uat 4、运行DMS正式环境
npm run dms:prod5、运行Marketing测试环境
npm run marketing:uat 6、运行Marketing正式环境
npm run marketing:prod 7、编译DMS测试环境-android
npm run build:dms:uat:android8、编译DMS测试环境-ios
npm run build:dms:uat:ios9、编译DMS正式环境-android
npm run build:dms:prod:android10、编译DMS正式环境-ios
npm run build:dms:prod:ios11、编译Marketing测试环境-android
npm run build:marketing:uat:android12、编译Marketing正式环境-ios
npm run build:marketing:prod:ios13、编译Marketing测试环境-android
npm run build:marketing:uat:android14、编译Marketing正式环境-ios
npm run build:marketing:prod:ios六、开发说明
1、基础编码规范【重点，重点，重点！！！】
1.1、变量命名使用驼峰命名规范，不允许出现模糊不清的变量名称，且无相关注释
1.2、文件夹/文件如果需要Link前缀标识，则均使用lnk，如果lnk-list
1.3、文件夹/文件命名格式均采用中划线间隔，如: account-item，包括使用CLI
1.4、所有封装的ionic api reference方法应尽量维护到lnk-service/ionic-api中，特殊情况除外，如
ionic popover/modal等，此类api存在较多复杂业务场景
可在各自模块独立使用1.5、弹框提示信息基本情况下均使用ionicApiService.alert，只特殊场景，如检测网络变化等，可使用toast
ionicApiService.alert('hello') // 一般信息
ionicApiService.alert('hello'， 'error') // 错误信息1.6、所有封装的ionic native api方法都尽量维护到lnk-service/ionic-native下，其中简单的维护在base-native.service，复杂的则单独开service编写
1.7、代码注释说明【非常重要！！！】
1.7.1 参数、核心逻辑代码必须有相应注释说明，格式上应尽量保证同一块代码注释齐整
1.7.2 ts文件头应注明该文件描述、作者、时间，对于标准组件等，还应注释使用样例，简单如下：
/**
* 缓存服务对象，提供标准的缓存服务方法
* @author ouyangzhenqiang
* @date 2018/10/25
*/
1.7.3 文件头注释的位置应处于装饰器（如component）与import之间，只与import保持一行间距
1.7.4 方法头应注明功能描述、作者、时间、参数等，简单如下：
/**
* 根据输入的key移除指定的数据
* @author ouyangzhenqiang
* @date 2018/10/25
* @param key 缓存key
*/
1.7.5 方法注释应只与上一块功能代码（如方法）保持一行间距
1.7.6 可在WebStorm设置live template，便捷生成注释模版【操作请百度或询问他人】
1.7.7 间距等格式问题可使用WebStorm->Code->Reformat Code进行调整1.8、build目录下的命令切勿随意变更，若需变更，开发人员如需更改，需要在沟通群说明
1.9、发起http请求，应该使用lnk-service/http/http.service，其简单处理了get、post请求
2.0、对于定义成应用启动时执行的方法，应该往lnk-service/init-app/init-app.service服务靠
2.1、需要使用LocalStorage，应用统一使用lnk-service/local-storage/local-storage.service
2.2、日志输出均引用lnk-service/log/log.service，按具体情况使用其中的log/info/warn/error方法，同时需要注意使用try catch以更好控制日志输出
2.3、调用lnk-service/ionic-api下的alert提示错误信息时，需要指定level参数，设置为error，以保证正式环境捕捉错误信息，如
this.ionicApiService.alert(`init app fail，fail reason => ${error}`, 'error');2.4、路由服务均使用lnk-service/route/route.service
跳转页面
routeService.push('/account', {});
返回
routeService.back();
toolab返回按钮默认使用
<lnk-back-button></lnk-back-button>2.5、涉及应用层的定时方法，尤其是与http相关的，应维护在lnk-service/workflow/workflow.service
2.6、css编写说明：
1. global.scss只做scss文件import，不可在此处单独编写scss;
2. theme/variables.scss为inoic自带主题色，可作为变量引入，不可在此处单独编写scss变量；
3. assets/style为自定义样式目录，所有自定义样式均在此处编写
若为变量或mixin，则需额外注意如下三点：
1. common.mixin.scss为全局公用变量；
2. dms.mixin.scss为dms专用；
3. marketing.mixin.scss为marketing专用；
若为全局css样式，则需额外注意如下三点：
1. common.style.scss为全局公用css样式；
2. dms.style.scss为dms专用；
3. marketing.style.scss为marketing专用；2、创建模块
ng g module your-module-name3、创建组件【通用组件统一生成在app/lnk-component目录下，业务组件生成在app-dms或app-marketing目录下，如果是service单独依赖的组件，就直接放在service同级目录】
3.1、创建通用抽象组件【export：自动配置导出】
ng g component lnk-component/your-component-name --m=lnk-component --export 3.2、创建全局组件，如果login、version等等游离于业务模块之外的顶层组件
ng g component app-component/your-component-name3.3、创建dms业务组件【****代表app-dms目录下的实际业务目录】
ng g component app-dms/****/your-component-name --m=app-dms3.4、创建marketing业务组件【****代表app-marketing目录下的实际业务目录】
ng g component app-marketing/****/your-component-name --m=app-marketing4、创建管道【管道均生成在app/lnk-pipe/目录下】
ng g pipe lnk-pipe/your-pipe-name/your-pipe-name --export* 注意：管道无需import，管道模块已将所有模块exports，直接在html中使用即可
5、创建指令【指令均生成在app/lnk-directive/目录下】
ng g directive lnk-directive/your-directive-name/your-directive-name --m=lnk-directive --export6、创建对象【多单词下，类名均采用中划线分割】
ng g class user7、创建service【service均生成在app/lnk-service/目录下】
ng g service lnk-service/your-service-name/your-service-name七、Cordova工程创建及编译【optional】
1、初始化DMS测试工程
cd build/dms
./init.uat.sh2、编译DMS测试工程
cd build/dms
./build.uat.sh3、初始化DMS正式工程
cd build/dms
./init.prod.sh4、编译DMS正式工程
cd build/dms
./build.prod.sh5、初始化营销助手测试工程
cd build/marketing
./init.uat.sh6、编译营销助手测试工程
cd build/marketing
./build.uat.sh7、初始化营销助手正式工程
cd build/marketing
./init.prod.sh8、编译营销助手正式工程
cd build/marketing
./build.prod.sh八、多语言配置【当前工程已支持多语言，无需再行配置，模版仅在LoginComponent使用】
1、安装 ngx-translate模块包
npm install @ngx-translate/[email protected] --save
npm install @ngx-translate/http-loader --save2、创建i18n语言文件，在assets/下新建i18n目录，分别新建en.json（英文）和zh.json（中文）
3、app.module.ts 导入多语言模块
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';
export function createTranslateHttpLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
...
imports: [
...
TranslateModule.forRoot({
loader:{
provide:TranslateLoader,
useFactory:(createTranslateHttpLoader),
deps:[HttpClient]
}
})
],
...
})4、子模块配置：如果采用了angular的子模块懒加载功能的话，则需要对子模块也进行配置【注意是forChild】
@NgModule({
...
imports: [
...
TranslateModule.forChild({
loader:{
provide:TranslateLoader,
useFactory:[createTranslateHttpLoader],
deps:[HttpClient]
}
})
],
...
})5、在组件中使用
5.1、ts文件使用translateService服务
import { TranslateService } from '@ngx-translate/core';
constructor(
private translateService: TranslateService
) { }
ngOnInit() {
// --- set i18n begin ---
// 添加语言支持
this.translateService.addLangs(['zh', 'en']);
// 设置默认语言，一般在无法匹配的时候使用
this.translateService.setDefaultLang('en');
// 获取当前浏览器环境的语言，比如en、 zh
const browserLang = this.translateService.getBrowserLang();
this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
// --- set i18n end ---
// 订阅语言切换事件
this.translateService.onLangChange.subscribe((params) => {
console.log(params);
});
}5.2、html中使用
<div class="login-button">
<ion-button color="secondary" (click)="login()">{{'login' | translate}}</ion-button>
</div>5.3、ts中使用转换
this.translateService.get('app.changeLangTips', {lang: changeLang});
lang 为预置参数九、关于DMS工程与营销助手工程合并
1、合并之后工程将主要分为如下几部分：
* 应用入口【AppModule&AppComponent】
* 应用层组件【app-component】,存储游离于具体业务之外的组件，如login、version等组件
* 通用配置和方法【app-basic】,存储公共对象、方法、配置等信息
* 通用抽象组件【lnk-component】,存储抽象出来的标准可复用组件，如list等组件
* 通用抽象指令【lnk-directive】,存储抽象出来的标准可复用指令
* 通用抽象管道【lnk-pipe】,存储抽象出来的标准可复用管道即过滤器
* 通用抽象服务【lnk-service】,存储抽象出来的标准可复用服务
* 经销商业务模块【app-dms】
* 营销助手业务模块【app-marketing】2、为同时兼容两个应用，将在两处地方做用户类型的判断，以跳转不同应用模块：
2.1、在src/app/lnk-service/init-app/init-app.service.ts中，对token和用户判断，以实现应用初始化时，若token在有效期内则自动登录，且根据用户类型登录不用业务应用模块
2.2、在src/app/app-component/login组件中，对登录成功之后的用户，进行用户类型判断，以判断跳转业务应用模块
3、为使DMS工程和营销助手工程能够各自打包，整体工程做了如下三处改造：
* 在build、codorva下配置了各自原生工程所属的脚本和文件
* 在environment.ts和angular.json配置了各自所需的环境信息
* 在package.json中配置各工程的启动命令十、关于通用组件的使用方式，特提供了相应的部分说明文档，如有需要可参考
Link移动端开发所使用的标准组件以及标准服务说明
十一、Cordova工程异常问题汇总
1、安卓工程编译报appcompat-v7-23.4.0.aar资源问题【init脚本已配置】
build.gradle 追加
configurations.all {
resolutionStrategy {
force 'com.android.support:support-v4:27.1.0'
}
}2、极光插件3.4.6版本支持cordova android 7.0.0以下版本【init脚本已配置】
将android/app/src/main/java下的cn.jiguang.*拷贝到android/src/目录下
将android/jniLibs下的arm64-v8a、armeabi、armeabi-v7a、x86、x86_64下的libjcorexxx.so，拷贝到android/libs/对应目录下2、xcode 10 工程debug报libstdc++.6.0.9.tbd和libstdc++.6.tbd不存在 【若为xcode 10，则自行处理】
下载此两项文件，拷贝至Xcode ▸ Contents ▸ Developer ▸ Platforms目录下的iPhoneOS.platform和iPhoneSimulator.platform
下的Developer ▸ SDKs ▸ xxxx.sdk下的usr ▸ libs十二、踩坑
……