自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

狂奔的蜗牛的博客

一个前端菜鸟

  • 博客(32)
  • 收藏
  • 关注

原创 给大家推荐一款前端工程化脚手架工具 - mini-core-cli

前端工程化脚手架工具 - mini-core-cli

2022-07-10 23:07:39 381 1

原创 nodejs下文件路径分割符转换

nodejs下文件路径分割符转换

2022-04-19 16:37:39 1652

原创 推荐一个用了就回不去的微信小程序+TypeScript框架 - mini-core

TypeScript助力下的微信小程序开发,可以好用到什么样子?

2022-04-14 14:14:20 4974 4

原创 根据输入的表达式从JS/JSON中获取值

接口地址和解析表达式都是通过输入框输入的,如何正确解析表达式从json数据中得到值呢?

2022-04-07 23:22:38 457

原创 你还在为创建页面wxml、wxss、json、js和组件wxml、wxss、json、js四个类型文件而烦恼吗?

苦”创建wxml、wxss、json、js创建过程“久矣!

2021-12-27 17:39:30 680 2

原创 干掉微信小程序的繁琐取值和赋值方式,提高开发效率

微信小程序提供获取data数据的方式和修改数据的方式分别为this.data.x和this.setData({}),无论是获取数据或者修改数据都显得较为繁琐,且如果x为一个对象或者数据,只修改其值页面不会自动刷新,需要调用this.setData({x: new x})更改数据,刷新界面。所以开发了reactive这个比较小的库来进行数据的响应式处理,使访问和修改值的开发效率更高(同时修改多个属性值建议使用this.setData()方法)

2021-12-26 15:19:08 10198

原创 SpringBoot 中application.yml的配置

profile我们在开发Spring Boot应用时,通常同一套程序会被安装到不同环境,比如:开发、测试、生产等。其中数据库地址、服务器端口等等配置都不同,如果每次打包时,都要修改配置文件,那么非常麻烦。profile功能就是来进行动态配置切换的。1) profile配置方式 多profile文件方式 yml多文档方式 2) profile激活方式 配置文件 虚拟机参数 命令行参数 使用方式1) profile是用来完成不同环境下,配置动态...

2021-03-21 08:51:52 772

原创 项目下多个application.yml的加载顺序

Springboot程序启动时,会从以下位置加载配置文件:file:./config/:当前项目下的/config目录下 file:./ :当前项目的根目录 classpath:/config/:classpath的/config目录 classpath:/ :classpath的根目录加载顺序为上文的排列顺序,高优先级配置的属性会生效...

2021-03-21 08:51:21 1009

原创 读取application.yml中定义属性值的三种方式

name: zhangsanperson: name: lisi age: 12address: - beijing - shanghaimsg1: 'hello \n world' # \n会被原样输出,不会转义msg2: "hello \n world" # \n 会被转义方式一@Value("${name}")private String name;@Value("${person.name}")private String personName;..

2021-03-21 08:50:23 1226

原创 vue3 新增特性

defineComponent:导出组件为:export default defineComponent({ name: 'test'}); teleport特性:具体,如app组件中包含dialog组件,通常定义的组件会包含在app组件内部,通过teleport可以将dialog组件内元素挂在到指定位置。Suspense:Suspense为内置组件,主要用户处理组件内部为异步操作加载过程中的显示问题,如处于加载中显示加载动画,加载完成后显示组件。注意:需要在setup方

2021-03-20 09:38:05 716

原创 nodejs - pm2

pm2 list 查看应用列表 pm2 restart 名字 | id 重启某个应用 pm2 stop 名字 | id 停止某个应用 pm2 delete 名字 | id 删除某个应用 pm2 info 名字 | id 查看某个应用信息 pm2 log 名字 | id 查看某个应用日志信息 pm2 monit 名字 | id 监控某个应用...

2021-03-20 09:34:32 105

原创 Input[type=file]选择图片后快速预览的方式

URL.createObjectURL()一个静态方法,创建一个 DOMString,返回一个 URL,URL 和 document 绑定,表示指定的 File 对象 文档地址:https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURLFileReader.readAsDataURL()一个 FileReader 上面的实例方法,读取指定的 File 对象,读取完成的时候触发回调,返回 URL 格式 的字符串(b.

2021-03-20 09:32:28 429

原创 鼠标移入与移出元素事件区别

onmouseenter: 只会在进入绑定事件元素时触发一次,进入绑定事件元素子元素时不会触发 onmouseover:进入绑定事件元素或者子元素或者离开子元素进入绑定事件元素都会触发onmouseleave:只会在离开绑定事件元素时触发一次,离开绑定元素子元素不会触发 onmouseout:离开绑定事件元素时或者离开绑定事件元素子元素时触发总结:onmouseenter和onmouseleave只对绑定元素生效,而onmouseover和onmouseout会对绑定事件元素和子元素..

2021-03-20 09:26:12 146

原创 js四大作用域

全局作用域:如js文件中直接定义var a = 3; b = 4, 其中a、b都可以在全局作用域内访问,但是a为全局变量,b为全局作用域对象的属性,如window.b,属性可以删除,变量不可以删除。 如 delete a 则会返回false,delete b则会返回true函数作用域如function test() { var a = 3;}块状作用域if (true) { var a = 4;}注:使用var申明的变量不存在块状作用域,va.

2021-03-20 09:22:41 795

原创 var、let、const的区别

var 申明的变量不存在块状作用域 存在作用域提升 可以重复定义 变量可以先使用后申明let 申明的变量存在块状作用域 不存在作用域提升 不可重复定义 变量必须先定义再使用const 申明的变量存在块状作用域 不存在作用域提升 不可重复定义 变量必须先定义再使用 变量必须申明就赋值,不可以先声明后赋值 变量不可以重新赋值、但是引用类型可以修改里面的属性和值...

2021-03-20 09:15:49 55

原创 window.onload和DOMContentLoaded的区别

1、当onload事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了。2、当DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash。

2021-03-20 09:12:48 186

原创 js下数组不同的遍历方式及区别

es2015遍历方法for循环:支持break和continueforEach:接收一个回调函数,回调函数第一个形参为元素值,第二个为下标,不支持break和continue。every:接收一个回调函数,回调函数的返回值决定是否继续遍历,返回true继续遍历,false终止遍历,达到类似break和continue效果for in:可以用来遍历数组和对象,遍历数组时得到的为数组下标,遍历对象时得到对象属性。不建议使用for in遍历数组,会有如下问题...

2021-03-20 09:10:28 143

原创 es9 dotAll 、命名分组捕获、后行断言

// dotAllconst test = "hello\nworld";// 非dotAll模式,无法正确匹配console.log(/hello.world/.test(test));// dotAll模式, 可以正确匹配console.log(/hello.world/s.test(test));const test1 = '2020-12-05';// 分组分组捕获console.log(test1.match(/(?<year>\d{4})-(?<month&.

2021-03-20 09:08:26 102

原创 优雅的自定义遍历一个对象,得到期望的遍历结果

const author = { allAuthor: { test1: [1, 2, 3, 4], test2: [5, 6, 7, 8, 9] }}// author[Symbol.iterator] = function () {// const allAuthor = this.allAuthor;// const keys = Reflect.ownKeys(allAuthor);// let values = [];// return {/.

2021-03-20 09:06:00 126

原创 TypeScript开发提效之 - 不手写interface定义

作为前端开发者经常在开发过程中通过请求接口拿到json数据进行使用,但是由于javascript的弱类型语言特性,使编辑器无法感知进行对应的语法提示,所以在开发的时候往往需要一个工具格式化json,格式化后之后进行对应的业务逻辑编写或者声明与json结果匹配的interface定义,让编辑器能智能提示,但是如果在TypeScript中需要指定类型,针对这种后端返回的结果如果不手动定义interface则需要申明为any类型,显然不是我们使用TypeScript的初衷。但是写interface类型定义是一个没

2021-01-10 12:59:19 654 1

原创 Node.js中经典算法(给定一个路径和目录,返回在这个路径下所有可能存在当前目录的路径组合算法,摘自Node模块算法)

给定一个路径和目录,返回在这个路径下所有可能存在当前目录的路径组合算法,摘自Node模块算法一、声明一个保存node_modules逆序字符串(seludom_edon)的ASCII编码数组// seludom_edon对应的编码const nmChars = [ 115, 101, 108, 117, 100, 111, 109, 95, 101, 100, 111, 110 ];二、算法Module._nodeModulePaths = function(from) { //

2021-01-10 12:17:13 468

原创 Node.js中使用ES Module的两种方式

方式一​使用webpack对源码进行构建,使用babel对js进行处理使其适应于低版本node依赖:一、package.json"devDependencies": { "@babel/core": "^7.12.10", "@babel/plugin-transform-runtime": "^7.12.10", "@babel/preset-env": "^7.12.11", "@babel/runtime-corejs3

2021-01-10 12:12:32 8047

原创 微信小程序抽奖组件

微信小程序抽奖组件采用微信组件的方式提供,因组件内部使用了async/await,所以请在微信开发者工具"详情=》本地设置 勾上 增强编译和使用npm",小程序npm使用方法请参考:微信小程序-npm支持先看效果图:使用步骤: 步骤一: 安装依赖或前往githua下载源码,拷贝dist目录下的lottery-turntable目录 npm i lottery-turntable-for-wx-miniprogram 步骤二: 页面JSON配置 { "u

2021-01-08 15:19:25 8184 21

原创 vue单页应用页面缓存方案----纯干货

    公司项目是用vue进行开发,在开发过程中,我们发现一个极差的体验。场景是这样的,我们的产品首页是一个列表,当用户滚动到距离顶部一定的距离,然后点击列表项进入详情再返回的时候列表数据重新加载,且滚动到了顶部,这简直是一个不能忍受的事情。于是准备对我们的项目体验进行优化,从最开始了解的keep-alive着手,用keep-alive包裹router-view这样的结果可以对页面进行内存缓存,结...

2018-04-19 14:48:24 12260 3

原创 手把手教你如何用Vue实现拖动右侧导航选择联系人--V-UI之QuickIndex

先上图是不是有种浓浓的原生联系人应用的赶脚,下面我们来看看如何实现》先看看如何使用let data = ["河北省石家庄市", "河北省唐山市", "山西省太原市", "内蒙包头市", "辽宁省大连市", "辽宁省鞍山市", "辽宁省抚顺市", "吉林省吉林市", &qu

2018-04-10 10:45:49 2444 10

原创 Vue脚手架工程优化之源码和图片压缩--webpack配置

    在前端做加载速度优化的方案中,有一个是对源码和图片大小进行压缩。顾名思义就是将源码去掉空格、注释、换行等生产环境中的无用信息。图片在不影响效果的前提下进行压缩。从而减小图片大小,页面在加载的时候由于加载的资源较小,实现更快加载。公司的项目是通过Vue的脚手架工具搭建的。所以用到了webpack打包工具,在我未进行优化的情况下,发布的源码包大小为13.6m,进过处理之后,源码大小从原先的13...

2018-04-10 09:27:13 4203 1

原创 javascript实现根据汉字获取拼音或者获取拼音首字母

    一直不明白输入汉字获取拼音是怎么做到的,空闲之余在网上查了网上有很多这样的在线工具,但是毕竟是在线的,如果用在实际项目中这个不太实际,如联系人选择列表这样的需求。于是通过浏览器的调试工具查看了一下在线工具的实现,加上自己的理解做了一个封装,以下是js部分,话不多少直接上代码。js部分var PinYin = { "a": "\u554a\u963f\u9515", "ai": "\...

2018-04-09 16:35:03 17049 2

原创 移动webUI框架v-ui之Pull2Refresh

        基于vuejs开发v-ui的由来为个人最开始打算将h5项目中用到的控件封装成类似于原生android和ios控件库的样子,下次用的时候直接拿来用而不是重新实现一套。现在移动端ui框架有很多,风格各异且基本上都有一个问题没有做解决,比如alert弹出的时候没有处理用户点击返回的逻辑,经常性的情况是用户点击返回时整个页面返回。这是一个及其糟糕的用户体验,所以自定义了一套用于后期项目中。...

2018-04-08 12:50:41 560

原创 移动web ui框架----v-ui

v-ui是一套根据vuejs设计开发的开源框架,其中包含了h5开发中用到的大量ui控件,如AppBar,Tablayout,SearchBar,Toast,SnackBar,Alert,Comfirm,Prompt询问对话框,Progressbar,ActionSheet,TimePicker,DatePicker,AreaPicker,Switch,Pull2Refresh等43...

2018-03-27 16:06:08 2162

原创 使用Crosswalk遇到的坑,input type=file 默认点击无反应解决办法

公司的移动端使用的是web,通过Crosswalk替代webview进行加载访问,以提高效率。最近公司进入第三方客服系统,分别针对pc端和手机端有不同的页面。其中在手机页面上有发送表情和图片功能,表情功能正常,选择图片在微信中正常,app中出现点击无反应。最开始通过网络查找资料,发现关于Crosswalk的资料非常少。无奈之下只能翻看源码。发现有XWalkUIClient类中有和webview中的

2017-10-18 12:27:44 2228 1

原创 高仿猪八戒网右侧功能区

直接上图github地址:https://github.com/thunderobot/tpw

2017-09-26 13:09:27 408

原创 移动前端使用微信js-sdk调用wx.chooseImage()时ios无法回调success方法问题所在

最近在依托于微信开发公司的项目,其中使用到了微信提供的js-sdk的以下接口:图像接口拍照或从手机相册中选图接口wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'ca

2016-12-12 10:33:04 31251 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除