kirinlau的专栏

wangEditor是前端一个比较流行的简洁易用，功能强大的前端富文本编辑器，支持 JS Vue React，提供了很多丰富的功能，下面手把手教你实现wangWditor富文本插件在vue项目中配置，保存、图片上传等功能。无脑ctrl+c即可

要使用FontFaceObserver来加载设置项目本地的字体，先确保字体文件位于项目中或者可以从服务端获取到，这样就可以使用FontFaceObserver来检测并加载这些字体下面写个伪代码的示例：首先引入字体资源，css配置字体。

项目需要在不同环境下运行，如开发，测试，生产等，但是每个环境下请求的服务地址不是确定的， 为了避免频繁切换请求的地址以及相关的配置容易出错的问题，新的vue-cli脚手架没有直接提供配置选项，怎么办呢？属性了，因为它变成了一个全局的变量，可以在任何地方使用，它会根据环境自动去赋值baseURL了。分别为.env.development，.env.test，.env.production。就像下面这种，就是.env文件只需要声明环境，不需要配置。首先我们在根目录新建3个文件，一、建立.env系列文件。

基于浏览器历史栈判断是否可以“前进”和“后退”

近期我接过了之前部门内部的一个开源包的的运维工作，业余时间解决一下开发者提的问题，所以又熟悉了一遍npm包的发布流程，大致如下：去npm官网注册一个账号package的制作：1.创建项目目录2.打开命令行窗口在新建的项目目录下执行npm init 命令后， 按照要求填写package相关信息npm login遇到如下报错的话npm ERR! network request to http://registry.cnpmjs.org/-/v1/login failed, reason

有个需求是重构小程序的某些页面，比如以下这种列表，之前都是支持copy的，导致代码比较臃肿，占用有限的空间且不好维护我把组件库写好后，准备直接使用时发现有用到分享和反馈这种小程序原生button才有的属性即：open-type='feedback'open-type='share'本来准备直接复用以前的来着，但是看代码很乱，就想着把它的功能在组件中直接实现好了，开始想着把已有的逻辑贴进去再加个if的属性就可以，臃肿得很， 最终理性战胜了我，试试其他实现方式，以下是我的ui组件库效果：试着点了

接上个博客的，文本跑马灯的animate实现上个版本是根据setinterval定时器修改位置实现动画效果，体验还行，但是太耗资源，如果想体验流畅那么频率就很小，步长也不能太长，但是会很慢，由于频率高，一秒钟执行三四十次，太耗费资源，于是我这边就使用小程序的animate做了另一种实现主要思路：根据文本的长度设定过渡时间，动画结束后再次滚动即可，直接看代码wxml<view class='marquee_container'> <view id="marquee_wrap" c

好久没来了。架构组本身已经挺多事了，手头上还有个picker的组件没做完善，但是隔壁运营活动组几十个前端忙不过来，产品和场景一口气出了十来个项目，基本都是拉新、节日、社交、小游戏、签到等互动类的活动， 应公司建设需要，领导亲自跟我说不当紧的事可以放一放，去帮同事一把，他跟上面说好了，于是乎我就到了运营活动的小程序组了（运营活动这边分了小程序端和HTML5端），说实话小程序上手虽然快，但是很久没用了，小程序端的那个妹子人也好，让我看几个页面，几个组件，都是比较小的那种，以上为背景有一个连续滚动的的跑马灯组

在vue中，父组件中使用子组件方法的和传递过来的参数时直接只用参数就可以了，如下：// childthis.$emit('change', param)// parent@change='parentHandle(param)'如果我们在使用子组件方法的同时，还想使用自定义参数呢，使用场景比如，在父组件中遍历子组件，想使用每个组件的索引， 这时候就需要修改一下写法：// childthis.$emit('change', param)// parent@change='parentHan

插槽是vue项目中常见的应用，也是一项对项目组件比较友好的技术，一直想写一篇关于插槽的理解文章，但是碍于比较忙，今天恰好也遇到了，趁着晚上有时间来更一下：关于vue的三种插槽：1、匿名插槽2、具名插槽3、作用域插槽前两种用的比较多，我就简单地说一下：匿名插槽在子组件中给定位置后，在父组件就是直接在写在子组件标签中，它会自动占用子组件给定的位置，一般用于只有一个比较大的自定义的区域。像：<slot name="label"> <span v-if="label" cl

css样式中的position到底有几种属性值？常用的就三种relative，absolute，fixed，但是作为一名专业的人员别人问你position有那些属性值，只说三种是不行的，应该把他所有存在的属性值都列出来，有以下7种：属性值属性值使用描述static默认值,元素出现在文档流正常的地方absolute绝对定位当前元素，相对于第一个非static定位以外的第一个父元素进行定位，以left，right，top，bottom进行定位relative相对定位当前元

1. 原因js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。　　刷新页面，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。具体选择哪一个就根据你实际需求来选择。　　二、...

在移动端的web开发中，由于设备的局限性，上拉滚动加载可以带来更好的用户体验，一个列表或者waterfall的lasyload都是基于上拉判断距离后触发事件进行请求加载数据，如何在Vue项目中实现这个功能呢，我们使用了一款vue direvtive指令性的插件vue-infinite-scroll。detail link：https://github.com/ElemeFE/vue-infini...

关于小程序中的target与currentTarget的区别，看了官方的文档说的也是糊糊涂涂但是感觉跟事件冒泡有关系，自己写了一串代码看一为下二者的区别，如下：wxml:<view bindtap='clickEvent' data-id="A">A <view data-id="B">B</view> <view>C</view...

实现思路为当服务端响应的结果告诉你验证码已经发出去了，做一个60秒的倒计时，禁止操作即可，60秒倒计时完毕后clear掉定时器即可。简单粗暴，直接code：var time = 60var timer = setInterval(function(){ if(time<1){ clearInterval(timer) $(".js-bindcard .code-btn")....

为了避免在小程序开发中使用大量重复且臃肿的代码，一般来说，开发者都会封装一个请求以便于直接调用，这里封装了一个简单简单的请求：let maxLen = 6, // 批量删除图片的最大值responseArr = []; // 存批量删除图片的响应数据// 请求类封装class _nb { constructor () { this.baseURL = "https://l...

小程序中的textarea一直是个坑，使用的是原生的textarea组件，其优先级，官方也没有给出明确的解决方案或者替代品，而且原生组件在开发时有一定的限制。具体可参考：https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html我在小程序开发中，产品是在屏幕底栏有一个fix定位的操作栏，其中...

微信小程序中我们可以使用wx.getLocation来获取当前的地理位置，但是某一处地址是原生没有提供的，比如用户输入的地址需要导航过去的，。首先我们需要引入腾讯地图在微信小程序js SDK “qqmap-wx-jssdk.js” 文件可以下载引用，也可以使用npm安装具体请参照这里：https://lbs.qq.com/qqmap_wx_jssdk/index.html地址解析（根据地...

项目中有遇到点击按钮出dialog，里面有申请的form表单，需要在其中的select下拉框带出当前点击的内容，类似于以下：本以为一个很简单的东西，但是折腾了半天，网上查了一下，找到以下方法：$("#selectShipperCode").find("option[text="+domtext+"]").attr("selected",true);事实证明没什么用，点了无效，自己摸索了半...

外部的css样式为：#imageArea{ width: 200px; height: 300px; background-color: #eee !important;}通过 以下代码来修改其背景色是无效的$("#imageArea").css("background-color", "#444444")$("#imageArea").css("backgro...

项目demo中有遇到页面需要开场视频动画，需要点击才能进入主页，不考虑兼容性，自然想起的事html5的video标签可以播放视频，于是使用以下方法：&amp;amp;amp;amp;amp;lt;video width=&amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;quot; autoplay=&amp;a

项目中要把生成.txt文本文件,网上查了一下，貌似由于浏览器差异有的不能直接对记事本进行操作，我这里试了一下都是okay的。直接贴上：function fakeClick(obj) { var ev = document.createEvent(&quot;MouseEvents&quot;); ev.initMouseEvent(&quot;click&quot;, true, false, window, 0, 0,...

el-table默认选中项核心伪代码如下：this.$refs.multipleTable.toggleRowSelection(this.tableData[index],true); //row 选中外面套两层for循环，if判断想要选中的某项值和tableData中某对象的某个值相等即可...

在项目中遇到对话框关闭或者取消后，再次打开验证错误或者表单内容依然存在的效果，如下：这种用户体验显然不好，那么如何解决这种问题呢？第一种方法简单粗暴，就是在dialog对话框添加v-if，下次打开对话框重新渲染即可。第二种方法就是在 dialog取消按钮或者在对话框关闭的 ‘before-colse’事件中添加：this.$refs[formData].resetFields();f...

项目中遇到这个问题，。之前貌似没有注意到，一下子也没想到办法这显然不行，解决方法：，两个div都设置为display: inline-block; 右边的div设置以下即可 style="vertical-align: top;"okay...

工作中项目使用的是前端的Vue框架，请求用的是自己封装好的axios，api请求均已封装成方法，在页面中使用时直接import 然后写在自己的自定义触发方法中即可。 然而遇到一个棘手的问题就是有一个超级大的表单无论怎么调都是错误，服务端不能接受到参数，然后试着换成原生的页面请求后，服务端可以收到请求和参数，但是没有设置请求头token以至于服务端不认数据，所以在main.js中设置了axios的一...

项目中又遇到一个小问题，测试完了都没发现~~ （醉）就是在账户添加时有两项超长的select下拉框的option列表是从服务端获取的，修改时的策略是直接请求数据构造成两个option赋值给两个select，然后给select设置value选中即可，而且这两项select为不可修改项（置灰项）。没毛病…一只是okay的，直到有个测试er说一次返回这么多东西，请求响应有延迟，建议把下拉改为可搜索的...

小程序迭代时，需要加入一个图片裁剪上传并识别的功能，在PC端调好之后，在移动端不能走通，报了一个奇怪的错误，大概是“wxfile://***”, 翻译过来的意思就是 wx.downloadFile不支持此协议，看了一下发现wx.chooseImage在pc端获取到的地址是http地址，而在移动端是wxfile开头的本地地址，wx.downloadFile只能下载https的资源。而我在开发时...

小程序中经常会有批量遍历渲染的列表，如果列表中有图片选项但是无值时或者有值但是图片加载错误时如何处理呢比如像以下这种评论列表： <view class='lists-box rel'> <view class='list-box rel' wx:for="{{commentList}}" wx:if="{{item.comment}}" wx:key="{{...

Flex强大好用的css3新特性，其带来的便利不用多言，项目中好多卡片式设计都是topbar中item都是居左对齐，最后一项向右边对齐诸如“”“日期”，“删除”， 分享等，开始想着直接百分比定位，后来改成space-between，调整中间项…最后在stackoverflow上看到一种们那个方法在主轴将justify-content属性设置为flex-start后…将靠右项左外边距设置为auto...

微信小程序开发中 官方提供了常用组件，但是却没有tab这个组件，当然有可能是官方并不提倡在一个页面加入过多繁杂臃肿的东西，有点尴尬~只好自己动手撸一个。直接进入代码wxml：<view class='bg-blue'> <view class="flex-box-list"> <view class="list " wx:for="{{tab...

小程序html<scroll-view scroll-y="true" bindscrolltolower="ScrollLower"> <view wx:for="{{deviceList}}"></view> <view class="loading" hidden="{{!searchLoading}}">正在载入更多...&lt...

对于滑动删除微信没有提供完整的组件，所以我写了一个小Demo, 希望可以帮助到大家先给大家看看效果：滑动删除所用到了微信提供的方法，touchstart、touchmove 如果大家想了解的更清楚可以查看帮助文档的哦好啦，废话不多说，直接上代码：首先把布局写好，根据自己的需求编写，html代码部分：<view class="container"> <view c...

微信小程序开发过程中，我们在版本迭代后，客户端并不能触发这个自动更新，需要清掉小程序后重新搜索进入才能获取到最新的小程序，但这个是用户所不能感知到的操作，故需要提醒用户如何去get到最新的版本:直接在app.js中的onLaumch钩子函数中添加以下代码即可：onLaunch: function (){ if (wx.canIUse('getUpdateManager')) { ...

console.log：向web开发控制台打印一条消息，常用来在开发时调试分析。有时在开发时，需要打印一些对象信息，但发布时却忘记去掉console.log语句，这可能造成内存泄露。在传递给console.log的对象是不能被垃圾回收 ♻️，因为在代码运行之后需要在开发工具能查看对象信息。所以最好不要在生产环境中console.log任何对象。直接执行以下全局函数即可：//判断配置文件是否开...

项目中使用到axios作为ajax请求插件，用到post请求是常见的，诸如以下场景的一个普通的post请求：export function listManage(params) { return request({ url: "http://xxx/QueryOrder/QueryOrderList", method: 'post', params:...