- 博客(65)
- 收藏
- 关注
RSS订阅原创 dev solution
git clone部分文件夹：https://stackoverflow.com/questions/600079/how-do-i-clone-a-subdirectory-only-of-a-git-repository/52269934#52269934
2022-04-30 15:21:34
371
原创 微信公众号视频录制开发 踩坑汇总
背景微信公众号（PC）实现视频录制，技术栈 react。1. http or https视频录制如果是基于navigator.mediaDevices 这种方式，http协议下只能通过localhost 本地调试获取相关api，部署服务器上后会navigator不再具备mediaDevices的能力（PC同理）。解决方案：换https。2. recorder lib compareMediaStreamRecorder 去开发视频录制，ui较丑，且录制完成后 ios 回调有问题，无法拿到数据。个人
2022-04-09 09:27:39
577
原创 ArrayBuffer合并
var blobs = [new Blob(['Hello ']),new Blob(['World'])];var buffers = [];var buffersFilled = 0;for(var i=0; i < blobs.length; i++) { buffers.push(new Uint8Array()); }for(var i=0; i<blobs.length; i++) { var fileReader = new FileReader();
2022-03-30 15:24:28
1705
原创 react-server-component / swr
react-server-component理想产品good user experiencecheap maintenancefast performancedata fetchwater fallpure data(relay+graphql)// 父组件请求 props传递 or 子组件分别请求<Parent> <ChildA /> <ChildB /></Parent>componentserver..
2020-12-27 21:51:19
265
原创 css-vars-ponyfill 在ie环境下使用问题（nextjs 构建）
function ChildContent({ children }: contentType) { const childNumber: number = Children.count(children) console.log('child', children) const cloneEl = (c: ReactElement) => React.cloneElement(c, { onClick: () => { console.log(888) } })
2020-12-13 17:34:40
946
2
原创 vue 基于abstract 路由模式 实现页面内嵌
abstract 路由模式abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就利用到了abstract这种与浏览器分离的路由模式。路由示例export const routes = [ { path: "/", redirect: "abstra
2020-12-13 17:33:27
5278
原创 基于element-ui el-table 开发虚拟列表(树形列表)
普通列表主要方法：calcList<template> <div id="app"> <!-- :expand-row-keys="currentExpend" --> <!-- <div style="height: 800px"></div>--> <el-form ref="form" :model="form" label-width="80px" :rules="rules"
2020-06-21 21:33:15
8480
3
原创 el-table树形表格表单验证，js树形列表生成序号
寻找树最后一项父节点，及id匹配项var obj = {name: "a1", type: 1, children: [], expend: true}var arr2 = [ {name: "a1", type: 1, children: [], expend: true}, { name: "a1", type: 1, children: [], expend: true }]var arr = [
2020-05-14 22:44:52
2481
2
原创 ⭐Mapbox GL JS学习探索系列（4） - Marker重叠解决方案
简介相比于layer，marker 有着更为灵活的呈现方式，适用于地图上更加复杂的标注显示，而与此同时marker是通过dom渲染，然后叠加在地图图层上的，因此在性能上不及layer。在实际应用场景中，当地图需要大量渲染复杂的结构标注时，layer通常不能完全满足需求，而此时marker就成了替代方案之一，但marker没有layer那么多的配置项去满足marker之间或者marker与地图之...
2019-11-21 13:45:19
2595
3
原创 ⭐Mapbox GL JS学习探索系列（3） - Layer
简介地图上大部分的动态显示效果吗，如图标，区域点，线，面等都是基于layer来实现的，mapbox中的layer主要存在以下几种类型：background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade。其中只有background的显示不依赖source。backgroundmap.loadI...
2019-10-24 15:54:06
1170
5
原创 ⭐Mapbox GL JS学习探索系列（2） - Source
简介在mapbox中对于地图，图层的呈现都依托于相应的数据源去渲染。mapbox 中的数据源一般分为vector, raster, raster-dem, geojson, image, video这六种类型，本文依次对这6中资源类型进行简单介绍。vector 与 raster矢量瓦片与栅格瓦片。关于地图的瓦片加载，在上一篇文章中有介绍，这里简单说一下矢量与栅格的区别。在gis 中 矢量瓦片...
2019-10-13 17:08:00
576
原创 ⭐Mapbox GL JS学习探索系列（1） - Map
摘要本文旨在分享自己在mapbox的学习过程中的使用经验，通过介绍mapbox的一些实际应用与概念，来记录自己的学习路程与经验分享，希望帮助更多对mapbox有兴趣的同学来共同进步。地图预备知识在实际接触mapbox之前，需要对地图有一定的认知，这对于之后在实际开发中会有很大的帮助。瓦片地图：为了达到更快的地图加载效率，地图资源大多以瓦片的形式加载，即在不同的缩放等级下，来去服务器获取所需...
2019-10-06 15:25:24
700
1
原创 自定义mapbox插件 - 地图快照下载（JS）
效果预览mapbox 是一个非常好用的开源地图引擎，他支持得平台有android，ios，js，rn等等，功能多样，但是对于地图插件开发这一块，没找到具体的实施文档。因此本文以js 为例，来把开发mapbox插件这一过程记录下来。mapboxvar map = new mapboxgl.Map({ container: "map", // container id styl...
2019-08-11 20:19:53
3365
1
原创 百度地图自定义marker（图标），layer（覆盖层）
概要本文只要涉及的内容有，web中动态引入百度地图，基于百度地图的本地搜索（公交，地铁，停车场），自定义marker，layer，接入微信内置地图（微信中使用第三方导航）。效果预览地图懒加载本示例应用于小程序内嵌的webview，web开发使用react。由于示例作为项目中的一个不必要模块，不是每次进入都会加载，因此选择在项目确定使用百度地图时，在进行加载。即动态加载百度地图的地图服务资...
2019-06-21 18:21:35
10855
原创 使用canvas绘制圆弧动画
效果预览canvas 绘制基本流程初始画布对于canvas的绘制，首先需要在html内指定一块画布，即****, 可以看做是在PS中新建一个空白文档，之后所有的操作都将呈现在这个文档之上，与PS的区别是，canvas本身没有图层的特性，当需要展示不同维度的视图时，需要交由html的位置关系来解决。canvas标签上，值得一提的就是width和height两个属性，这两个属性代表着画布的...
2019-01-12 16:56:59
1374
原创 基于react的录音及音频曲线绘制的组件开发
简介 最近由于工作需要，需要在react上用到一个录音的功能，录音主要包含开始录音，暂停录音，停止录音，并将频谱通过canvas绘制出来。起初开发时找了一个现成的包，但是这个第三方的包不支持暂停功能，也不支持音频转码，只能输出audio/webm格式，所以自己在周末决定重新写一个关于react录音的插件。使用目前这个包已经上传至npm，需要用的同学可以运行指令npm instal...
2018-08-26 15:18:53
2713
4
原创 从0到1打造一款react-native App(三)Camera
关联文章 从0到1打造一款react-native App(一)环境配置 从0到1打造一款react-native App(二)Navigation+Redux项目地址：https://github.com/jiwenjiang/react-native-nfc拍照（摄像）需求拍照的主要需求是在拍照后，不将照片在系统相册中显示出来，android拍照后会默认存储在DCIM文件夹...
2018-06-18 11:47:13
1104
原创 从0到1打造一款react-native App(二)Navigation+Redux
前言很久没写东西了，发现时间过的真快。之前想学习下RN，但是由于自己的懒惰挖了个坑，最近正好公司开了RN的项目，我也把很久以前挖的坑填一下！新开的这个项目只有我一个人搞，之前没做过RN，这次正好可以边做边学，还是很开心的，享受这种探索的过程。开始！App 环境搭建好之后，就开始开发了。还是先大致介绍下这个小项目，这次主要大致会完成以下几个功能：摄像头相关（二维码扫描，拍照摄...
2018-06-16 19:45:22
1580
原创 Echarts统计拉勾网招聘信息（scrapy 爬取）
前言今天是2018的第一天，首先祝各位小伙伴元旦快乐！ 又到了新的一年，虽然离春节还有一段时间，但是程序狗打工不易啊，不关注薪资怎么行。今天要做的就是用图表统计一下现在各公司的薪资状况（虽然很多公司不能按照招聘上他们给的薪资来给）。数据爬取本次使用scrapy来做数据爬取，这是一个python的框架。因为本人在成都从事web前端，所以这次爬取的关键词既是：成都，web前端。s...
2018-01-01 15:31:53
2398
原创 scrapy 学习之路上的那些坑
前言本文记录自己在学习scrapy当中遇到的各种大小问题，持续更新。环境简介： 语言版本 爬虫框架 IDE 系统 python3.5 scrapy1.4.0 pycharm win10 x64scrapy安装失败报错显示缺少Twisted。 错误分析：Twisted本身是一个网络引擎框架，scrapy的运行依赖于Twisted。 解决办法：通过 http://ww
2017-12-25 16:29:32
5005
原创 electron 将pc端（vue）页面打包为桌面端应用
背景最近在学习RxJS，平时边看文档边顺手就敲一敲那些API，有时候想回顾一些自己写的东西，就要先把项目跑起来，这也难免有些麻烦。于是乎，就想着把自己写的这个小项目打包成桌面端，方面每次打开电脑就能看。经过网上查阅，比较成熟的解决方案很多，比如electron，nw.js等等。最终选定用electron，因为他的星星最多，哈哈。这个练手Rxjs的小项目是用vue跑的，之前没玩过vue，顺手玩一下。打
2017-11-12 17:45:38
25263
22
原创 webpack 单独打包指定JS文件
背景最近接到一个需求，因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改。因此，需要用webpack单独打包指定文件。CommonsChunkPluginmodule.exports = { entry: { app: APP_FILE // 入口文件 }, output: { publi
2017-11-07 21:07:57
11451
原创 tslint pre-commit 配置教程
tslint 配合pre-commit的意义为什么用pre-commit 加 tslint（jshint，eslint原理都类似），因为在项目中我们会经常忘记主动的去做代码检查，虽然结合webpack各种构建工具下，存在*slint报错，项目会跑不起来。但在某些情况下，可能会因为着急，或者其他原因，没有去观察项目运行的情况就仓促提交。团队开发的情景下，可能会成为别人的麻烦。而pre-commit t
2017-10-22 13:38:40
2235
原创 angular4实战（4）ngrx
ngrxngrx是angular的状态管理库，与react-redux相同，都是由redux的基础上延伸出来。本次演示的示例为通过ngrx的状态管理来控制HTTP请求服务的全局loading动画显示。如下： ngrx地址：https://github.com/ngrxngrx主要有四个模块，分别是 ngrx/store， ngrx/effects， ngrx/router-store， ngrx
2017-10-05 16:31:49
2832
3
原创 angular4实战（3） 插件引入及封装
@typesangular4 默认开发语言是typescript，虽然typescript作为js语言的超集，但是项目默认还是不支持直接使用js脚本的。再引入使用js脚本之前，需要事先引入对应的类型声明文件（xx.d.ts），类似于c中的.h头文件。本项目中的提醒插件使用了noty，它本身作为一款JS插件，其内部也是支持了typescript的引入的。 当插件本身已经存在了声明文件时，就可以在
2017-09-27 22:34:58
2591
3
原创 angular4实战（2） router
router单页面应用通过路由来去渲染不同的视图，为用户在同一个页面看到不同的场景，提供基础服务。在上一章节，通过新建项目之后，ngModule会自动引入路由模块，接下来需要做的事情就是对路由模块进行配置。为了方便维护，单独把路由模块的配置拿出来，再去输出到ngModule中。import {NgModule} from '@angular/core';import {Routes, Router
2017-09-24 16:51:28
483
原创 angular4实战（1） angular-cli
angular-cli脚手架大大方便了，项目的开发，使用也非常简单。 https://cli.angular.io/ 提供了搭建一个angular项目的简单介绍。 本文就angular-cli这块的指令属性，在做一些扩展介绍。npm install -g @angular/cling new PROJECT-NAMEcd PROJECT-NAMEng serve通过这四条命令，可以快速创建
2017-09-24 16:02:16
691
原创 react-redux 开发实践与学习分享
redux简介redux是一个js状态管理的库，由flux基础上开发出来，与flux的主要区别是只有一个store，关于store，后文会详述。在各大框架中均可使用，当然各个框架也有自己再度封装的状态管理库，如angular的ngrx，vue的vuex，而本文主要介绍的是react的react-redux。示例介绍本次演示的示例，是一个微信注册页面，主要想通过react-redux实现的功能是，当输
2017-09-23 14:08:49
773
原创 angular4 Flex Layout开发实践
angular flex@angular/flex-layout angular辅助flex布局的插件。 插件地址：https://github.com/angular/flex-layout演示样本div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign=
2017-08-25 20:42:51
8174
原创 自定义微信登录扫码样式解决办法
PC微信扫码登录近期做一个PC端微信扫码登录的需求，微信扫码有两种方式，一种是新开一个二维码页面，另一种是内嵌入产品网页。本次以内嵌二维码为例，具体怎样在页面中显示一个登陆二维码，文档说的很清楚，就不赘述了，文档地址：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1
2017-08-12 10:53:25
15473
13
原创 发布自己的npm包及报错解决办法
初始化NPM运行命令npm init，填写即将发布的module信息。 name：模块名称。 main：模块入口。注册包仓库账号建立好自己要发布的module后，运行npm adduser,依次添加用户名，邮箱，密码等信息。发布完成后，运行npm publish，此时可能会报错403 因为可能用的是淘宝镜像的原因，而淘宝这个镜像没有开放上传的权限，因此会报这样的错误。 解决办法：npm se
2017-07-23 18:05:20
2435
原创 win10更改c盘下的用户名（家庭版/企业版）
切换账户自己的账户默认是没有重命名c盘下用户文件夹的的权限的，因此需要登录Administrator账户，登录Administrator账户这一步，家庭版和企业版是不一样的。家庭版以管理员身份运行命令提示符。输入 net user administrator /active:yes 如图表示已开启管理员身份。企业版右键左下角win,选择计算机管理，点击“本地用户组”-“用户”，在右侧可以看到
2017-07-19 20:34:12
65176
23
原创 http请求过程及性能优化分析
http请求当在浏览器中输入地址至获取服务器的相应，总共经历了以下四个步骤： DNS解析在向浏览器输入一个网站时，如www.qq.com，浏览器最终访问的是一个ip地址，也就是说www.qq.com与一个ip存在映射的关系，此时DNS起到了桥接2种关系的功能，在下次访问相同网址时，会先从本地浏览器寻找DNS的缓存，如果不存在，则一级一级向上找。三次握手 在正式发送请求之前，需要建立客户端与服务器
2017-07-17 09:44:08
9010
原创 使用nodejs自动生成前端项目组件
脚本编写背景写这个小脚本的初衷是，项目本身添加一个组件太繁琐了，比如我想要去建立一个login的组件，那么我需要手动去IDE中，创建index.js(组件出口文件)，login.js(业务文件)，login.html，login.less这四个文件。因为每个组件都有一些输出的代码，还要把之前组件的那几行拷贝过来，这种作业真的烦，于是乎写了一个小脚本去自动完成这些功能。PS:本脚本运行环境是nodeV
2017-07-09 10:22:31
4421
2
原创 前后端演示SHA1，MD5加密登录（带数据库）
SHA1，MD5简介安全哈希算法（Secure Hash Algorithm）主要适用于数字签名标准 （Digital Signature Standard DSS）里面定义的数字签名算法（Digital Signature Algorithm DSA）。对于长度小于2^64位的消息，SHA1会产生一个160位的消息摘要。当接收到消息的时候，这个消息摘要可以用来验证数据的完整性。MD5将整个文件当作
2017-07-02 16:43:13
2062
原创 win10 MongoDB 服务自启动及数据导出
简介MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。他支持的数据结构非常松散，是类似json的bjson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点是他支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。安装及配置下载地址： https://
2017-06-25 15:29:17
725
转载 基于Token的WEB后台认证机制
原文地址：http://www.cnblogs.com/xiekeli/p/5607107.html 基于Token的WEB后台认证机制 几种常用的认证机制HTTP Basic AuthHTTP Basic Auth简单点说明就是每次请求API时都提供用户的userna
2017-06-21 09:48:22
354
原创 node.js 学习笔记
node.jsrequire一个模块是以当前执行文件的所在位置为起始点查找，而fs一个文件在需要写文件的绝对路径。 __dirname 在nodejs中代表当前js执行文件的绝对路径。express在中间件中，use与get等方法的区别为，use可以匹配路径中匹配到第一层路径之后的任意子路径，类似模糊匹配，即app.use('/foo',function (req,rsp) { rsp.s
2017-06-18 13:46:37
329
原创 从0到1打造一款react-native App(一)环境配置
前言最近心血来潮，想要做一个全栈的App玩玩，在网上查阅一下现在的主流的技术栈，考虑的自身能力及开发成本，准备做一个node.js+koa2+react-native的app。目前个人的状态是node.js会一点点点点，koa2不会，react-native也不会（在这几个技术栈里算零基础吧）。但是没事，我就喜欢从什么都不会开始做，这样才好玩，不说废话了。开始！环境配置今天主要做了react-nat
2017-06-11 14:51:12
1544
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人