Cesc-app-components NPM

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源文件。