0.0.12 • Published 7 years ago

my-ionic-demo v0.0.12

Weekly downloads
61
License
-
Repository
-
Last release
7 years ago

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、要求环境

cordova@8.0.0
node@10.0.0
ionic&typescript&angular/cli 最新版即可

2、node安装，参考官网

node - v 		# 显示当前Node.js的版本
npm -v			# 显示当前npm的版本

3、安装ionic环境

npm install -g ionic

4、安装typescript

npm install -g typescript

5、安装 Angular CLI

npm install -g @angular/cli
ng version

6、安装Cordova环境

npm install -g cordova@8.0.0

四、通用配置

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 install

2、运行开发环境【DMS/Marketing共用】

npm run dev

3、运行DMS测试环境

npm run dms:uat

4、运行DMS正式环境

npm run dms:prod

5、运行Marketing测试环境

npm run marketing:uat

6、运行Marketing正式环境

npm run marketing:prod

7、编译DMS测试环境-android

npm run build:dms:uat:android

8、编译DMS测试环境-ios

npm run build:dms:uat:ios

9、编译DMS正式环境-android

npm run build:dms:prod:android

10、编译DMS正式环境-ios

npm run build:dms:prod:ios

11、编译Marketing测试环境-android

npm run build:marketing:uat:android

12、编译Marketing正式环境-ios

npm run build:marketing:prod:ios

13、编译Marketing测试环境-android

npm run build:marketing:uat:android

14、编译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-name

3、创建组件【通用组件统一生成在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-name
3.3、创建dms业务组件【****代表app-dms目录下的实际业务目录】
ng g component app-dms/****/your-component-name --m=app-dms
3.4、创建marketing业务组件【****代表app-marketing目录下的实际业务目录】
ng g component app-marketing/****/your-component-name --m=app-marketing

4、创建管道【管道均生成在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 --export

6、创建对象【多单词下，类名均采用中划线分割】

ng g class user

7、创建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.sh

2、编译DMS测试工程

cd build/dms
./build.uat.sh

3、初始化DMS正式工程

cd build/dms
./init.prod.sh

4、编译DMS正式工程

cd build/dms
./build.prod.sh

5、初始化营销助手测试工程

cd build/marketing
./init.uat.sh

6、编译营销助手测试工程

cd build/marketing
./build.uat.sh

7、初始化营销助手正式工程

cd build/marketing
./init.prod.sh

8、编译营销助手正式工程

cd build/marketing
./build.prod.sh

八、多语言配置【当前工程已支持多语言，无需再行配置，模版仅在LoginComponent使用】

1、安装 ngx-translate模块包

npm install @ngx-translate/core@10.0.2 --save
npm install @ngx-translate/http-loader --save

2、创建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>

九、关于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

十二、踩坑

……

linkzhenheng
tslib
@infinitebrahmanuniverse/nolb-my-i@everything-registry/sub-chunk-2226@zalastax/nolb-my-i
0.0.12

7 years ago

0.0.11

7 years ago

0.0.10

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago