OmegaES
ABpasser
2022-03-18
目录

前端项目介绍

# 爽客邦ES Hybrid APP开发-前端总结(VUE)

# 工具类

  • pug2html (pug代码编译)
  • sacss2css (sacss编译)
  • JS & CSS Minifier(js及css压缩)

# 三方

  • VUE框架
  • clipboard (复制文本)
  • h5lock (手势密码二次封装)
  • echarts (echarts图表)
  • axios (ajax网络请求)
  • vant组件库 (基于vue的三方组件库)
  • arealist (中国地区表)
  • PAG (腾讯动画解决方案)

# 1、多页面混合APP开发介绍

  • Hybrid App主要以JS+Native两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。Hybrid App兼具了Native App良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。

  • Native 让开发者可以充分利用现代移动设备所提供的全部不同的特性和功能。另一方面，使用 Web 语言编写的所有代码都可以在不同的移动平台之间共享，使得开发和日常维护过程变得集中式、更简短、更经济高效。

  • 混合APP在开发没有开发语言的限制也没有客户端和服务端的限制问题，更易于原生开发调试，开发周期短，投入少，易实现，兼容各种设备。

  • 如果用 HTML 来编写 App 的大部分代码，并且只有在需要时才使用 Native 代码，能确保今天的投入在明天不会变得过时，因为 HTML 功能变得更丰富且开发周期短，易维护等特征，可以满足现代企业一系列更广泛的移动要求。

  • 多页面混合APP开发优于单页面开发，在页面切换动效方面更贴近于原生APP开发，APP稳定性也优于单页面(当单页面中某一部分逻辑混乱或者内存溢出等各个方面情况发生时，多页面开发在退出当前页面时会销毁原有页面，不会影响其他页面显示及逻辑)

# 2、混合APP开发结构图

  • 移动终端webview，是使用操作系统的 API 来创建嵌入式 HTML的渲染引擎。主要功能是定义Android/ios应用程序与网页之间的接口，允许网页中的JavaScript调用Android/ios应用程序，提供基于web的应用程序的Android/ios API，将Web嵌入到Android/ios应用程序中。

  • 前端交互js：包括基础功能js和业务功能js。

  • 前端适配：前端页面+JS适配不同的终端：Pad、android、ios等。

  • Hybrid APP 结构示意：

    是 原生 title
    tml css JS
    是 原生 tab

# 3、JS调用原生功能

  • 原生方法调用：将JS与原生交互方法进行封装、判断终端类型通过页面调用不同的JS所对应的原生方法。

  • 原生方法回调：在一些需要进行后续回应的操作中，需要原生对JS页面逻辑的回调或者通过页面返回触发OnStart执行相对相应的页面逻辑。(如：扫码逻辑中，APP对所识别的内容进行本地存储，再通过页面JS中声明的方法，在OnStart中触发页面的后续逻辑，从本地存储中拿到对应的值进行后续处理)

// 只要进入页面就会触发OnStart回调(OnStart需定义在window下)
  function OnStart(){
    app.todo();
  }
  let app = new Vue({
    el:'#app',
    data(){
      return {
        // vue内部变量申明
      }
    },
    created(){
      // 页面一开始加载就需要处理的逻辑（如：页面请求）
    },
    mounted(){
      todo(){
        // 具体执行逻辑（如：扫码之后的后续流程）
      },
    },
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 4、web页面注意事项

  • 页面高度需要根据不同机型进行适配

  • 在原生title与页面title做选择时，优先选择原生title。原生title暂时不支持渐变色，所以在做特使效果页面时需要使用webtitle

  • 在页面中如果有原生title时，web页面展示内容区域为原生title以下一直到屏幕可视区域底部，此时整个web的body部分可以设置为整个滑动

  • 使用webtitle时，web页面展示区域则为整个屏幕可视区域，如果要适配顶部状态栏，则需将状态栏与title栏固定（注意：顶部状态栏在固定时不支持绝对定位与渐变色同时存在）

  • 使用webtitle时，自定义状态栏颜色时，滑动区域将不能设置为整个body，需要使用一个内部容器作为滑动容器，整个body容器需要设置overflow：hidden，否则页面会产生跳动，影响使用

  • 所有的列表界面都需要做好下拉刷新以及触底加载（下拉刷新及触底加载需要将滚动盒子的高度设置为固定）

  • body页面不滚动或内部盒子进行下拉滚动部分，需要将body标签设置为overflow：hidden，否则页面会跳动

  • 安卓端在webview加载渲染时会根据机型不同做对应次数的resize事件，在resize中，整个html页面的高度为0

# 页面图标展示规范

  • 页面图表主要以eacharts为主，对统计图表进行修改

  • eachart包融入整体JS方法包

# 5、JS代码编写注意事项

# 1.网络请求

  • 在进行网络请求模块封装时需要拿到请求拦截器与响应拦截器，对所有的页面请求进行预先处理

  • POST请求中，需要对POST请求进行限制，POST请求在没有返回值时应该限制再次发起POST请求，否则会在用户对POST请求多次点击是，服务器中同时存在多个相同的POST请求，造成服务器队列阻塞

  • 在请求拦截器中需要对错误请求加强重试机制，在请求失败时，需要对失败的请求进行2-3次的重试，减少APP因为意外原因造成接口阻塞，直接请求失败地情况

  • 需要对APP登录做唯一性处理，需要后端配合，根据返回值进行判断。

  request.interceptors.response.use(
	response => {  
    // 该处为后端返回正确是的整个内容
		return res;
	},
	err => {
		// 如果状态码为401，则表示有其他人登录，就返回登录页面
		if (err.status === 401) {
			tips('该账号在别处登录，请重新登录');
			setTimeout(()=>{
        // 1.5秒钟之后退出为登录页面
			},1500);
		};
		// 重试机制开始
		var config = err.config;
		// 判断是否配置了重试
		if(!config || !config.retry) return Promise.reject(err);
		
		if(!config.shouldRetry || typeof config.shouldRetry != 'function') {
			return Promise.reject(err);
		}
		
		//判断是否满足重试条件
		if(!config.shouldRetry(err)) {
			return Promise.reject(err);
		}
		
		// 设置重置次数，默认为0
		config.__retryCount = config.__retryCount || 2;
		
		// 判断是否超过了重试次数
		if(config.__retryCount >= config.retry) {
			return Promise.reject(err);
		}
		
		//重试次数自增
		config.__retryCount += 1;
		//延时处理
		var backoff = new Promise(function(resolve) {
			setTimeout(function() {
				resolve();
			}, 1000);
			// }, config.retryDelay || 1);
		});
	 
		//重新发起axios请求
		return backoff.then(function() {
			return request(config);
		});
		// return Promise.reject(error);
	}
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

# 2.公共方法封装

  • 在APP中需要用到的公共方法需要在公共JS包中封装成全局方法（如:toast卡片，对用户操作进行反馈等）

  • 表单验证方法封装，在整个APP中会有很多个地方都会用到各式各样的表单验证，可以做到一次封装，在后续使用时便可任意复用

  • APP适配处理的方法封装，通过JS判断不同机型，操作不同的CSS样式，实现web方式的APP适配

# 3.多端运行JS区别

  • web端运行需要将isWeb变量设置为true

  • 在web端编写代码时会编写title栏以及tab栏，在进行APP打包时需要将title栏以及tab栏进行隐藏处理,如果在JS公共变量中设置了isWeb为true，需要注释该变量

	// 底部导航栏是否显示
	const bottomtabisshow = true;
	// 顶部标题栏是否显示
	const toptitleisshow = true;
	Host = 'http://xxxxxxx/';
	const showHost = 'http://xxxxxxx';
	isWeb = true;
1
2
3
4
5
6
7

# 6、页面bug定位

  • 操作型问题（如：页面跳转携带参数，页面操作逻辑，页面展示性问题）问题定位为web前端部分

  • 页面数据展示不完整、有缺少部分，首先检查前端代码部分（包括：接口传参，后端数据返回字段展示、字段引用等）

  • 页面title显示、tab栏显示问题、页面整体显示问题（首先判断JS进程是否有错误），定位为APP框架部分

  • 页面渲染逻辑：web代码生成 -> APP框架加载web代码 -> 逐行执行JS代码逻辑 -> vue框架生命周期中发起请求，渲染页面，生命周期mounted执行完毕 -> 页面+逻辑加载完成 -> 用户对web页面操作，以JS代码调用APP原生方法

# VUE多页面开发模式(基础)

doctype html
html
	head
		meta(charset='utf-8')
		title 欢迎
		meta(name='keywords', content='欢迎')
		meta(name='description', content='欢迎')
		meta(content='width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no', name='viewport',viewport='cover')
		//- 开启仿APP模式
		meta(name='apple-mobile-web-app-capable', content='yes')
		meta(name='apple-mobile-web-app-status-bar-style', content='black-translucent')
		//- 控制页面内容
		meta(content='telephone=no', name='format-detection')
		meta(content='email=no', name='format-detection')
		meta(name='apple-mobile-web-app-title', content='欢迎')
		meta(http-equiv='Cache-Control', content='no-siteapp')
	body
		#app
		script.
			let app = new Vue({
				el: '#app',
				data() {
					return {
					};
				},
				created() {
				},
				mounted() {
				},
				methods: {
				}
			});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# VUE多页面开发模式(模块化)

  • 以vuecli为基础进行打包配置，多入口输入输出，将页面逻辑及页面公共样式嵌入html文件。
  • 由于APP页面跳转方式为原生跳转，html页面组件模式为多页面，根据不同的路径渲染不同的页面
前端框架
前端代码规范

← 前端代码规范→

最近更新
01
OnlineService
11-12
02
CacheSize
11-12
03
即时通信
10-18
更多文章>
Theme by Vdoing | Copyright © 2022-2024 HEI | 爽客邦 | 备案号：蜀ICP备2021031781号-1