- 博客(45)
- 资源 (3)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 QGIS 对 GeoJson 文件数据进行压缩
地图开发，友商提供的是边界Shapefile文件，文件比较大，直接在echarts 上显示地图，前端浏览器会很卡，特别是有地图下钻的时候，体验很不好，所以最好压缩下
2023-06-01 14:59:43
924
原创 Vue.extend 实现地图信息弹窗的随意定制
通过Vue.extend，简单实现地图信息弹窗的定制，template里，可以加载第三方组件，实现设计的需求。信息弹窗点击地图打点的时候动态渲染。视频地址点击地图打点的时候请求获取，响应式设置
2022-06-30 16:48:10
516
原创 vue2项目封装百度地图3.0拾取坐标控件
用百度地图3.0 Api封装了一个拾取坐标控件，方便搜索选坐标、地图上拾取坐标。用于需要地图选坐标的业务场景
2022-06-16 12:47:33
510
原创 Vue2项目中对百度地图的封装使用
Vue2项目中使用百度地图。基于百度地图JavaScript API v3.0实现，封装主要是为了方便复用，这里封装了地图的加载、还有简单的地图打点、自定义信息弹窗
2022-06-15 16:33:25
830
原创 Echarts大屏展示，实现响应式比较常用的方式
transform: scale实现响应式页面，一篇搞定数据可视化项目。目前用的比较多和稳的一种方式，记录下
2022-05-20 17:27:19
1866
原创 vue2项目中给echarts地图设置背景图和打点
给地图设置任意背景底图，可以让地图比较炫1、echarts地图背景图设置，可以设置随意的地图纹理2、echarts地图打点，显示数据
2022-05-13 16:42:51
8734
2
原创 vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式，大屏可视化里面，除了数据图表很常用，显示省市地图区域也是很常用到的，这是姐妹篇。区域地图选区域时，需要弹窗展示数据，样式是各种各样的，各种排列的数据、图文混搭、视频…这里除了封装echarts区域地图模块，还介绍了下自定义弹窗的实现、自定义弹窗动态加载接口数据的方式能学到的知识1、echarts地图模块封装，可复用2、echarts地图自定义弹窗（显示自定义样式、自定义数据、自定义图片），其它图表的自定义弹窗可参考。3、echarts地图
2022-03-08 17:34:20
705
1
原创 记一次浏览器SameSite策略更新，导致接口 Failed to load response data 的解决过程
浏览器SameSite策略更新，会导致前端不发送Cookie，造成接口不返回数据，也就是Failed to load response data问题
2022-01-22 12:47:34
4527
原创 video-time-slider，用于IVR视频回播的时间选择插件
video-time-slider，用于IVR视频回播的时间选择插件，为项目微信小程序制作，基于uni-app开发
2022-01-10 17:15:30
2148
原创 EasyPlayer.js修改默认的请求方式实操过程
EasyPlayer请求视频流地址时，默认是HEAD请求方式的，现在服务提供方的视频流地址需要GET或者POST方式才能访问，不然就503 forbidden错误，拒绝访问
2021-12-22 09:12:39
516
原创 create-vue初试，问题小结
create-vue，一个基于vite的全新的vue脚手架工具，始于2021年10月7日，还很嫩，传说未来会替掉Vue-CLI。看文档，用法很简单，就一句命令npm init vue@next但真正用起来，就有几个小问题要注意了。（2021年10月25日）1、npm版本问题命令运行后，选好配置，运行npm install，会发现一堆 npm WARN 信息，其中npm WARN notsup Unsupported engine for vscode-json-languageservice@
2021-10-26 08:11:37
3573
原创 跨平台酷炫动画实现方案推荐（iOS,Android,Web）
跨平台酷炫动画实现方案推荐（iOS,Android,Web）没啥，都是用的别人的轮子。记录下，方便查找使用。需求需要用到这个，是因为当初在做中国电信视频客服 iOS SDK的时候，有些情境要实现比较复杂的动画，例如：送礼物、点赞…。而且，iOS端和Android端的效果要统一。一开始找的SVGA，还挺方便的，集成很简单。后来发现，同类型的还有，这里记录下。SVGASVGA 是YY（欢聚时代）开源的产品SVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVG
2021-09-15 22:48:35
816
原创 Vue高德地图Loca 2.0飞线功能初体验
高德地图原来是没有飞线功能的，很多可视化效果和百度相比确实差很多。在 Loca 2.0 API 里看到了一个PulseLinkLayer的图层连接飞线图层，可以支持弧度，宽度，过渡色等能力。 并且还支持脉冲动画，可以表达数据的朝向。按文档使用了下，发现没效果。发工单问了下，回答说文档有，但是功能是没有的，一周后会实现并上线使用例子？？？？？？？官方例子：北京人口流出弧线代码实现具体是在 [高德开放平台GeoHUB初用（Vue使用高德地图Loca 2.0）](https://liyoro.co
2021-09-15 08:48:39
3149
原创 高德开放平台GeoHUB初用（Vue使用高德地图Loca 2.0）
高德开放平台GeoHUB，高德不声不息出的这玩意挺吊的。以往地图打点、连线、做特定地市的区域地图，都不知道哪里找GeoJSON数据的，现在有这东西就超级方便了。结合高德地图的api，挺好用的了。这里通过Loca.ScatterLayer的来展示下GeoHUB的简单使用。知识1、此文涉及Vue对高德地图2.0的封装使用，这里用 高德地图Loca 2.0 的呼吸点（也叫散射点、贴地点、水波点）的制作过程来演示2、GeoHUB生成的geojosn数据文件使用涉及 vue本地模拟服务器请求mock数据
2021-09-01 22:46:52
4047
原创 Vue视频播放进行+水印的截图
需求视频相关项目，有时候需要对视频进行截图的，图片一般加上水印。这里展示下普通视频播放和直播视频播放的加水印方式。资源测试需要的视频资源用的 阿里视频中心video播放视频一些非直播、不复杂的视频播放需求，直接用这个就好了，特别是一些演示用的项目。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。MP4：MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器WebM：WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
2021-09-01 22:46:04
1677
原创 Vue对高德地图2.0的封装使用
在Vue项目里使用高德地图，网上有几个比较好用的，例如AMap-Vue ，文档很好，但不开源vue-amap ，文档让人流泪懒人和需求不复杂的，可以直接使用上面的。上面两开源的已经不太活跃了，用的不放心。有些地图的高级功能，用起来特麻烦。所以，抛开第三方，封装自己的地图组件。需求组件按需引入。个人喜欢代码干干净净，只要项目需要的功能就行了简单的封装下，方便直接按官方文档使用需要的功能，方便复用基于 Vue2，AMap 2.0，AMapUI 1.1知识点Vue插槽 slot，方便在
2021-08-20 12:29:31
2153
原创 Vue+ Element，记动态生成表格在一个运维项目中的应用
需求运维需要，需要把运维时命令行查询的结果在前端展示，对界面有一些特定的要求，这里分享下一些主要功能的实现。1、要求前端表格界面动态生成，方便后台修改2、列值可排序（时间比较、数值比较…）3、列值可筛选（根据列值类型…）4、表格数据可导出Excel，文件名接口返回（因为模块很多）+当前时间。5、提供关键列搜索功能实现前端界面用element-ui，组件按需引入数据通过本地mock实现，参考vue本地模拟服务器请求mock数据表格界面动态生成表格主要用el-table实现。主要代
2021-08-14 10:15:15
258
原创 vue项目中封装echarts的比较优雅的方式
场景1、Echarts使用时，都需要写一堆的option，如果每个图表都要写一个，一个文件里面的代码量是很大的2、不方便复用需求1、方便复用2、展示类的图表，数据与业务、样式分离，只传数据就行3、项目里需要用到的图表会有多个，实现少代码自动化导入，不需要一个个import4、本人图表用在大屏数据可视化的情况比较多，采用的是等比缩放的方式，所以图表也能根据界面缩放自动缩放，不需要手动调用5、图表可配置代码总览涉及的文件如下（具体参考代码）：|-- src |-- comp
2021-08-12 20:22:38
585
原创 vue本地模拟服务器请求mock数据
原因1、mockjs本地开发的时候用还好，mock数据需要生产时候用就不大行了2、mock的数据通过module.exports、export实现的时候，npm run build 生产打包的时候，这些假数据会打包进app.js文件里面，导致文件大、首屏渲染慢；而且，在js文件里面mock的数据量超过webpack限制的时候，打包会失败3、远程mock数据的就不需要了。像 YApi、网易NEI场景1、做演示项目的时候，数据需要完全本地化实现2、做演示项目的时候，要求数据可供业务人员修改3
2021-08-11 20:22:51
770
原创 vue文件，分离样式模块和业务处理模块
场景1、这只是我的编程习惯，个人喜欢css、js代码独立放一个文件里面2、写复杂界面的时候，界面、样式、业务代码都放.vue文件里面，代码量很大，几千上万行的，难受，割了吧3、基于vue cli3项目方法挺简单的，就是利用下ES6的import和export例如mockDataTest.vue文件，在views目录下新建一个mockDataTest目录，目录里新建index.vue（界面主文件）、index.scss（界面样式代码）、index.js（业务js代码），结构如下：|-- sr
2021-08-10 23:17:48
727
原创 前端调试，本地服务器推荐
需求前端开发的时候，有时候需要服务器部署前端页面、打包后的代码调试。例如：1、开发的小程序用的简单页面，需要微信打开真机查看下效果，这时候本机部署一个本地服务器，然后手机连接电脑的共享网络，就可以访问部署好的页面或资源了。2、开发的项目需要模拟真实服务器交互。Mock数据、加载图片资源、视频资源等3、前端工程化项目，打包后的生产代码，可以本地部署查看下优化效果、webpack设置效果。Vue项目中的路由是否异步加载、js和css是否有压缩、打印和警告是否去除干净了、过大的js文件是否拆分了…4
2021-07-30 13:29:00
342
原创 Mac使用nginx
Mac环境下，一般用Homebrew安装nginx，如果本机已安装，调到步骤二，没有的话，从步骤一开始。一、安装HomebrewHomebrew是mac的包管理器，仅需执行相应的命令,就能下载安装需要的软件包，很方便。命令终端输入以下命令安装brew/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"或者用中科大的镜像安装/usr/bin/ruby -e "
2021-07-30 13:23:54
664
原创 Mac自带Apache使用
苹果系统本身默认就安装了一个Aapche服务器。Apache常用命令sudo apachectl start #开启sudo apachectl stop #关闭sudo apachectl restart #重启默认网站目录默认的Apache的文件的根目录在/Library/WebServer/Documents部署服务器启动后，直接把文件放到/Library/WebServer/Documents目录下面，就可以访问了。例如：使用如何快速开发一个响应式移动端页面里面的代码，
2021-07-30 13:15:37
204
原创 如何快速开发一个响应式移动端页面
适用领域1、非工程化项目（不需要webpack之类的打包）2、html+css页面数少的项目（例如：app下载页面、抽奖活动页面）3、其实pc端页面也适用的，但用的少（例如：大屏数据可视化页面）方法主要是用淘宝的flexible.js配合蓝湖的原型设计图，达到快速开发的目的。flexible可以根据不同的页面width给网页中html跟节点设置不同的font-size，配合rem可实现响应式页面。flexible默认是750px的设计页面，基准值是7.5rem。这个基准值很关键，设计稿所有
2021-07-29 23:05:48
495
1
原创 微信小程序真机无法发送网络请求or网络错误解决方法
问题公司一项目用的好好的，因安全升级切换域名。1、代码和微信公众平台上的域名都修改好了，微信开发者工具中访问https的api接口正常；2、微信开发者工具无论是否打开了【不校验合法域名、web-view以及HTTPS证书】这个设置，都可以正常运行。3、在尝试真机调试的时候，发现前端请求发不出去了。无论是否打开了【不校验合法域名、web-view以及HTTPS证书】这个设置，都不行。问了一圈，后台接口只是替换了域名，网页上是可以正常请求的；运维也说是按以前正常使用那样配置的…原因排查感觉就不
2021-06-24 17:22:49
7486
2
原创 input去除自动填充后样式
input去除自动填充后样式常见于登录页面，浏览器设置了记住密码后，input会自动填充内容，造成填充内容后的input会变色，色值不定，反正就是不好看。原因input自动填充的样式是用Shadow-dom的方式实现的，游离于DOM 树之外的节点树，不好通过css直接修改。要开启谷歌浏览器的Show user agent shadow DOM设置才能看到对应的css。解决方法1、关闭自动填充表单功能此方式对直接用form和input写的页面有效，对一些封装的第三方UI不大友好，例如eleme
2021-05-25 17:14:16
1231
1
原创 Vue报错：You are using the runtime-only build of Vue where the template compiler is not available
Vue报错：You are using the runtime-only build of Vue where the template compiler is not available环境 "vue": "^2.6.10" "@vue/cli-service": "^3.11.0"问题背景高德地图自定义打点，marker的click弹窗，弹窗里有交互，有调用到methods里面的vue方法，需要动态渲染，用到了Vue.extend，代码报错在此处。报错vue.runtime.esm.js
2021-05-22 16:24:15
530
原创 Vue history模式下子页面刷新404问题
Vue history模式下，开发运行的时候刷新页面没问题，但是部署在公司服务器的时候，子页面刷新会有404问题。在Mac自带Apache下尝试了下，确实会出现，解决的过程如下：(没在别的服务器部署过，不过也是给对应服务器加下配置就可以解决了)Mac自带Apache基本操作查看apache版本sudo apachectl -v启动apachesudo apachectl start重启apachesudo apachectl restart备份原来的文件sudo cp /
2020-06-09 22:32:11
629
原创 Vue自定义均衡器样式柱图
特殊定制均衡器样式柱图，为了展示。别问为什么这样设计！实现它就对了~~~看到这个奇怪的展示柱图的时候，呵呵~~~先上效果图原理是通过flex布局使小横杆垂直叠加，一个做背景，一个做活动项。2个不同颜色的重合，就可以形成以上的效果。使用说明js里引入组件import equalizerbar from '@/components/equalizerbar'components里面声明下components: { 'equalizer-bar': equalizerbar}v
2020-06-01 21:45:08
355
原创 Vue自定义svg百分比圆环组件
不熟悉svg，看文档做的这个东西。菜鸟教程先上效果图使用说明js里引入组件import svgcircle from '@/components/svgcircle'components里面声明下components: { 'svgcircle': svgcircle,}vue文件里面使用<svgcircle rate="0.6" :size="svgcircleSize" :text="svgcircleText" :textS
2020-06-01 00:38:08
1271
原创 前端大屏展示框架搭建（四）
和rem类似。通过一个px转vw、vh的换算方法，实现动态响应式大屏页面。有点类似iOS的autoLayout了。换算方法$ui-width: 1920; //设计图的基准宽$ui-height: 1092; //设计图的基准高@function vw($px) { @return $px / $ui-width * 100vw;}@function vh($px) { @return $px / $ui-height * 100vh;}使用.app-head { he
2020-05-21 22:25:59
1032
原创 前端大屏展示框架搭建（三）
大屏全屏页面等比例缩放的实现等比缩放页面，是大屏开发里比较常用的方式了。一般设计图按大屏的尺寸设计，按尺寸开发，最后等比缩放。大屏等比缩放，我这里在layout.vue里面做控制。layout.vue主要是在 app-wrapper 所在div进行scale。<template> <div> <div class="app-wrapper" :style="{ transformOrigin: 'center t
2020-05-13 22:12:14
4171
2
原创 前端大屏展示框架搭建（二）
大屏基本布局实现基于element-ui进行布局。安装安装运行依赖element-ui安装开发依赖babel-plugin-component安装插件vue-cli-plugin-element布局项目的整体布局是共用的，通过在vue的路由里配置component为Layout复用，这个vue的官方文档有介绍。如上图所示：1、建立一个layout文件夹存放项目的共用布局2、工作需要，现需要一个上下两栏的布局，上面是工具栏3、下面是内容展示栏，工具栏内点击切换的页面，路由
2020-05-13 22:09:33
4437
原创 前端大屏展示框架搭建（一）
基于VS Code的代码风格统一配置项目开发很常用到，记录下搭建的过程。基于vue-cli3新建一个项目过程已经写过了~~~参考这里vue-cli3新建项目基于VS Code的代码风格统一配置VS Code先安装这几个插件Vetur、ESLint、Prettier-Code formatterBeautify也挺好用的，不过和Prettier有冲突，放弃了~~配置settings.json这个可以全局配置，但是为了不影响导入项目时别人的设置，可以在当前项目的根路径里创建一个.vscod
2020-05-13 22:07:08
6405
原创 Coding.net+Hexo搭建个人博客
Hexo博客的搭建详情见 Hexo搭建个人博客Coding.net 是一个面向开发者的云端开发平台，提供 Git/SVN 代码托管、任务管理、在线 WebIDE、Cloud Studio、开发协作、文件管理、Wiki 管理、提供个人服务(免费)及企业服务。因为喜欢Git，存代码很常用到。开始的时候，这里只是存放代码的地方，后来 Coding.net 提供了静态网站托管服务，对广大想拥有自己...
2020-04-19 19:53:20
615
8
原创 Hexo搭建个人博客
互联网的很多东西，使用的最好方式，都是看文档。Hexo中文官网我用的是Mac电脑，简单记录下步骤1、全局安装HexoHexo的脚手架，本地运行博客，安装主题、插件等都靠它了，运行以下命令npm install -g hexo-cli2、开始建站选定存放代码的文件夹，运行以下命令，生成一个名为testBlog的文件夹，里面就是博客的代码，具体的配置、主题更换等，可以参考官网说明...
2020-04-19 19:48:16
155
原创 Vue-CLI-3.0图形化界面初试
环境系统版本 macOS Mojave 10.14安装Node根据官方文档推荐，选择了8.x版本的NodeNode 版本 v8.15.1npm 版本 v6.4.1node 8.x下载地址安装Vue-Clinpm install -g @vue/cli# ORyarn global add @vue/cli检查vue版本是否正确 (3.x)vue --version图形...
2020-04-11 00:46:05
855
原创 PageSpeed网页性能评估优化工具
PageSpeed网页性能评估优化工具用处PageSpeed是Google提供的网页性能工具。它可以帮你测试网页在pc端和移动端上有什么性能问题，帮助开发人员进行性能优化。通过它可以发现平时应该注意许多性能方面的细节。安装打开Chrome网上应用店 -> PageSpeed Insights(with PNaCI) -> 添加至Chrome使用（1）直接在Chrome的De...
2020-04-11 00:41:21
373
原创 Lighthouse网页性能评估工具
Lighthouse网页性能评估工具用处Lighthouse用于分析web应用程序和web页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提高用户体验。安装打开Chrome网上应用店 -> Lighthouse -> 添加至Chrome使用直接在需要测试的页面上点击Lighthouse扩展工具运行后，等待…然后会自...
2020-04-11 00:33:20
387
原创 CocoaPods在xcode5.1报各种错误解决方法
Xcode升级到5.1了，apple默认让所有app都通过64位编译器编译，所以会报各种错误信息，关闭64位编译就好了。通过下面的方式可以关闭（此方法来自@糖炒小虾_txx）： 选中Targets—>Build Settings—>Architectures。双击Architectures，选择other，删除$(ARCH_STANDARD)(点’-’)，然后增加armv7和armv7s(点‘
2014-03-12 09:05:31
1181
TA创建的收藏夹 TA关注的收藏夹
TA关注的人