概述

• core是移动端业务开发及调试的核心组件
• core支持了移动端响应式设计方案，依据750px的设计稿，基于vw及rem，实现响应式的移动端页面
• core提供了开发调试的实用的功能，如支持vConsole调试，Mock数据，双击页面刷新等
• core集成了与客户端交互的JSBridge
• core提供了实用的utils函数
• core支持错误日志上报

安装

npm i @paperang/core --save

引入

import core from '@paperang/core';
import '@paperang/core/dist/core.min.css';

开始使用

// 初始化core
await core.ready();

1. 配置 core.config

enableMock 是否启用mock数据，默认为false，也可通过路由参数_mock控制
enableVConsole 是否开启vconsole调试组件，默认为测试环境启用，生产环境关闭，也可通过路由参数_dev控制
enableReload 是否启用在页面顶部区域三击刷新页面，默认为测试环境启用，生产环境关闭
enableErrorLog 是否启用错误日志上报，默认为测试环境关闭，生产环境开启，也可通过路由参数_error控制

2. core.env 环境变量，['local','dev','test','pre','prod']

3. core.isApp 是否为App环境

4. core.logger组件 内置的日志组件

logger.log(msg) 打印log，相当于console.log
logger.trace(msg) 打印调试日志，只在enableVConsole为true的时候才会打印日志
logger.error(msg, stack = '') 打印错误日志，stack为错误堆栈，在生产环境会把日志上报至后台

错误日志上报的字段详情

{ app: 'paperang/5.0.0', // app名及版本 字符串 必填
userId: '', // 用户ID 短整型 筛选字段 精确搜索
url: '', // 发生错误的url 字符串 必填 筛选字段 模糊搜索
filename: '', // 报错的文件名 字符串 必填
row: '', //错误所在行数 短整型
column: '', //错误所在列数 短整型
message: '', //错误消息 字符串 必填
stack: '', // 错误堆栈 字符串
ua: '', //用户浏览器userAgent 字符串 必填
model: '', //手机型号 'XiaoMi 9' 字符串
os: '', //用户系统类型 Android 5.0.0/iOS 13.0.0 字符串 必填 筛选字段 模糊搜索
sysDate: '', //错误时间 由后端生成，取当前时间 DateTime 必填 筛选字段 区间搜索
}
错误日志设计规范详见：前端错误监控日志上报

5. core.request go接口请求协议

/**
* 发起业务接口请求
* @param {any} method 接口业务方法名
* @param {any} parameter 接口业务参数
* @param {any} needAuth 是否需要授权
* @param {any} customHeaders 是否需要自定义http头
*/
async post(method, parameter, needAuth = true, customHeaders = true)

request._testUID 设置测试UID账号，仅在app外有效
request.getUserToken() 取得用户token

6. core.utils 功能函数集

utils.getTimeStr() 生成一个基于时间序列的随机字符串
utils.getUniqueId(prefix) 生成一个随机id，prefix为前缀，可选参数
utils.dateToString(date, format) 将date以format方式格式化为字符串 date默认为当前时间，format默认为yyyy-MM-dd HH:mm:ss
utils.dateAddDays(days, date) 将date增加days天，date默认为当前时间
utils.dateAddMonths(months, date) 将date增加months个月，date默认为当前时间
utils.getRandomInt(min, max) 生成min-max之间的随机整数
utils.getQuery(name, url) 取得url的name的query值，url默认为当前页面url
utils.addOrUpdateQuery(name, value, url) 更新url的name的query值value，url默认为当前页面url
utils.isEmpty(value) 判断value是否为undefined/null/''
utils.getMobileOS() 取得当前手机的系统['Android','iOS','unknown']
utils.getSys() 取得当前的手机系统 返回对象{os: 'ios', ver: 11,ver_full: '11.2.0'}
utils.getParent(el, selector) 取得el的selector父节点
utils.getQueries() 将当前url的路由参数反序列化为对象
utils.serialize(obj) 将obj对象序列化为路由参数
utils.loadScript(src, callback) 加载js脚本,callback为加载完成后的回调函数
utils.isInViewport(el) 判断el节点是否在显示的窗口当中/可见

7. css部分

将core.min.css引入项目中即可生效

1）支持css reset 重置默认的浏览器样式
2）box-sizing使用了 border-box
3）支持响应式设计，1px=0.01rem，设计稿对应为750px的宽
4）safe-area：safe-padding类可追加安全区padding，相应地还有safe-padding-top，safe-padding-bottom
5）辅助类：txt-overflow、flex、show、hide
6）app内默认设置了user-select:none