michael_ouyang-优快云博客

qiankun 是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。单例模式在微前端框架中，子应用会随着主应用页面的打开和关闭反复的激活和销毁（单例模式：生命周期模式）。qiankun 的js沙箱并不能解决所有的 js 污染。例如：用 onclick 或 addEventListener 给<body>添加了一个点击事件，js沙箱并不能消除它的影响，所以说，还得靠代码规范和自己自觉qiankun 不太好实现keep-alive。

2024-06-15 19:16:43 1160

原创微前端无界方案

微前端无界方案

2024-05-13 20:33:28 3744

原创四、前端监控之接入Sentry到项目

一、前端监控之异常监控二、前端监控之方案调研三、前端监控之Sentry的介绍以上是这个专题之前的几篇文章，欢迎观摩。

2023-08-28 02:11:35 1600

原创三、前端监控之Sentry的介绍

这么做就是为了智能地帮助我们组合关联的日志信息，减少人工的日志信息的提取工作量，关注一个 issue 首先关注这些聚合的事件。Sentry 还有有很多亮点，比如：敏感信息过滤，release版本跟踪，关键字查找，受影响用户统计，权限管理等（部分可能需要我们通过代码提供内容）可以通过 Sentry 进行问题分配与跟踪。拿JS举例，不仅仅收集详细的用户设备信息，而且记录了用户的操作行为，通过点击了XX按钮，导致的报错。：Sentry 不仅丰富还规范了上下文的内容，也让我们意识到更多的有效内容，提高日志的质量。

2023-08-28 00:24:47 2151

原创二、前端监控之方案调研

如果公司有这样的财力，支持做整个前端的监控体系，那么还可以琢磨琢磨，但是业务才是企业的生存之道，一般情况下，没有机会给你慢慢的搞一套出来，你不得不寻找其他优质的开源方案。对于一名前端开发工程师来说，也就意味着工作不再局限于前端业务的开发工作，需要有Nginx服务运维能力、实时/离线分析能力、Node应用开发运维能力等等。绝大部分监控系统都是需要收费的，而sentry则是免费的。：还原异常是如何触发的，具体到每一步的操作，返回了什么样的异常，在哪个文件，在第几行代码等等信息。高级版本也是需要收费的！

2023-08-27 03:53:09 760

原创一、前端监控之异常监控

丢点：在浏览器点击跳转时，跳转前的点击上报请求都会进行一个三次握手，如果此时，网络较慢、服务器运行缓慢或者上报请求还在处理阶段，这时，如果页面被卸载了，浏览器都会自动对当前的请求进行abort。一般接口 401 就代表用户未登录，就需要跳转到登录页，让用户进行重新登录，但如果每个请求方法都需要写一遍跳转登录页的逻辑就很麻烦了，这时候就会考虑使用 axios 的拦截器来做统一梳理，同理能统一处理的异常也可以在放在拦截器里处理。这些情况都是非常影响用户体验的，对于用户来说，是难以接受的，用户可能就此流失掉了。

2023-08-25 22:54:23 1620

原创 vue知识点结构图

这一年我都忙于工作什么的，少了写教程。忽然间想复习一下vue的知识点。这是我一年前画出来的知识点结构图，分享给大家。画得不好请多多包涵。...

2018-09-07 11:32:11 3133 1

原创微信小程序之手机号快速注册

为提升小程序使用体验，帮助用户更便捷地获取服务，小程序开放手机号快速填写组件，非个人开发者的小程序完成认证后即可使用。 1. 在新用户注册、联系方式登记等必要场景下，开发者均可在页面上部署手机号快速填写组件。2. 用户点击组件，完成弹窗授权后，即可直接将微信绑定的手机号填入，绝大部分情况下无需再进行短信验证码校验。3. 若用户不愿提供微信绑定的手机号，开发者需提供手动输入手机号功能

2017-08-26 15:54:06 14902 3

原创微信小程序之小程序上线

在微信开发者工具，选择项目点击上传用管理员账户扫码输入版本号，项目备注上传成功后，会出现上传时间，和编译包的大小。注意：编译包的大小不要超过2M打开微信公众平台——开发管理就能看到刚才上传的项目右边的选项中，可以直接提交，也可以选择体验版本（体验版本不需被审核）（1）选择体验版，需要管理员

2017-08-26 15:26:23 8424

原创 vue2.0 mint-ui系列

mint-ui —— switch的使用mint-ui —— radio的使用mint-ui —— checklist的使用mint-ui —— tabbar示例mint-ui —— navbar的使用mint-ui —— tab-container的使用mint-ui —— header的使用mint-ui —— search的使用

2017-08-25 10:43:02 2572

原创 mint-ui —— action sheet的使用

操作表，从屏幕下方移入。 Import按需引入：import { Actionsheet } from 'mint-ui';Vue.component(Actionsheet.name, Actionsheet); 全局导入：全局导入后不用再导入importMint from'mint-ui'import'mint-ui/lib/style.css'

2017-08-25 10:36:29 22841 6

原创 mint-ui —— cell swipe的使用

cell swipe可滑动的单元格，用法同 cell。 Import按需引入：import { CellSwipe } from 'mint-ui';Vue.component(CellSwipe.name, CellSwipe); 全局导入：全局导入后不用再导入importMint from'mint-ui'import'mint-ui/l

2017-08-25 09:44:53 18845

原创 mint-ui —— cell的使用

Cell单元格，可用作展示列表信息、链接或者表单等。 Import按需引入：import { Cell } from 'mint-ui';Vue.component(Cell.name, Cell); 全局导入：全局导入后不用再导入importMint from'mint-ui'import'mint-ui/lib/style.css'Vue

2017-08-25 09:35:48 23818

原创 mint-ui —— search的使用

Search搜索框，可显示搜索结果列表。 Import按需引入：import { Search } from 'mint-ui';Vue.component(Search.name, Search); 全局导入：全局导入后不用再导入importMint from'mint-ui'import'mint-ui/lib/style.css'V

2017-08-03 12:21:50 17073 2

原创 mint-ui —— header的使用

Header顶部导航栏，支持显示按钮、自定义文字和固定在顶部。 Import按需引入：import { Header } from 'mint-ui';Vue.component(Header.name, Header); 全局导入：全局导入后不用再导入importMint from'mint-ui'import'mint-ui/lib/st

2017-08-03 12:21:10 20673

原创 mint-ui —— tab-container的使用

tab-container面板，可切换显示子页面。常与navbar、tabbar结合使用 Import按需引入：import { TabContainer, TabContainerItem } from 'mint-ui';Vue.component(TabContainer.name, TabContainer);Vue.component(TabCon

2017-08-03 12:20:17 28534 5

原创 cordova系列

基础篇------------------------------------------------------------webapp的介绍，以及浅述webapp的技术选型的看法，和cordova的简述cordova命令行总结cordova 事件插件篇--------------------------------------

2017-08-02 09:58:29 907

原创 mint-ui —— navbar的使用

Import按需引入：import { Navbar, TabItem } from 'mint-ui';Vue.component(Navbar.name, Navbar);Vue.component(TabItem.name, TabItem); 全局导入：全局导入后不用再导入importMint from'mint-ui'import'mint

2017-07-30 00:06:09 26231 2

原创 mint-ui —— tabbar示例

Import按需引入：import { Tabbar, TabItem } from 'mint-ui';Vue.component(Tabbar.name, Tabbar);Vue.component(TabItem.name, TabItem); 全局导入：全局导入后不用再导入importMint from'mint-ui'import'mint

2017-07-30 00:03:34 32676

原创 mint-ui —— checklist的使用

Import按需引入：import { Checklist } from 'mint-ui';Vue.component(Checklist.name, Checklist); 全局导入：全局导入后不用再导入importMint from'mint-ui'import'mint-ui/lib/style.css'Vue.use(Mint);

2017-07-29 23:14:12 19849 1

原创 mint-ui —— radio的使用

Import按需引入：import { Radio } from 'mint-ui';Vue.component(Radio.name, Radio); 全局导入：全局导入后不用再导入import Mintfrom 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(Mint); API

2017-07-29 22:58:15 18900

原创 mint-ui —— switch的使用

Import按需引入：import { Switch } from 'mint-ui';Vue.component(Switch.name, Switch); 全局导入：全局导入后不用再导入importMint from'mint-ui'import'mint-ui/lib/style.css'Vue.use(Mint); A

2017-07-29 22:28:31 13502 1

原创 cordova命令行总结

全局命令创建项目创建一个cordova工程cordova create [ []] 示例：cordova create hello com.example.hello HelloWorld 查看帮助cordova help ---or--- cordova -h---or--- cordova -help

2017-07-26 22:01:51 4855

原创 webapp的介绍，以及浅述webapp的技术选型的看法，和cordova的简述

web app介绍什么是web app？因为移动互联网特别火爆，很多企业公司都想开发一个属于自己的app，但是因为原生app开发的成本比较高，而且后期维护比较困难，这些开发成本和后期维护成本对于个人创业者来说或者初期创业公司来说是玩不起的，所以就寻求一种方式既可以低成本，也可以快速开发移动应用，那么web app是最好的选择！ web app可以写

2017-07-26 17:20:47 5253

原创 cordova device-orientation插件——罗盘

介绍这个插件提供了访问设备的罗盘。指南针传感器检测方向或标题的装置的指向，通常是从设备的上方。它的措施从0 to359.99度的标题，其中0是北。安装cordova plugin add cordova-plugin-device-orientation 使用方法访问是通过一个全局navigator.compa

2017-07-24 20:04:15 3862

原创 cordova device-motion插件

介绍这个插件提供了访问设备的加速度计。加速度计是一个运动传感器检测到的变化（三维维度）在相对运动的当前设备的方向，在三个维度上沿X，Y，和Z坐标轴。用来在三个维度来跟踪设备的运动。安装cordova plugin add cordova-plugin-device-motion 支持的平台Supported Pla

2017-07-24 19:50:29 1914

原创 cordova device插件——获取设备信息

device插件获取设备信息，device对象用于描述设备的硬件和软件安装cordova plugin add cordova-plugin-device 使用：这个插件定义了一个全局的device对象，描述了设备的硬件和软件信息。虽然对象在全局范围内，但是需要使用在deviceready事件之后。document.addEventLis

2017-07-24 18:22:37 10639 2

原创 cordova media-capture插件

介绍这个插件提供了访问设备的图像、音频录制和视频录制能力。安装cordova plugin add cordova-plugin-media-capture 使用方法这个插件定义了全局navigator.device.capture对象虽然在全局范围内，但是需要使用在deviceready事件之后。documen

2017-07-24 12:59:14 5796 4

原创 cordova media插件

简介使用Media插件可以在设备上播放音频与录制音频。注意：当前实现并不是遵循W3C规范的媒体捕捉，这里只是提供方便。未来的实现将坚持最新的W3C规范和可能弃用当前的API。安装cordova plugin add cordova-plugin-media 支持的平台· Android· B

2017-07-24 12:12:37 6126 3

原创 cordova whitelist白名单

介绍这个插件在Cordova 4.0以后实现了一个白名单政策用于导航到应用程序的webview上安装插件自动安装详情导航白名单Navigation Whitelist控制URL WebView本身可以导航到。只适用于顶级水平导航。特性：Android也适用于非HTTP（S）方案到iframes。默认情况下，导

2017-07-22 11:49:22 3270

原创 cordova network-information插件

介绍这个插件提供了有关设备的蜂窝和wifi连接信息和设备是否有网络连接。安装cordova plugin add cordova-plugin-network-information 支持的平台Supported Platforms· Amazon Fire OS· Android· BlackBerry 1

2017-07-22 08:59:17 3032

原创 cordova battery-status插件

介绍这个 Cordova 插件用于监视设备的电池状态。安装cordova plugin add cordova-plugin-battery-status 使用方法：应用程序可以使用window.addeventlistener将上述事件的事件侦听器，不过要在deviceready事件之后触发document.addEven

2017-07-21 21:08:31 1528

原创 cordova file插件

介绍使用文件系统处理API可以操作设备的文件系统、文件夹及文件。安装cordova plugin add cordova-plugin-file 使用方法这个插件定义了全局的cordova.file对象虽然定义在全局中，但是需要使用deviceready事件之后document.addEventListener(

2017-07-21 12:53:57 2531

原创 cordova vibration插件——震动

介绍这个插件是用于连接到设备的振动功能。安装插件cordova plugin add cordova-plugin-vibration 使用方法这个插件定义了全局的对象包含着navigator.vibrate。虽然在全局范围内，但是他们需要在deviceready事件之后才可用document.addEventLis

2017-07-19 21:26:13 3542

原创 cordova splashscreen插件

介绍This plugin displays and hides a splash screen during application launch这个插件显示和隐藏在应用程序启动期间的初始萤幕。安装插件cordova plugin add cordova-plugin-splashscreen 支持的平台* 亚

2017-07-18 18:10:01 5886

原创 cordova filetransfer插件——上传、下载文件

介绍FileTransfer对象提供给了一种将文件上传到服务器的方法，可以通过HTTP和HTTPS进行请求，可以传递一个由FileUploadOptions对象设定的可选参数给upload方法。上传成功后，系统会调用成功回调函数并传递一个FileUploadResult对象。如果出现错误，那么系统会调用错误回调函数并传递一个FileTransferError对象。

2017-07-18 15:03:38 28706 4

原创 cordova camera插件——摄像头插件的使用及上传图片

介绍cordova提供照相机API与设备相机进行交互。通过照相机API、我们可以拍摄或者访问照片库中的照片，返回图片的base64编码字符串或者图片的url文件路径。安装插件需要cordova 5.0以上版本cordova plugin add cordova-plugin-camera通过ID安装旧版本的cordovacordova plugin

2017-07-14 23:32:40 32605 2

原创 cordova dialog插件

dialog插件cordova-plugin-dialogs介绍这个插件提供了一些本地的对话框界面elementsvia全球navigator.notification目标安装cordova plugin add cordova-plugin-dialogs使用方法虽然对象连接到全局的navigator对象中，但是需要使用

2017-07-13 20:20:36 4117

原创 cordova 事件

device插件获取设备信息，device对象用于描述设备的硬件和软件安装cordova plugin add cordova-plugin-device 使用：这个插件定义了一个全局的device对象，描述了设备的硬件和软件信息。虽然对象在全局范围内，这是在deviceready事件之后的。document.addEventListen

2017-07-12 12:30:35 1671