自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

web前端学习总结

web前端学习总结

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

原创 uniapp Wi-Fi的打开与关闭

uniapp 控制Wi-Fi的关闭与开发

2023-02-16 11:22:42 1527

原创 uniapp 切换WIFI

uniapp 切换wifi

2022-11-21 20:15:29 2087

原创 uniapp 添加定位权限及弹出权限弹框

uniapp 获取定位权限,弹出定位弹框,获取wifi 的名称

2022-11-11 16:05:11 10088 3

原创 MAC 使用内置Apache 运行PHP

MAC 使用内置Apache 运行PHP

2022-10-27 18:08:24 2356

原创 uniapp离线打包新增页面跳转不了

uniapp 离线打包新增页面无法跳转,报找不到页面

2022-08-26 09:19:30 1752 4

原创 uniapp ping插件 离线打包

简介ping 网络测试插件,例如 ping 127.0.0.1插件使用说明参数属性类型默认值是否必填说明ipString无必填要测试的ip 地址callbackfunction无否测试结果的回调回调函数中的参数Obecjt属性类型说明codeString测试结果的状态, 200 为成功resultStringtrue: 能ping通 / false: 不能ping通msgString连接失败

2022-08-03 10:47:53 3049 1

原创 uniapp 调用原生插件包含第三方SDK时抛NoClassDefFoundError异常

将build.gradle 中的compileOnly 改为 implementation

2022-04-24 11:57:46 4572

原创 js 使用sm2 国密加密

js 使用sm2 国密加密由于项目中要对数据进行国密加密注意: 同一个明文,加密后的密文都不同,解密的话要用私钥解密js用sm2加密,首先要从后端获取公钥,用公钥加密参考资料crypto-js.js!function(t,r){"object"==typeof exports?module.exports=exports=r():"function"==typeof define&&define.amd?define([],r):t.CryptoJS=r()}(this,func

2022-04-08 18:12:59 18565 4

原创 uniapp 离线打包 添加文件读写权限

问题:项目中用到文件存储数据的需求,在项目中 manifest.json 中已经添加了读写权限,真机运行和云打包都没有问题,能读取文件中的数据,但是离线打包,读出的数据就是空。uniapp 离线打包用Android Studio ,项目中用到文件的读写权限 ,需要在打包项目工程UniPlugin-Hello-AS里添加读写权限。具体操作:修改 UniPlugin-Hello-AS/app/src/main/AndroidManifest.xml文件,所有的权限配置都在 AndroidManifest中

2022-04-08 13:49:46 4035

原创 uniapp 离线打包文档

uniapp 离线打包

2022-03-15 15:04:04 3253

原创 js 获取两个时刻之间的差值的时长 几分钟前

js 获取两个时刻之间的差值的时长:时间格式: 1年前、1个月前、1天前、2小时前、几分钟前等;function friendlyDate(timestamp) { var formats = { 'year': '%n% 年前', 'month': '%n% 月前', 'day': '%n% 天前', 'hour': '%n% 小时前', 'minute': '%n% 分钟前', 'second': '%n% 秒前', }; var now = Date.now();

2022-02-14 10:56:43 662

原创 ts的基础类型

ts的基础类型自己根据官网整理,方便记忆官网文档数字 - numberlet a: number = 0;a = 5;布尔值 - booleanlet result: boolean = true;字符串 - stringlet name: string = "";name = "小明"数组 - number[] / string[]4.1 定义由number元素组成的数组,各元素的类型必须是numberlet list: number[] = []; /

2022-01-18 15:35:26 1792

原创 linux文件属性及相关命令

一、文件属性详解 drwxr-xr-x属性主要分为4个部分:第一部分第一个字母,表示文件类型d 表示目录— 表示普通文件b 表示输入输出设备(可随机存取装置)l 表示链接文件c 表示为装置文件里面的串行端口设备,例如键盘、鼠标(一次性读取装置)第2部分从第2个字符到第4个字符,表示文件所有者权限第3部分从第5个字符到第7个字符,表示文件群组权限第4部分从第8个字符到第10个字符,表示其他用户的权限其中 r 表示读权限,w

2021-12-23 20:52:57 1360

原创 vue-typescript-admin-template 项目开发 保持Vuex持久化的方法

vue-typescript-admin-template项目开发保持Vuex持久化的方法当它没有初始状态并且您从 localStorage 加载状态时:修改store 文件下model@Module({ dynamic: true, store: store, name: 'mm', preserveState: localStorage.getItem('vuex') !== null })如果您想保留状态,例如从 vuex-persist 加载状态时:@Module({ dynamic:

2021-12-03 22:36:17 950

原创 vue-cli2 es6兼容问题导致白屏

vue-cli2 es6兼容问题导致白屏关于vue的项目,在浏览器上打开白屏的情况,大部分是因为es6语法不兼容导致的,下边说一下解决办法。解决方法1、安装 babel-polyfill es6-promise包npm i babel-polyfill es6-promise --save2、 然后在main.js中添加如下:import 'babel-polyfill'import Vue from 'vue'import Es6Promise from 'es6-promise'Es

2021-12-02 17:47:43 1520

原创 vue-cli3项目浏览器兼容问题,在低版本系统中白屏

vue-cli3项目浏览器兼容问题,在低版本系统中白屏vue-cli3 中自带 babel-polyfill ,会将es6语法转化成es5 语法。但是如果依赖中有es6, polyfill是不能检测出来的。官网解释:处理办法:如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。比如我新加的依赖为swiper, 在 vue.confi

2021-12-02 17:27:33 2974

原创 Xcode模拟器上安装.app的方法

Xcode模拟器上安装app的方法 (.app)背景:因为项目中有用到es6的语法,导致前端页面在低版本系统的ios手机上显示白屏。我这ios11.1系统就开始显示白屏了,由于公司没有这个系统的测试机,只能用 Xcode 模拟机了。注意:在Xcode 上的模拟机上安装应用,安装的包不是安卓包(以 .apk 为扩展名的),也不是ios的包( 以.ipa 为扩展名的)。而是开发人员的debug 安装包(以 .app 为扩展名的)我是找ios开发人员要的,安卓不知道有没有这个.app的包。(由于代码保密

2021-12-02 14:15:39 9627 1

原创 在Xcode上安装模拟机的方法

在Xcode 上安装模拟机的方法

2021-12-02 11:25:27 6089

原创 vue vconsole build打包时报错: vconsole.min.d.ts

vue 中用到 vconsole时, build打包时报错 in vconsole.min.d.ts参考: issues vConsole报错如下:Import or export declaration in an ambient module declaration cannot reference module through relative module name将 vconsole 的版本切回3.9.1版本就没问题了...

2021-11-30 12:30:00 1602

原创 前端添加登录验证码 vue

前端添加登录验证码 vue组件 ValidCode.vue<template><div class="validCode-wrapper" @click="refreshCode"> <span class="tbfont" :style="code.style" v-for="(code,index) in codeList" :key='index'> {{code.char || code}} </span></div&gt

2021-11-20 11:19:25 969

原创 axios请求成功时返回blob,失败时返回json

遇到的问题axios请求1、请求成功时返回的是一个流形式的文件,并且下载文件,需要设置responseType: ‘blob’,2、但是请求失败的时候返回的是json ,需要用默认的responseType: 'json’来处理错误信息那么我该怎么根据服务器响应后才设置这个responseType?解决办法axios设置 responseType: ‘blob’const API = axios.create({ baseURL: API_HOST})API({ metho

2021-05-27 14:25:12 2713

原创 HbuilderX 从命令行启动指定文件夹

命令行 指定HbuilderX 启动指定目录用命令行打开一个app,并且指定打开的目录,实在是太方便了。直接上实现方法:编辑配置文件vi ~/.bash_profile在配置文件.bash_profile中添加:alias hbd='open $1 -a /Applications/HBuilderX.app'保存配置source ~/.bash_profile这样就大功告成了。使用cd <目标文件目录>hbd .或者hbd <目标文件目录>

2021-04-09 11:41:49 2198

原创 vue 中使用v-html 和 字符串 replace() 方法实现关键词高亮显示

预实现效果,如图:html(主要部分):<div v-html="setKeyWord(content)" class="content-box"></div>js (主要部分):setKeyWord (str) { const reg = new RegExp(this.keyWord, 'g'); return str.replace(reg, `<span style="color: red;">${this.keyWord}&l

2021-01-15 17:43:15 3358 1

原创 解决uniapp中使用 uCharts Y轴数据重复的问题

在uniapp 中使用uCharts 图表,在折线图中有时候会出现Y轴的数据重复的问题。原因: 默认uCharts图表Y轴的分割splitNumber = 5;通常Y轴的数据去整数显示,但是Y轴数据的最大值和最小值之差小于5,所以在数据处理的时候会出现Y轴数据重复,如图:解决办法: 根据Y轴数据的最大值和最小值之差动态改变splitNumber的值,当最大值和最小值之差小于5时,splitNumber是两值之差,当大于5时,就等于5。动态获取splitNumber的方法,arr是折线的数据:

2021-01-15 16:05:12 4759

原创 最大余额法解决图表百分比总和不是100% 的问题(解决u-charts图表百分比之后不是100%的问题)

在做某些计算的时候,需要百分比之和是100%,但是一般求和算百分比,都会保留2位小数(默认四舍五入),所以很多时候相加不是100%的问题。比如 16,18, 24 之和 58对应的百分比 28%, 30%,41% 之和99%,不是100%。我们看到echarts的环形图、饼图和其他带有百分比的图表,相加之和都是100%。就是用到了最大余额法,解决了百分比总和不是100%的问题。最大余额法计算方法: <script> /*** 使用方法****/ let a

2021-01-05 11:36:50 5304 3

原创 添加.env.production 文件失效

添加.env.production 文件失效,是因为node_modules 中 cache 库缓存的问题,将node_modules 删除,然后重新install ,再起项目就好了。

2020-08-12 19:59:18 1954

原创 使用echarts+Amap 实现地图下钻并且带有散点图

主要实现功能:使用echarts+Amap 实现地图下钻并且带有散点图。在项目文件中引入 import echarts from 'echarts';在index.html文件中引入高德地图:<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key&plugin=AMap.DistrictSearch"></script><scri

2020-08-11 23:41:38 3730 2

原创 git commit 规范及 changelog

使用插件standard-version和conventional-changelog生成 changelog 文档的方法。具体步骤如下:1. 安装插件在 package.json 文件中补充添加如下内容:"scripts": { "commit": "git-cz", "release": "standard-version", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",

2020-08-10 18:11:21 1334

原创 chrome谷歌浏览器离线状态下 不登录账号实现书签同步的方法

作为程序员,经常会用到chrome谷歌浏览器,在换电脑的时候,同步浏览器上的书签是必须的。目前我知道的同步谷歌浏览器书签的方法有两种:登录谷歌账号,同步当前账号下收藏的书签将本地谷歌浏览器上的书签导出,然后再导入新的电脑就好了;登录谷歌账号,得翻墙才能登录,如果不能翻墙的话,就得用第二种方法了,下面详细说一下。离线状态(不登录谷歌账号)同步书签步骤一、进入谷歌浏览器的书签地址在浏览器中的标签栏地址输入谷歌浏览器的书签地址:chrome://bookmarks如下图步骤二、点击图片

2020-08-07 15:54:46 10071 3

原创 vue项目性能优化之——Object.freeze()

如果你有一个巨大的数组或Object,并且确信数据不会修改,通过 Object.freeze 方法来冻结一个对象,可以让性能大幅提升。Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。在vue中的data或者vuex里使用Object.

2020-07-17 17:25:27 2280

原创 vue项目性能优化实践

v-for 遍历避免同时使用 v-ifv-for 比 v-if 优先级高,如果每一次都需要遍历整个数组,将会影响速度。一般我们实现一个列表循环,并且有条件的显示一些内容,如下: <ul> <li v-for="elem in elemArray" :key="elem.key" v-if='elem.show'> {{elem.name}} </li> </ul>优化 <ul> <li v-

2020-07-17 14:42:29 260

原创 element-ui中的Select选择器中remote-method方法带自定义参数

预期实现:在使用element-ui的select选择器的远程搜索的时候 ,需要remote-method这个方法添加自定义参数代码::remote-method="(query)=>{remoteMethod(query,'自定义参数')}"

2020-07-14 11:41:29 17350

原创 vue的自定义指令动态参数

1. 通过自定义指令中的修饰符的key作为值,更改显示的颜色动态指令参数当参数是动态的时候。main.js//当参数的值是动态的时候Vue.directive('color2', { bind: function(el, binding) { el.style.color = binding.value; }})Vue.directive('color3', { bind: function(el, binding) { el.style.color = bin

2020-07-03 16:50:23 4955

原创 vue自定义指令,限制input输入框只能输入纯数字

Vue.directive('enterNumber', { //全局方法 限制input输入框只能输入纯数字 组件中调用如(<el-input v-enter-number v-model="number" ></el-input>) inserted: function(el) { el.addEventListener("keypress", function(e) { e = e || window.event; let charcode

2020-07-03 15:29:52 4209 1

原创 vue的自定义组件使用v-model

在父组件中, 给children组件定义一个saySomeThing:<template><div class="home"> <p>{{saySomeThing}}</p> <Children v-model="saySomeThing" /></div></template><script>import Children from '@/components/Children.vue'

2020-07-03 14:21:44 205

原创 vue根据不同的环境使用不同的接口地址

vue根据不同的环境使用不同的接口地址1. 在根目录下新建一个js文件夹。目录结构如下:2. 新建setBaseUrl.js文件在js文件夹下添加setBaseUrl.js文件,内容如下:let baseUrl = "";let allUrls = {};let nodeEnv = process.env.NODE_ENV;switch (nodeEnv) { case 'development': baseUrl = 'http://192.168.161.186:8080/

2020-06-30 13:42:41 1546

原创 js 实现手机号隐藏中间4位数的方法

js 实现手机号隐藏中间4位数的方法用的是字符串的substr的方法。 let str = '12345678922'; let pre = str.substr(0,3); let next = str.substr(7,4); let result = pre + '****' + next;得到的结果:resutl : 123****8922

2020-06-30 13:13:26 2485

原创 vue的项目this.getResolve is not a function vue node-sass 的问题

vue的项目安装node-sass失败的解决办法vue的项目使用sass时,安装node-sass失败,导致项目起不来。报错this.getResolve is not a function解决办法,是node-sass的安装包的版本太高,不兼容。安装4.14.1 版本的就可以了;指令npm install --save node-sass@4.14.1...

2020-06-29 11:03:10 2361

原创 css 样式重置

css 样式重置/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */article,aside,footer,header,main,nav,section { display: block;}h1 { font-size: 2em; margin: 0.67em ...

2020-04-14 15:36:19 467

原创 .gitignore 文件的内容

.gitinore 文件的内容.DS_Storenode_modules/dist/npm-debug.log*yarn-debug.log*yarn-error.log*# Editor directories and files.idea*.suo*.ntvs**.njsproj*.sln

2020-04-14 13:52:30 279

空空如也

空空如也

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

TA关注的人

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