cesc-app-components
v1.0.36
Published
plugin
Downloads
53
Keywords
Readme
cesc-app-components
一、开发手册
开发,打包,发布
在https://www.npmjs.com/ 中注册一个账号,成功后执行
npm login
输入用户名和密码
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# release the production and publish to NPM
npm run release
二、使用手册
引入
本插件基于Vue编写,因此在使用前,需要在Vue项目入口文件中进行全局注册:
// Vue入口文件,一般为app.js或main.js等
import appComponents from 'cesc-app-components';
Vue.use(appComponents);
(一)loggerHelper——前端日志插件
作用简述:
统一收集报错信息,并提供处理回调
使用方法:
// 在App初始化的生命周期中,created或mounted调用
// 为了确保js运行期异常都被监控,应尽可能早地进行初始化
const app = new Vue({
created() {
// 初始化日志监控插件
// 配置文件
const config = {
captureJsError: true, // 是否监控js运行时异常,默认为true
captureResourceError: true, // 是否监控资源加载异常,默认为true
captureAjaxError: true, // 是否监控ajax异常,默认为true
captureConsoleError: false, // 是否监控控制台异常,默认为false
autoReport: true, // 是否自动上报异常日志,默认为true
enableBuffer: true, // 启动异常缓存功能,默认为false
maxBufferSize: 20, // 缓冲数量上限,默认为10
// 异常处理器
sendError: function (logData) {
const {level, category, title, msg} = logData;
console.log(`[日志信息]级别:${level} 类型:${category}`, logData);
if (level !== 'error') return; // 只向后台上报error类信息
let devicePlatform = '';
try {
devicePlatform = device.platform;
} catch (err) {
// 若报错,则意味着是未安装cordova-plugin-device导致
// 默认执行安卓逻辑
devicePlatform = 'Android';
}
const appVersion = window.localStorage.getItem("appVersion");
userController.saveSystemLog(
{
funName: `[FE]${level}-${category}`,
loginName: window.localStorage.getItem('cescUserName'),
type: 4,
clientBrowser: msg.length > 200 ? msg.substr(0, 200) : msg,
clientVersion: `${devicePlatform}-${appVersion}`,
},
res => {},
err => {}
);
}
};
// 启动日志工具类
this.$logger.init(config);
// 停止日志处理
// 当sendError回调里有异常时,调用stopSendError以停止日志处理
// 否则会陷入死循环,即sendError不断产生异常
this.$logger.stopSendError();
// 重新启动日志处理
this.$logger.startSendError();
}
});
(二)chcpHelper——安卓热更新插件助手
作用简述:
作为cordova-hot-code-push插件的管理插件,封装了热更新的常用功能,提供各周期回调。为提高易用性,更进一步结合elementUI 封装了appChcpComponent.vue组件,支持一步到位地使用。
使用方法:
1.appChcpComponent组件:
// template部分
// 因本包(cesc-app-components)已在Vue全局注册过,所以直接在相应的template中插入<app-chcp-component>组件即可。
<template>
<app-chcp-component ref="appChcpComponent" :logNoResAfterFetchUpdate="logNoResAfterFetchUpdate"
:logExceedMaxWaitingTime="logExceedMaxWaitingTime"
:logHandleNoMoreRoomError="logHandleNoMoreRoomError" :logHandleOtherError="logHandleOtherError"
:finallyCallBack="finallyCallBack"/>
</template>
// script部分
const comm = Vue.extend({
method: {
// 以下方法为app-chcp-component的prop
/**
* 日志回调-已开启热更新下载但未走回调
*/
logNoResAfterFetchUpdate() {},
/**
* 日志回调-达到更新等待时间上限仍未更新成功
*/
logExceedMaxWaitingTime() {},
/**
* 日志回调-剩余空间不足的回调
*/
logHandleNoMoreRoomError(error) {},
/**
* 日志回调-其他错误的回调
*/
logHandleOtherError(error) {},
/**
* 日志回调-最终回调
*/
finallyCallBack() {},
}
});
2.chcpHelper:
// js文件
import ChcpHelper from "../utils/chcpHelper";
export default {
mounted() {
// 创建chcpHelper实例
this.chcpHelper = new ChcpHelper(this.dataBridge);
this.chcpHelper.init({
// 检查发现未安装热更新插件的回调
chcpNotInstalled: () => {},
// 执行热更新前的回调
beforeUpdate: () => {},
// 已开启热更新下载但未走回调的回调
// 说明已开启热更新下载(chcp.fetchUpdate),但未走回调
noResAfterFetchUpdate: () => {},
// 达到更新等待时间上限仍未更新成功
exceedMaxWaitingTime: () => {},
// 无更新内容的回调
handleNothingToUpdate: () => {},
// 剩余空间不足的回调
handleNoMoreRoomError: error => {},
// 其他错误的回调
handleOtherError: error => {},
// 检查安装包前的回调
beforeCheckUpdateAvailable: () => {},
// 检查安装包出错的回调
handleheckUpdateAvailableError: error => {},
// 安装更新包前的回调
beforeInstall: () => {},
// 安装出错的回调
handleInstallError: () => {},
// 安装更新包成功的回调
handleInstallSuccess: () => {},
// 最终回调
finallyCallBack: () => {}
});
}
}
如果有更进一步的需求,可自行修改components/appChcpComponent.vue或utils/chcpHelper.js源文件。
注意事项:
chcpHelper需要在cordova安卓项目中使用,并确保已安装cordova-hot-code-push插件
引入组件,默认会在mounted周期里调用chcpHelper.init方法,并将上述的props作为参数传入完成初始化。 如有需要可查看源码进行自定义开发。