- 博客(55)
- 收藏
- 关注
RSS订阅原创 JS搜索关键字匹配变色
解析：使用的是JavaScript中的 RegExp(正则表达式）对象，var regExp = new RegExp(keyword,'g');1、使用原始的匹配项（match）来保持大小写。也就是说，关键字会匹配到文本的内容，同时文本的内容是不更改的。使用场景：用户通过搜索关健字（keyword），对文本进行匹配，并对匹配到的文本进行一些高亮处理。2、不保持匹配文本的大小写。g：执行全局匹配，如果不输入的话将会查一条，// keyword：是关键字，i：执行大小写不敏感匹配，
2024-04-11 15:50:17
197
原创 uniapp 公共JS中使用i18n
在main.js中已经声明了i18n后，在公共JS中使用多语言的时候依旧报错或者定义不明的情况下使用以下方法就可以啦。这样问题就已经解决啦。
2023-09-13 14:56:26
361
原创 this.$set() 不生效
但是实际应用中有的时候我们使用this.$set()改变了值，但是视图依旧没有发生变化，这个时候需要使用先this.$delete()在使用this.$set()，确保能够出发视图。this.$set()主要功能是解决改变数据时未驱动视图的改变的问题，也就是实际数据被改变了，但我们看到的页面并没有变化。
2023-05-06 15:25:13
1086
原创 uniapp靠边悬停,并沿Y轴上下移动（H5+小程序，APP未验证）
本文记录：靠边悬停并进行移动，可拓展为，点击出现列表，返回首页或其他选项等。目前效果标签可以在规定的高度内，沿着Y轴进行上下移动。H5端以及小程序端均可适用，APP端未验证。
2023-05-06 15:13:25
241
原创 video层级过高，以及界面使用多个video时，在安卓APP上同时播放的问题（uniapp）
uniapp中video多个同时播放问题video 层级过高的问题解决subNVues原生窗体的使用
2023-03-08 18:11:43
2231
原创 微信小程序层叠轮播，旋转木马轮播
小程序的swiper可以应付大部分的轮播需求。但有的时候为了迎合界面布局，需要特别一点的轮播，例如：层叠轮播（其实我太清楚它是层叠轮播还是旋转木马轮播哈，见谅，见谅）；我先上效果图：我自己在网上找了一些案例，然后我也跟着做了一个。说一下思路吧！初始需要给item们放置好位置以及各种层级，然后在切换滑动的过程中对设置的位置、层级、透明度进行替换，加上小程序的wx.createAnimation()动画效果个人认为缺点（仅个人观点，望各位大佬指教）主要定位分层，这些大家应该都知道，所以到这里的.
2021-07-15 17:33:19
1639
3
原创 微信小程序使用wxa-plugin-canvas分享海报和朋友圈
之前在写海报的时候自己也封装过一个，这里再给大家推荐一个组件wxa-plugin-canvas。目前就使用感来说还是不错的。这里有一个开源的地址，大家可以把它下载下来放进自己的组件中开源项目地址：https://github.com/jasondu/wxa-plugin-canvas开源项目作者：jason使用注意事项图片的域名务必添加到downloadFile合法域名中（开发设置-服务器域名-downloadFile合法域名） 如果要使用异步生成海报的方法，务必组件要加上i...
2021-06-28 13:39:21
1185
原创 基于 Promise + async/await
在一些场景中，经常会出现复杂性的场景。例如：我们有 A, B, C, D 四个请求获取数据的函数（函数自己实现）， C 依赖 B 的结果，D 依赖 ABC 的结果，最终输出 D 的结果function A(){ return new Promise(res=>{ let timer = setTimeout(()=>{ clearTimeout(timer) res("a"); },2000) })}
2021-02-19 16:38:19
69
原创 微信小程序在wxml文件中使用函数
这是微信小程序WXS 使用链接https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/具体使用方法：1、在wxml中使用<wxs module="function"> module.exports = { isDouble:function(n){ return n>9?true:false } }</wxs>
2021-01-20 17:40:09
3521
原创 前端加密解密（AES、RSA）
目前在使用过程中需要在前端加密一些数据传给后台，或者从后台接收数据去解析。本文使用vue为基础框架1、使用AES加密解密首先在vue中下载引用npm install crypto-js --save-dev在src中创建一个utils文件，在其中创建AES.js文件，加入代码：（ECB模式与CBC模式类似，相较于前者CBC模式需要多一个向量iv）import CryptoJS from 'crypto-js';class CryptoFiles { constructor (.
2020-12-01 15:55:03
1615
2
原创 Bootstrap data-toggle 的使用
今天在写代码的时候很心塞，之前也经常用这个，然而今天因为疏忽一直无法正常跳转，真的是写代码一点都不能大意啊！html代码：<ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#one">第一页</a></li> <li><a href="#two">第二页</a></li> <li><
2020-10-16 17:30:27
3628
2
原创 微信下程序在使用picker日历中，动态展示picker的起始与终止事件
产品需求：日历起始事件是明天，只显示三个月的日期代码：//获取最近三个月function getAllDate(status){ var systemTime = new Date(); var year = systemTime.getFullYear(); var month = systemTime.getMonth() + 1; var day = systemTime.getDate(); if (status==1){//明天的日期 systemTime.s
2020-09-07 17:30:38
169
原创 判断每24小时用户登陆状态，显示弹框等问题
产品需求：用户第一次进入产品时，给用户推广并弹出广告；当用户在24小时重新登录时，不在弹出广告；24小时后，也是在用户第一次登录时弹出代码设计：1、判断今天是否已经弹出过弹框2、如若已经弹出过弹框，是否已经超过24小时代码：调用界面 /*判断今天用户是否弹出过弹框*/ isPushOffBox:function(){ var that = this; util.isPushOffBox().catch(error => { that.se.
2020-09-07 17:25:59
396
原创 微信小程序防止点击界面发生两次跳转问题
问题描述：在使用小程序中，如果用户点击按钮过快，会出现两个一模一样下级界面，这样很影响用户的正常体验。解决办法：在util文件中增加全局按钮函数节流和函数防抖函数代码如下：/*按钮函数节流和函数防抖*/function throttle(fn, gapTime) { if (gapTime == null || gapTime == undefined) { gapTime = 1500 } let _lastTime = null // 返回新的函数 retur
2020-09-07 17:17:47
2412
原创 微信小程序使用canvas生成海报并分享小程序、或者下载分享到朋友圈
现在好些小程序都会出现这个功能，在使用canvas生成海报时应注意一下几个问题：1、如果海报中有图片，尽量使用异步，等图片加载完毕在进行画图，这样可以避免海报加载不出来或者空白等问题2、海报中的图片可为本地图片或者线上图片，本地图片没什么问题；线上图片：首先要考虑图片的域名是否已经配置，这个在测试中最好关闭本地设置中的不合法域名校验，这个以避免本地运行正常，上线后海报无法生成问题3、下载海报时应注意小程序是否有图库的访问权限好的，问题说完了，看一下代码吧（PS:代码会生成海报以及一个转发分享
2020-09-07 17:07:23
1603
2
原创 微信小程序开发使用日常
以下是小程序开发过程中，遇见的一些小问题，这里是记录：1、开发者工具测试小程序没有问题，一旦发布新版就会出现各种各样的问题。建议：在项目完成，测试时，关掉开发者工具-本地设置-不校验合法域名选项；这是你会发现，有一些需要配置的域名等报错信息。2、关于图片下载建议：再写代码时尽量写一套全局的代码。这个时候你要把整个授权弹框逻辑判断完整...
2020-09-07 16:47:25
141
原创 angular.js中html代码过滤，以及html中文本显示
在使用各种富文本剪辑器时，内容基本会以html代码的形式保留到后台。那么前端在处理的时候就会遇到两种问题：1、保留html中的各种设置。这个时候就推荐使用ng-bind-html（PS:如果你是用的angular.js进行基础构架的话）ng-bind-html指令是通一个安全的方式将内容绑定到 HTML 元素上。当你想让 AngularJS 在你的应用中写入 HTML，你就需要去检测一些危险代码。通过在应用中引入 "angular-sanitize.js" 模块，使用 ngSanitize ..
2020-09-07 16:33:44
432
原创 angular.js离开界面销毁定时器
使用场景: 界面A设置定时器，调转至界面B时，定时器一周都存在,未被清除。解决办法：在离开界面A时，及时对定时器进行清除，代码如下：var timer = $interval(function () { console.log(111111);}, 1000);/*离开界面销毁定时器*/$scope.$on("$destroy", function() { $interval.cancel( timer );});...
2020-09-04 10:47:47
886
原创 小程序小程序scroll-view上滑加载bindscrolltolower偶尔不触发，需要下拉后上滑一下才能触发
之前我们并没有使用bindscrolltolower，而是使用这个结构，并使用官方的onReachBottom去上滑加载更多，忘记之前是否能用了（感觉之前是能用的），但最近发现onReachBottom触发一次之后就不再触发了，由于没有找到原因，只能换一种办法做了：<swiper> <swiper-item> <scroll-view> </scroll-view> </swiper-item
2020-06-23 14:49:05
1009
原创 微信小程序头像上传以及剪切（使用插件image-cropper）
image-cropper插件引入后，会有很多默认功能，所有需求基本都可以满足；https://github.com/wx-plugin/image-cropper第一步：在组件中添加image-cropperimage-cropper.wxml文件<view class='image-cropper' catchtouchmove='_preventTouchMove'> <view class='main' bindtouchend="_cutTouchEnd
2020-06-23 14:40:50
4330
2
转载 wangeditor 粘贴word内容带样式解决方法
wangeditor自带粘贴文本样式过滤：粘贴文本注意，以下配置暂时对 IE 无效。IE 暂时使用系统自带的粘贴功能，没有样式过滤！关闭粘贴样式的过滤当从其他网页复制文本内容粘贴到编辑器中，编辑器会默认过滤掉复制文本中自带的样式，目的是让粘贴后的文本变得更加简洁和轻量。用户可通过editor.customConfig.pasteFilterStyle = false手动关闭掉粘贴样式...
2020-04-01 11:02:03
2419
原创 微信小程序禁止多次点击跳转、提交
在日常应用中，经常会有因为用户多次点击，从而造成界面BUG。以下是解决办法：以view举例：1、WXML：<viewclass="btnfontcanvas-btn"bindtap="{{!buttonClicked?'getLottery':''}}"> 抽奖</view>2、最好在util.js中封装一个函数，这样可以全局调用f...
2020-01-16 17:42:30
1584
原创 Angular.js中ng-disabled失效的问题
问题描述：在正常使用中，有的时候已经在html中增加了ng-disabled，界面在鼠标移动时也出现了禁止符号，但是仍然可以点击解决办法：在ng-click中对ng-disabled与点击事件同时进行判断：例如：<div class="test" ng-disabled="judgement()" ng-click="judgement()||testFuction()">...
2019-11-11 17:15:06
1019
转载 防止ng-click重复执行
目的：在angularjs1.*中通过装饰器进行服务的功能扩展。这里需要防止按钮短时间内重复点击，造成服务器负载过高。我们需要通过覆写ng-click指令来实现。知识点：1.依赖注入2.装饰器设计模式3.指令的执行顺序4.阻止事件传播5.防抖机制讲解：1.AngularJS中默认实现了依赖注入，通过$http的方式注入需要的服务。内部实现机制是通过将函数的function进...
2019-11-06 09:58:27
780
2
原创 兼容移动与PC的画画板
使用canvas建立画布进行绘画功能，兼容移动端与各大浏览器1、主要测试显示效果如图所示 2、HTML界面框架进行设置 <div id="impressionBoard"> <div class="top" id="header"> <ul class="topList"> <li ...
2019-10-25 11:12:19
240
原创 vue定义简单的toast组件
定义toast组件组要用于提交数据的提示，数据加载中时进行缓冲1、自定义 提示框( Toast )组件/** * 自定义 提示框( Toast )组件 */var Toast = {};var showToast = false, // 存储toast显示状态 showLoad = false, // 存储loading显示状态 toastVM = null, // 存储...
2019-10-25 10:55:15
618
转载 vue + webpack 前端性能优化
背景 对于程序开发者而言，开发一个项目不仅仅注重效率和功能，前端的性能问题也是非常重要的。这直接影响用户的体验，从而间接的也反应该项目质量的好坏。 影响项目性能的原因有很多，如：资源文件的大小，业务的繁杂程度等，所以前端优化的方式也很多。这些东西很零碎，容易被人遗忘。所以这篇文章中对我平时用的优化方式总结一下，可能不是太全面，大家有其它的优化方式可以留言，互相交流下哟。不说了...
2019-10-16 12:57:47
776
原创 vue的同一个界面对同一个swiper 的多次引入
在swiper个数确认的情况下，比较简单，我就不再进行详细说明。之前开放时有在 一个界面同时使用动态个swiper,为了节约代码同时使多个swiper之间相互不受影响，所以使用了以下方法：对所需要多次使用的swiper在data中进行设置，在watch中对数据进行动态监听，根据以下图示即可。...
2019-09-28 13:02:07
768
原创 vue使用i18n进行多语言切换
1.尚未安装i18n时需要安装：npm install vue-i18n2.在项目的main.js中增加代码：import Vue from 'vue'import App from './App'import router from './router'import VueI18n from 'vue-i18n'import $ from 'jquery'Vue....
2019-09-28 12:53:51
1465
原创 移除eslint
项目创建时，有时不注意会有eslint，使用中eslint对代码要求太过于严格所以需要关闭或者移除：build ---->webpack.base.conf.js在 npm run dev运行即可
2019-09-11 11:07:16
6541
转载 web前端性能优化总结
网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。 而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外，其实前端的页面更需要在性能...
2019-09-06 12:41:26
108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人