- 博客(31)
- 收藏
- 关注
RSS订阅原创 Vue2 源码解读四：Observer模块
文章目录Vue2 源码解读一：Global APIVue2 源码解读二：mergeOptionsVue2 源码解读三：Vue实例Vue2 源码解读四：ObserverVue2 源码解读四：Observer深入理解Vue的响应式原理，需要先熟悉JavaScript的一些基础知识：原型和原型链Object.defineProperty：Vue做数据劫持最核心的方法，查看官方说明；Object.create()：查看官方说明；1、入口文件...
2021-08-24 16:58:43
817
2
原创 Vue2 源码解读三：Vue实例
文章目录Vue2 源码解读一：Global APIVue2 源码解读二：mergeOptionsVue2 源码解读三：new Vue 1、入口方法 2、initMixin 3、stateMixin 4、eventsMixin 5、lifecycleMixin 6、renderMixinVue2 源码解读三：new Vue在创建Vue应用时，都会用到初始化Vue实例对象的方法new Vue(options)。接下来，就看看在创建Vue实例对象时，Vue2源码都做了些..
2021-08-18 20:56:54
459
原创 Vue2 源码解读二：mergeOptions
文章目录Vue2.6源码解读一：Global APIVue2.6源码解读二：mergeOptions 1、入口方法 2、检查组件名称的合法性 3、数据规范化、格式化 4、合并策略Vue2.6源码解读二：mergeOptionsmergeOptions是Vue的源码中常用的合并策略，对Vue的data、methods、computed、watch、lifecycle等等的合并。在Vue实例化、Vue.extend、Vue.mixin外部调用方法中都有调用。1、入口方法该方..
2021-08-09 14:06:28
402
原创 Vue2 源码解读一：Global API
文章目录Vue源码解读一：源码准备1、准备源码，添加调试2、Flow静态类型检查3、目录说明[Vue源码解读一：Global API](https://fanyi.baidu.com/#auto/zh/)Vue源码解读一：源码准备1、准备源码，添加调试下载Vue源码 Vue Release ；安装依赖cnpm install，使用cnpm安装修改package.json中的scripts，dev脚本添加--sourcemap，改为"dev": "rollup -w -c scripts/conf
2021-08-04 14:55:40
1080
原创 常用正则表达式大全
文章目录一、校验数字的表达式二、校验字符的表达式特殊表达式一、校验数字的表达式数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$正数、负数、和小数：^(-|+)?\d+(.\d+)?$有两位小数的正
2021-08-02 15:35:32
155
1
转载 【转载】Windows下Tesseract4.0识别与中文手写字体训练
一 、 tesseract 4.0 安装及使用 1. tesseract 4.0 安装 安装包下载地址： http://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-setup-4.00.00dev.exe 我在CSDN下载资源里也上传了一份： http://download.csdn.net/download/dcrmg/10021168 exe可执行文件直接安装，选择...
2021-04-23 09:37:59
1412
1
原创 Flutter 自定义水印拍照相机
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言先说一下我这里的基本需求：限制图片拍照比例 4:3拍照时，需添加时间、地理位置的水印然后看一下功能预览：相机预览生成水印图片提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimp
2021-02-23 15:29:09
3256
9
原创 Flutter 二维码扫描插件
文章目录前言效果演示一、Zxing是什么？二、插件Android部分1. 创建Flutter插件2. 引入Zxing依赖库3. 权限配置4. ZXingLite代码引入5. 编写QrScannerPlugin三、插件Flutter部分总结Github地址前言在Dart Packages找了一圈二维码扫描插件，发现几个问题：1. 扩展性低，自己想定制一下扫描框的样式，改起来很麻烦；2. 摄像头不能拉进，导致比较小的二维码识别不了。于是，在GitHub上找了一下Android的二维码扫描插件（我的
2021-01-13 13:59:38
1801
1
原创 微信小程序 -数字滚动动画
效果图实现思路为了实现数字的无限滚动效果，每个数字框的内部，其实包含了两组0~9的view，每个View的高度都一样数字框内使用绝对定位，通过调整top位置，显示出指定的数字使用transtion动画，top发生变化时就会滚动，然后通过指定动画的delay、duration，使数字之间延时动画项目代码js文件// components/scroll-number/index.jsComponent({ externalClasses: ['container-class', 'it
2020-10-19 10:39:56
4234
10
原创 使用Flutter撸一个视频播放APP(有福利哦~)
使用Flutter撸一个视频播放APP(有福利哦~)基于苹果CMS8.0的资源站收集视频播放APP。视频资源来源：从网上的各大资源收集站中获取视频资源，他们大都支持苹果CMS8.0的接口方法获取。应用截图首页视频播放资源管理设置项目地址GitHub项目地址release包可直接下载安装苹果CMS8.0接口说明api接口仅供提供数据，可以直接在苹果CMS后台联盟采集中加入-并提供给他人采集。联盟资源分配唯一标识ID，用来区别绑定分类，这个ID一般由苹果
2020-08-10 12:01:02
55688
原创 vue+IOS9页面白屏
一、页面白屏一个已经上线的项目，客户反映：IOS9.2、IOS9.3的苹果手机打开白屏。分析原因当时猜想是不是IOS9的系统浏览器版本太低，不支持一些语法导致的。然后启动IOS9的模拟器，再连接浏览器，查看console的错误日志。果然，有一个错误就是不能识别const，再查看详细内容，是引用的Swiper中的一个swiper.bundle.js导致的。处理方案下载离线Swiper，然后在index.html中静态引用。如果有的组件没有离线版本，可复制源码，然后放在src/目录文件夹下的任
2020-07-16 11:54:44
2241
原创 Vue 实现动态生成路由（动态生成菜单，根据菜单动态生成路由）
在后台管理系统中，常常会因为不同的权限，展现不同的菜单。但这仅仅是显示控制，而我们要做的是没有的菜单权限，直接输入URL也不可访问，真正的实现菜单权限控制。一、动态菜单显示1. 后端返回的菜单数据处理后端返回的菜单数据一般有两种，处理好的树状结构、或者未处理的列表数据（这种情况需要我们去转换成树状结构，可看我的另外一篇博客【js树形结构操作】）。下面是后端返回的数据：[ { "id": "1", "pid": "0", "name": "工作台", "url.
2020-07-16 11:37:26
71104
34
原创 echarts自定义map背景，以及自定义标注效果
实现思路设置DIV的背景图，为自定义彩图；绘制echarts地图，默认情况下区域颜色透明，没有边框；通过设置aspectScale(宽高比)、center(中心坐标)、zoom(缩放大小)来控制echarts和彩图的重叠效果；设置鼠标浮动到的区域效果，渐变色、背景等等。实现代码js代码const json = require('@/assets/data/guizhou.json')echarts.registerMap('贵州省', json)this.centerMapChart.
2020-07-01 18:10:50
7831
6
原创 使用HTML图片热区area map制作区域地图的选择高亮效果
在制作区域地图时，往往我们会因为没有地图的坐标数据，无法使用Echarts来绘制地图，这时候我们可以使用HTML的usemap属性来完成地图效果。比如鼠标指到指定的地图区域，该区域高亮显示，然后显示该区域的一些基本信息，还有一些点击事件处理等等。示例图片：一、HTML的usemap属性img标签的usemap属性：它可以指定一个map标签map标签：地图集合。必须包含name属性area标签：区域坐标集合。shape指区域的形状，包括矩形rect、圆形circle、多边形polygon；co.
2020-06-17 16:19:17
7271
4
原创 Flutter布局中嵌入Android原生组件 - 全景图组件封装
Flutter布局中嵌入Android原生组件 - 全景图组件封装Flutter已经拥有大量的UI组件库，但是有一些特殊的视图它并没有，这时候就需要Native来实现这样的视图，然后在Flutter端调用。这里以封装一个全景图组件为例讲解在Flutter布局中怎样嵌入Android原生组件。项目地址：flutter_panorama原生插件: GoogleVr (这里是老版本的实现方式...
2020-04-27 11:44:02
3648
原创 基于Flutter的m3u8下载器
基于Flutter的m3u8下载器Flutter m3u8下载器。后台任务下载，支持加密下载。只实现了Android端，并且只支持单m3u8视频下载(m3u8文件包含了多个ts文件，本质是多个ts同时下载)。项目地址：m3u8_downloader一、m3u8文件内容分析用http://youku.cdn-iqiyi.com/20180523/11112_b1fb9d8b/index...
2020-03-27 17:32:44
6651
原创 js实现全屏切换，以及各种兼容性写法
JS 全屏在各个浏览器中的写法各不相同。标准的、无前缀的请参考MDN FullScreen API。一、FullScreen各种浏览器中的写法W3C 国际标准写法规范webkit Chrome、Safari等浏览器中的前缀写法moz 火狐浏览器中的前缀写法ms IE浏览器中的前缀写法W3Cwebkitmozms打开全屏requestFullScree...
2019-11-05 19:58:02
2397
5
原创 CSS中的单位px、em、rem、vh、vw、vmin、vmax
1、px 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。2、em 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。看下面例子：HTML::<body>body<div class="div1">div1 <div class="div2">div2 &l...
2019-10-18 21:31:21
1265
原创 js xlsx自定义样式导出
使用的技术xlsx 用于解析和编写各种电子表格。比如excel、csv、html文件xlsx-style 为xlsx库添加样式，比如字体颜色，大小，行宽等。但是只支持xlsx、xlsm、xlsb格式FileSaver.js 负责下载保存文件。对各种兼容性比较好，对跨域文件也有处理lodash js常用工具库需要注意的地方一、引入xlsx-style报错This rela...
2019-10-18 21:24:49
12647
原创 html2canvas 踩坑记录 - HTML转图片
html2canvas “Screenshots with JavaScript”，把html转成canvas，也就可以转成图片。比如页面截图、生成活动海报等实用场景。在使用过程有一些坑 ，需要注意一下。在线图片跨域因为canvas中安全机制，加载图片时不允许跨域加载。解决方案配置html2canvas的参数allowTaint或者useCORS设置为true两者都可以设置跨...
2019-07-26 11:03:12
7359
原创 Flutter实战之主题切换
预设主题样式这里只做了主题颜色的改变。也可以修改其他的ThemeDataMap<String, Color> themeColorMap = { 'gray': Colors.grey, 'blue': Colors.blue, 'blueAccent': Colors.blueAccent, 'cyan': Colors.cyan, 'deepPurple':...
2019-07-14 10:35:05
3882
5
原创 Flutter实战之闪屏启动页
在APP启动之前，一般都会SplashPage页面，这页面包含闪屏启动页（启动APP的过渡页面）、引导页（APP简介说明）、广告页（点击在浏览器中打开H5页面、或者直接下载APP文件）。实现思路APP的第一个页面就是闪屏启动页面，然后再处理跳转H5广告页面，还是跳转到首页的逻辑。SplashPage分为四层，默认启动图，引导图，广告图，倒计时跳过 使用status来控制页面显示状态，sta...
2019-07-14 10:33:02
5311
原创 Flutter填坑记录
在Drawer的子页面进行全局数据修改报错flutter doctor[√] Flutter (Channel stable, v1.7.8+hotfix.3, on Microsoft Windows [Version 10.0.17763.503], locale zh-CN)[√] Android toolchain - develop for Android devices (An...
2019-07-14 10:27:25
2001
原创 在web页面实时播放监控视频
背景因为项目需求，需要在web页面播放实时监控视频，而且是同时播放多个视频，还支持切换页面播放。监控是大华和海康 厂家的，并没有做流服务器，还是rtsp的流媒体格式，所以不能用H5的video来播放。方案一后端把rtsp转成web支持的rtmp格式，然后使用video.js(使用方法看文档)来包装处理rtmp流媒体。遇到的坑同时加载多个视频会占用大量内存，而且丢包严重，导致页面...
2019-07-14 10:18:48
45005
14
原创 使用electron-builder打包并自动更新
项目场景一个已用Vue全家桶开发好的后台管理系统。应客户需求，需要限制电脑使用，但是不限制IP，用BS模式无法实现，故用Electron把该项目打包成CS模式的桌面应用。Electron部分，使用electron-builder打包程序，使用electron-updater自动更新程序。使用Vue CLI Plugin Electron Builder和Vue Cli3集成。Vue Cl...
2019-07-14 10:16:33
7707
14
原创 js 图片压缩处理、旋转矫正
最近在处理移动端上传图片遇到一个问题：有时会出现图片翻转的问题，一般是翻转 90 度。后经一翻研究找到了问题所在，特在此记录一下。问题描述经过测试发现：webapp在iPhone手机在竖屏下拍摄图片，上传后会出现图片翻转；横屏不会出现这样的问题。部分Android手机也会出现类似的问题。原生的没有测试过。问题分析在这里必须要知道可交换图像文件格式（英语：Exchangeable ima...
2019-07-14 10:12:23
2155
2
原创 js树形结构操作
Array 转 树状结构实现思路按照pid分组，分组可以大大减少递归次数。。（Array分组的最好方式是用对象接收Array的项，该对象的key值就是分组凭证）按照pid和id的匹配 递归 已分组的数据。代码/** * Array转树形结构的算法 * @params list 代转化数组 * @params parentId 起始节点（默认为'0'） * @param...
2019-07-14 09:57:40
5932
1
原创 vscode写Vue的最佳配置、插件
因为一些特殊原因，导致系统重装，所以vscode的一些配置、插件也就随之丢失了。故，记录一下。插件Beautify 美化 javascript, JSON, CSS, Sass, 以及 HTML 。一般需要配合.jsbeautifyrc使用Eslint 检查代码是否符合规范GitLens Git提示language-stylus stylus语法支持Ma...
2019-07-14 09:55:01
33845
原创 Vue列表滚动的过渡动画
效果图失帧比较严重，在手机上效果更佳。 原理分析这个滚动页面由两个部分布局（底部固定的Tab页面除外）。一个是顶部的banner轮播，一个是下面的列表。这里的重点是做列表的动画，banner轮播的网上资料很多，请自行查找。 这个动画最重要的是在滚动中实时计算startIndex和endIndex，动画比较简单，就是scale和opacity的变化。向下滚动...
2019-07-14 09:53:01
5113
原创 Vue实现购物车抛物线动画
前言抛物线动画应用场景较多，在购物车页面比较常见，那么，怎么来实现这样一个动画？先看一下Demo图。 实现原理及步骤动态计算每一个加号到购物车的距离； // 加号到顶部的距离 let iconTop = this.$refs.banner.$el.clientHeight + this.$refs['goods-' + id][0].offs...
2019-07-14 09:50:47
2771
原创 webApp开发一些兼容性的坑
title: webApp开发一些兼容性的坑date: 2018-03-28 09:01:30tags:- 兼容性- 移动端web开发通过做嗨黔东南APP(IOS，Android)这个项目遇到过很多兼容性的坑，写博客记录备份一下，以免再次踩坑。移动端input处理禁用选择复制带来的问题大多数在禁用选择复制的问题都是通过user-select: none来处理。代码如下： ...
2019-07-14 09:48:04
2060
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人