mix-public 1.1.6 → 1.1.7

package/README.md

@@ -5,8 +5,8 @@
 
 - mixAPP依赖，可用于web/app开发
 
-
 ### 安装方法
+
   ```javascript
     // npm
     npm i mix-public
@@ -15,7 +15,9 @@
     // pnpm
     pnpm i mix-public
   ```
+
 ### 初始化方式
+
   ```javascript
     // 布局使用(入口文件)
     import mixRender from "mix-public"
@@ -39,6 +41,7 @@
   ```
 
 ### 生命周期
+
   ```javascript
     // 页面加载时
     OnloadPage((op)=>{
@@ -53,6 +56,7 @@
   ```
 
 ### 方法使用方式
+
   ```javascript
 
     // 调用类型
@@ -66,8 +70,8 @@
     })
   ```
 
-  
 ### 更新记录
+
 - v1.0.0 项目初始化
 - v1.0.1 调整文档调用方式
 - v1.0.2 调整publicLib调用方式(区分类app样式及单公共调用方法)
@@ -84,4 +88,5 @@
 - v1.1.3 方法包剩余调用方式整体调整
 - v1.1.4 goto 方法参数调整
 - v1.1.5 部分方法网页版完善/优化方法样式
-- v1.1.6 添加APPpop页面
+- v1.1.6 添加APPpop页面
+- v1.1.7 添加文档模板/部分 web 实现添加

package/docs/01./346/241/206/346/236/266/344/273/213/347/273/215/01./347/233/256/345/275/225/347/273/223/346/236/204.md

@@ -0,0 +1,16 @@
+---
+title: 目录结构
+date: 2023-08-07 11:37:11
+permalink: /pages/8f427a/
+categories:
+  - 前端军刀
+  - 框架介绍
+tags:
+  -
+author:
+  name: ABpasser
+---
+
+## 目录介绍
+
+## 文件介绍

package/docs/01./346/241/206/346/236/266/344/273/213/347/273/215/02./345/211/215/347/253/257/346/241/206/346/236/266.md

@@ -0,0 +1,220 @@
+---
+title: 前端框架
+date: 2022-03-18 09:52:33
+permalink: /pages/325da5/
+categories:
+  - docs
+  - 前端军刀
+  - 框架介绍
+tags:
+  - 
+author: 
+  name: ABpasser
+---
+## 爽客邦ES Hybrid APP开发-前端开发框架(基于VUE-CLI)
+
+# 前端框架依赖
+
+### 1.编译时依赖
+
+* Vue CLI
+* copy-webpack-plugin
+* html-inline-css-webpack-plugin
+* html-webpack-plugin
+* inline-chunk-html-plugin
+* mini-css-extract-plugin
+* postcss-pxtorem
+* pug-plain-loader
+* sass,
+* sass-loader,
+
+### 2.运行时依赖
+
+* vue,
+* vant,
+* axios,
+* crypto-js,
+* core-js,
+* echarts,
+* libpag@,
+
+### 3.三方依赖包
+
+* h5lock (移动端手势密码)
+* arealist (中国地区表)
+* clipboard (复制文本)
+<!-- ![Tmage text](./img/productStructure.png)  -->
+
+# 介绍
+
+### 爽客邦ES 是一个基于 Vue CLI、Vue.js + APP原生 进行快速开发多页面APP的完整系统，提供
+
+* 通过 @vue/cli 实现的交互式的多页面项目脚手架
+* 项目输出结构为多页面web APP，多页面上传服务器通过服务器与APP原生进行交互，具有快速部署、页面灵活性高、快速迭代等优势
+* 爽客邦ES项目打包文件为本地运行，
+* 爽客邦ES致力于将web APP页面标准化、模块化。提高了传统H5页面在本地加载的安全性。
+
+### 项目开发目录结构
+
+```
+|-- root
+  |-- config
+    |-- cleanfile.js
+    |-- inlinecode.js
+    |-- pages.config.js
+    |-- split-chunks.js
+  |-- public
+    |-- index.html
+  |-- src
+    |-- assets
+      |-- api
+        |-- .js
+      |-- public
+        |-- .js
+      |-- scss
+        |-- .scss
+      |-- static
+        |-- images
+          |-- .png/.jpe?g/.gif/webp
+        |-- pag
+          |-- .pag
+    |-- components
+    |-- pages
+  |-- .gitignore
+  |-- babel.config.js
+  |-- jsconfig.json
+  |-- package-lock.json
+  |-- package.js
+  |-- vue.config.js
+```
+
+### 打包目录结构
+
+```
+|-- dist
+  |-- static
+    |-- css
+      |-- .css
+    |-- img
+      |-- .png/.jpe?g/.gif/webp
+    |-- js
+      |-- .js/.wasm
+    |-- pag
+      |-- .pag
+  |-- .html
+```
+
+# 安装
+
+### Node 版本要求
+
+Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
+
+#### 可以使用下列任一命令安装这个新的包
+
+```
+npm install -g @vue/cli
+
+# OR
+
+yarn global add @vue/cli
+```
+
+#### 项目依赖安装
+
+```
+npm i
+
+# OR
+
+yarn
+```
+
+# 开发
+
+## HTML 和静态资源
+
+### Index.html 文件
+
+* public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入图标链接,以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接(页面私有逻辑及样式会以内联的形式注入html页面)
+
+### 插值
+
+因为 index 文件被用作模板，所以你可以使用 lodash template 语法插入内容：
+
+* <%= VALUE %> 用来做不转义插值；
+* <%- VALUE %> 用来做 HTML 转义插值；
+* <% expression %> 用来描述 JavaScript 流程控制。
+
+除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。例如，BASE_URL 的用法：
+
+```html
+<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+```
+
+### 多页应用配置
+
+* 爽客邦打包编译为多页面应用，需要对VUE CLI进行多页面配置。
+
+* 在config/pages.config.js 中的 list 添加已有页面文件名及html标题名， 构建好的应用将会在不同的入口之间高效共享通用的 chunk 以获得最佳的加载性能。
+
+### 处理静态资源
+
+静态资源可以通过两种方式进行处理：
+
+* 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 进行路径处理。
+
+* 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 处理(不推荐直接将静态资源放置public文件夹下，这样会导致静态资源会在打包编译后直接放在打包根目录处)
+
+图片资源压缩处理：
+
+* 你可以通过 chainWebpack 调整内联文件的大小限制。例如，下列代码会将内联图片资源限制设置为 4KiB：
+
+```
+chainWebpack:(config) => {
+  config.module
+    .rule('images')
+    .set('parser', {
+      dataUrlCondition: {
+        maxSize: 2 * 1024, // 2KiB
+      }
+    })
+},
+```
+
+### 预处理器
+
+* pug:爽客邦ES的html都是由pug进行撰写并转义，减少不必要的双标签代码量，并由pug-loader进行转义并编译。
+
+``` html
+<template lang="pug">
+.app
+ div(@click="goback")
+  img(src="~images/test.png")
+ #inputpassword(@click="setsuccess")
+ #goon(@click="goindex")
+ .lock.bgcfff
+ #passwordiswrong(@click="forgetpassword")
+ .forgetpassword.c999(@click="forgetpassword") 忘记手势密码
+</template>
+````
+
+## CSS相关
+
+爽客邦ES项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。
+
+### 引用静态资源
+
+所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径前加上 ~ 的前缀来避免歧义。
+
+### 样式预处理器
+
+* scss:爽客邦ES前端项目的css与正常MPA并无区别，可定义公共样式与页面私有样式，但在页面中 style的SCOPE标签 无论添加与否都无全局生效作用。
+
+``` html
+<style lang="scss">
+  ···
+</style>
+````
+
+# 部署

package/docs/01./346/241/206/346/236/266/344/273/213/347/273/215/03./345/211/215/347/253/257/351/241/271/347/233/256/344/273/213/347/273/215.md

@@ -0,0 +1,253 @@
+---
+title: 前端项目介绍
+date: 2022-03-18 09:52:33
+permalink: /pages/9ac2f1/
+categories:
+  - docs
+  - 前端军刀
+  - 框架介绍
+tags:
+  - 
+author: 
+  name: ABpasser
+---
+# 爽客邦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
+	--|:--:|--:
+	html|css|JS
+	这是|原生|tab
+
+## 3、JS调用原生功能
+
+- 原生方法调用：将JS与原生交互方法进行封装、判断终端类型通过页面调用不同的JS所对应的原生方法。
+
+- 原生方法回调：在一些需要进行后续回应的操作中，需要原生对JS页面逻辑的回调或者通过页面返回触发OnStart执行相对相应的页面逻辑。(如：扫码逻辑中，APP对所识别的内容进行本地存储，再通过页面JS中声明的方法，在OnStart中触发页面的后续逻辑，从本地存储中拿到对应的值进行后续处理)
+
+```javascript
+// 只要进入页面就会触发OnStart回调(OnStart需定义在window下)
+  function OnStart(){
+    app.todo();
+  }
+  let app = new Vue({
+    el:'#app',
+    data(){
+      return {
+        // vue内部变量申明
+      }
+    },
+    created(){
+      // 页面一开始加载就需要处理的逻辑（如：页面请求）
+    },
+    mounted(){
+      todo(){
+        // 具体执行逻辑（如：扫码之后的后续流程）
+      },
+    },
+  })
+```
+## 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登录做唯一性处理，需要后端配合，根据返回值进行判断。
+
+```javascript
+  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);
+	}
+);
+```
+### 2.公共方法封装
+
+- 在APP中需要用到的公共方法需要在公共JS包中封装成全局方法（如:toast卡片，对用户操作进行反馈等）
+
+- 表单验证方法封装，在整个APP中会有很多个地方都会用到各式各样的表单验证，可以做到一次封装，在后续使用时便可任意复用
+
+- APP适配处理的方法封装，通过JS判断不同机型，操作不同的CSS样式，实现web方式的APP适配
+
+### 3.多端运行JS区别
+
+- web端运行需要将isWeb变量设置为true
+
+- 在web端编写代码时会编写title栏以及tab栏，在进行APP打包时需要将title栏以及tab栏进行隐藏处理,如果在JS公共变量中设置了isWeb为true，需要注释该变量
+
+```javascript
+	// 底部导航栏是否显示
+	const bottomtabisshow = true;
+	// 顶部标题栏是否显示
+	const toptitleisshow = true;
+	Host = 'http://xxxxxxx/';
+	const showHost = 'http://xxxxxxx';
+	isWeb = true;
+```
+
+## 6、页面bug定位
+
+- 操作型问题（如：页面跳转携带参数，页面操作逻辑，页面展示性问题）问题定位为web前端部分
+
+- 页面数据展示不完整、有缺少部分，首先检查前端代码部分（包括：接口传参，后端数据返回字段展示、字段引用等）
+
+- 页面title显示、tab栏显示问题、页面整体显示问题（首先判断JS进程是否有错误），定位为APP框架部分
+
+- 页面渲染逻辑：web代码生成 -> APP框架加载web代码 -> 逐行执行JS代码逻辑 -> vue框架生命周期中发起请求，渲染页面，生命周期mounted执行完毕 -> 页面+逻辑加载完成 -> 用户对web页面操作，以JS代码调用APP原生方法
+
+# VUE多页面开发模式(基础)
+
+``` javascript
+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: {
+				}
+			});
+```
+# VUE多页面开发模式(模块化)
+
+- 以vuecli为基础进行打包配置，多入口输入输出，将页面逻辑及页面公共样式嵌入html文件。
+
+* 由于APP页面跳转方式为原生跳转，html页面组件模式为多页面，根据不同的路径渲染不同的页面
+* 

package/docs/01./346/241/206/346/236/266/344/273/213/347/273/215/04./345/211/215/347/253/257/344/273/243/347/240/201/350/247/204/350/214/203.md

@@ -0,0 +1,153 @@
+---
+title: 前端代码规范
+date: 2024-06-11 10:53:22
+permalink: /pages/bd8244/
+categories:
+  - docs
+  - 前端军刀
+  - 框架介绍
+tags:
+  - 
+author: 
+  name: ABpasser
+---
+<!--
+ * @Author: guicheng 1625811865@qq.com
+ * @Date: 2024-04-01 12:00:35
+ * @LastEditors: guicheng 1625811865@qq.com
+ * @LastEditTime: 2024-04-01 15:01:48
+ * @FilePath: /docs/docs/01.前端军刀/01.框架介绍/04.前端代码规范.md
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+---
+
+title: 前端项目介绍
+date: 2022-03-18 09:52:33
+permalink: /pages/3ba9g2/
+categories:
+
+- docs
+- 前端军刀
+- 框架介绍
+  tags:
+- author:
+  name: ABpasser
+
+---
+
+# 爽客邦 ES Hybrid APP 开发-前端代码规范
+
+### 文件编码格式
+
+- UTF-8
+
+### 文件命名
+
+#### html 文件/夹命名
+
+- 全小写以-分隔单词
+
+```javascript
+"user-login.html";
+```
+
+#### html 文件夹命名
+
+- 全小写以-分隔单词
+
+```javascript
+"user-login.scss";
+```
+
+### JS 代码命名
+
+#### 环境常量
+
+- 全大写以\_分隔单词
+
+```javascript
+const PRODUCTION_ENVIRONMENT = "develop";
+```
+
+#### 常量
+
+- 大驼峰命名
+
+```javascript
+const MerchantNo = 6230214578451254112;
+```
+
+#### 变量
+
+- 小驼峰命名
+
+```javascript
+let merchantNo = "6230214578451254112";
+```
+
+#### 函数命名
+
+- 小驼峰命名
+
+```javascript
+const stockFormatter = (num) => {
+  return num * 2;
+};
+```
+
+#### 组件
+
+- 小驼峰命名
+
+```javascript
+merchantCard.vue;
+```
+
+### 注释
+
+- 注释应多用于某段代码为什么存在
+- 强调代码的目的，用途和背后的逻辑
+
+#### 单行注释
+
+- 单行注释放在注释代码上方，如果单行注释不是代码块的首行，需在注释前面空一行
+
+```javascript
+// 库存格式化，用于将当前库存翻倍显示
+const stockFormatter = (num) => {
+  return num * 2;
+};
+```
+
+#### 多行注释
+
+- 多行注释 /\*\*... \*/ 用于文件说明，类型说明，参数说明
+
+```javascript
+/**
+* 用于将当前库存翻倍显示
+* num: 当前库存数量
+* */
+const stockFormatter = (num)=>{
+return num * 2;
+};
+```
+
+- 多行注释 //... 用于代码块多行解释
+
+```javascript
+// 库存格式化
+// 用于将当前库存翻倍显示
+const stockFormatter = (num)=>{
+return num * 2;
+};
+```
+
+### 字符串格式
+
+- 字符串符号应为""
+
+```javascript
+const SnNo = "62312012452123654"
+```