@bbtfe/core v1.2.3

概述

• core是bbt业务开发及调试的核心组件。
• core内置了bbtfe下的一些常用组件：如utils常用功能函数及基础样式，toast，version等子组件；
• core支持了移动端响应式设计方案，依据750px的设计稿，基于vw及rem，实现响应式的移动端页面；
• core提供了开发调试的实用的功能，如支持vConsole调试，Mock数据，双击页面刷新等；
• core对share和ready进行了再次封装和增强，支持async，await；

引入

import core from '@bbtfe/core';
import '@bbtfe/core/dist/core.css';

2012-02-17 update to v1.2.3 //兼容wkwebview 2019-09-27 update to v1.2.2

针对script方式引入优化 修复部分bug script方式接入core的错误监控代码示例：

1.在head处引入脚本

2.初始化core组件

window.core.ready().then(function () { console.log('需要等待native ready的代码写在回调里'); });

2019-09-26 update to v1.2.0

增加前端错误/异常上报至后台日志 增加logger对象，用于日志记录 修复部分bug和代码重新优化 详细说明： 1.异常上报： 1）控制开关：core.config.enableErrorLog 默认在预上线(pre)和生产环境(prod)开启错误上报，dev和test环境不开启，以免污染后台的错误日志。

 url控制开关：&_error=true/false

2）后台日志查看地址：http://splunk3.plt.dayin.com/zh-CN/app/search/monitorfeerror?form.field1.earliest=%40d&form.field1.latest=now&form.field2=pregnancy&form.field3=&form.field4=

3）原理：core全局监听捕获了站内JS触发的异常，然后将错误日志上报给后台，字段包括报错的消息，代码位置，报错堆栈，所使用的系统（iOS/Android），孕育App版本，浏览器信息ua等。

4）注意事项：

（1）针对异步错误：

原则上, core捕获了异步函数触发的异常，这是基于unhandledrejection这个事件的，但是支持的浏览器非常有限，当前在移动端浏览器几乎不被支持，所以在封装和写异步函数的时候，强烈要求在await函数和promise上自己catch一下错误，做好错误异常处理，然后在catch里面把错误信息上报给后台：

  core.logger.error(err.message, err.stack)

（2）针对跨域脚本错误：

由于前端浏览器对于脚本安全的考虑，默认是不允许跨域捕获脚本错误信息，所以，需要做两件事：

服务器端：脚本的Response Header添加Access-Control-Allow-Origin头，表明允许跨域； 前端：script属性配置 crossorigin="anonymous" 这样，前端就能同时捕获跨域脚本的错误了。

2.logger对象 logger负责打印日志，是对console.log的增强，并与错误上报相结合。

api： core.logger.log(msg) 打印普通日志

core.logger.trace(msg) 打印普通日志(跟踪消息)，在dev模式(core.config.enableVConsole=true)下才会打印日志，这个api主要是消除开发时写的跟踪日志出现在线上环境。

core.logger.error(msg.stack) 打印错误日志，同时会将错误日志上报至后台。

2019-09-16 update to v1.1.6

增加栏位曝光功能 删除了npm包非必要的一些文件，诸如demo文件夹 栏位曝光使用说明：

方法名：core.bbtfe.initBlockTrack

参数：

/**

• @param {HTMLDocument} elesWithTrackData 需要栏目曝光的元素数组，并且携带埋点数据的dom元素数组{el:el,data:{ }}
• @param {HTMLDocument} scrollContainer 滚动容器，可选，默认为曝光元素的直接父节点
• @param {boolean} exposureMutiple 是否每次元素显现都发送曝光埋点，可选，不填默认为false */ initBlockTrack(elesWithTrackData, scrollContainer, exposureMutiple)

2019-08-30 update to v1.1.2

删除了使用频率比较低的内置组件version及share，其中对share站内外需要单独统一封装组件 调试功能双击刷新改成3击刷新，防止误操作导致页面reload 增加JSBridge，提供一些常用的原生JS方法支持 core.JSBridge

字段： app.name app名称

app.version app版本号

device.id 设备指纹

device.mac mac

user.uid 用户uid

user.isLogin 是否已登录

user.token 用户登录串 loginString

user.name 用户名

user.role 1爸爸版,2妈妈版

user.baby.status 1备孕 2孕育 3育儿

user.baby.birthday 用户宝宝的生日

方法： setTitle(title) 设置原生标题

openImage(url) 查看大图

openVideo(url) 播放视频

openWebview(url, title) 打开新的webview页面

closeWebview() 关闭当前webview页面

login() 调起原生登录

showShareButton() 显示头部右上角分享按钮

launchShare(platform) 调起分享弹层 platform 不指定为不限制分享平台 指定platform，qq: qq好友 wxtimeline: 微信朋友圈 wxsession: 微信好友

setShare(params) params 参照window.share http://space.dayin.com/pages/viewpage.action?pageId=11291835

async encrypt(params) 调用客户端加密参数（没有堆栈维护调用顺序，后续优化）

===========================================================================

core是一个辅助移动端开发调试，兼顾集成框架的一个fe独立组件。

代码位置：./git/bbt-fe-comp/core

npm库：https://www.npmjs.com/package/@bbtfe/core

概述 core是bbt业务开发及调试的核心组件 core内置了bbtfe下的一些常用组件：如utils常用功能函数及基础样式，toast，version等子组件 core支持了移动端响应式设计方案，依据750px的设计稿，基于vw及rem，实现响应式的移动端页面 core提供了开发调试的实用的功能，如支持VConsole调试，Mock数据，双击页面刷新，全局异常处理等 core对share和ready进行了再次封装和增强，支持async，await core对native事件进行了JS原生事件Event的封装，支持addeventlistener注册监听事件 使用 引入 import core from '@bbtfe/core'; import '@bbtfe/core/dist/core.min.css';

API 使用core.config可以配置是否开启某项调试功能： core.config.enableVConsole 是否开启VConsole调试工具。在dev环境默认开启。

core.config.enableMock 是否开启Mock前端模拟数据。默认不开启。

core.config.enableReload 是否开启页面双3击刷新功能。在dev环境默认开启。

core.config.enableErrorhandler 是否开启错误处理功能。默认不开启。

部分配置参数也可以通过路由上的query来控制，query配置的优先级要高于上述config配置的方式：

&_dev=true/false 是否开启vconsole，用法：在非dev环境下，例如在线上环境，追加这个参数能动态加载vconsole组件，方便排查线上问题。 &_mock=true/false 是否开启mock数据模拟 &_error=true/false 是否开启显示为处理错误，当前为alert方式，继续完善需要做好完善的前端监控，进行错误日志上报（TODO） 由于vconsole及mock组件是运行时（根据配置）决定的，所以这两个组件并不会打包在项目最终输出的js文件，而是独立的，core会根据配置在运行时动态把相应的调试组件加载。

bbtfe wrapper集成了一些常用的bbtfe相关业务组件，统一入口： core.bbtfe.showToast 显示toast消息

core.bbtfe.version @bbtfe/version组件

core.bbtfe.share 增强型，统一了share的站内站外分享设置

core.bbtfe.native 封装了一些app native相关的功能：

在a标签上指定data-native-link=“title name”属性，在站外表现为普通a标签，在站内为adAction 封装了webviewAppear和webviewDisappear事件，监听方式： // webviewAppear事件 window.addEventListener('webviewAppear', (ev) => { console.log('on webviewAppear event.'); }, false);

// webviewDisappear事件 window.addEventListener('webviewDisappear', (ev) => { console.log('on webviewDisappear event.'); }, false);

core.ready core初始化完成的事件，为异步函数，使用await等待 ready是指：1. core组件已经ready，2. 在站内的情况下，native已经ready

async start() { await core.ready(); // 业务逻辑开始 }

ready之后，core会在body上追加class，站内为app，站外为web，方便做一些站外站内的区分处理，如样式控制。

辅助功能： core.env 环境变量：返回'local','dev','test','pre','prod'当中的一个

core.isDev 是否为开发环境：local || dev

core.isApp 是否为孕育app，使用ua快速判定

core.utils封装了一些业务无关的前端通用辅助函数 代码位置：./git/bbt-fe-comp/utils

支持的api： selectText(node) 选中指定元素中的文字

getTransformMatrix(node) 获得指定元素的css transform matrix 对象{a,b,c,d,e,f,m11,m12,m13,m14}

getUniqueId(prefix) 生成唯一id，prefix为指定前缀，参数可选

dateToString(date, format) JS Date字符串化，format为格式，如：yyyy-MM-dd，参数可选。

dateAddDays(days, date) 当前日期或者指定date的基础上增加days天

dateAddMonths(months, date) 当前日期或者指定date的基础上增加months个月

repeatExecute(func, timeOut, interval) 在限定的timeOut时间内，间隔interval毫秒重复执行func函数

getRandomInt(min, max) 生成min~max整数随机数

getQuery(name, url) 取得当前或指定url上的参数名为name的query值

addOrUpdateQuery(name, value, url) 增加或更新参数名为name的query值

isEmpty(value) 是否为空值 undefined || null || ‘’

isNumberKeyCode(event) 是否为数字键

isNumericKeyCode(event) 是否为数字键 包含小数点. e及+ - 符号

getMobileOS() 返回Android/iOS/unknown

getParent(el, selector) 取得元素el的母节点，selector为母节点的选择器

getQueries() 反序列化，取得当前url的所有参数，返回参数组成的object

loadScript(src, callback) 异步加载script文件，src为脚本地址，callback为加载完成之后的回调事件

/bbt-fe-comp/utils组件除了封装了一些常用的功能函数，还提供了一些基础的样式： 浏览器默认css样式重置：reset.css css盒模型使用border-box IPhoneX/XS/XR safe area基础适配，暂不支持fixed/absolute类型的布局 栅格布局，基于flex 常用的css样式，如文字处理，超出截断，显示隐藏控制，居中控制等，具体class名查看/bbt-fe-comp/utils/src/base.scss代码 750px设计稿的移动端响应式方案： 基于750px的设计稿，结合vw,rem可以实现响应式的移动端布局方案。

html { font-size: calc(10000vw / 750); /this code is for mobile css design,design paper should be target at 750px/ }

在base.scss定义了根字号，由于浏览器对最小字号的限制，根字号放大了100倍，转换关系：

750px设计稿中的1px = 0.01rem 也就是100倍比例关系

建议： 异步操作使用promise封装，函数支持async，await，做好异步异常catch 当前native.js/bbtnative存在较多缺陷，建议使用原生JS API与native交互：http://space.dayin.com/pages/viewpage.action?pageId=11291835 埋点代码统一写在同一个地方/函数，便于后期查找及维护

模板： preg_js为基于parcel及@bbtfe/core的一个模板工程

http://192.168.24.32/fe-template/preg-js.git