- 博客(50)
- 收藏
- 关注
RSS订阅
原创 vue foreach某条数据异常跳出循环
vue forEach中以下这种方式是无法跳出循环的，return只是结束当前这次，而后会继续下一次的循环array.forEach(item =>{ if (item.id == 0) { return})那我们再看看用breakarray.forEach(item =>{ if (item.id == 0) { break})咋回事，控制台怎么报错了？！用try-catch-finally吧，这个语法是js标准的处理异常的方式写法如下：let array = [0
2022-05-26 11:31:18
2772
原创 vue 页面添加水印并在浏览器不能去除
创建watermark.js文件let watermark = {}let setWatermark = (str) => { let id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } // 创建一个画布 let can
2022-01-06 17:38:07
1088
2
原创 uview最简单的引入使用方法
首先，确认下你的项目有没有装node-scss，没有的话npm 一下就好其次，去官网把整个uview的文件下载下来丢到你的根目录下面去然后再你的根目录下面创建一个文件，这个里面的内容就是这个，贴一下代码吧还是@import 'uview-ui/theme.scss';然后，把这段代码复制到main.js全局引入import uView from 'uview-ui';Vue.use(uView);再然后再再pages.json里面加一段这样的代码"easycom": { "^u
2020-11-20 18:00:58
14598
3
原创 flex 两列多行布局
flex 两列多行布局display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;把这段加到父元素里面就好了
2020-10-23 17:55:50
14648
原创 axios封装并携带自定义请求头（笔记）
import axios from ‘axios’// 创建axios实例const service = axios.create({baseURL: process.env.BASE_API, // api的base_urltimeout: 5000 // 请求超时时间})axios.defaults.headers[‘Content-Type’] = ‘application/x-...
2019-07-18 11:33:16
9904
原创 wx.previewImage图片加载不出来
wx.previewImage是微信提供的图片预览api，在使用是发现一个小问题，在预览本地图片是点击无法加载，把本地图片换成网络图片时就可以正常显示:wx.previewImage({ current:"../../img/banner.jpg" urls:[ "../../img/banner.jpg", "../../img/banner.jpg", ])}这个语法是没...
2018-11-23 14:15:05
13270
3
原创 微信公众号以及企微第三方应用开发必备的小工具
vConsole，项目里面安装这个vConsole，然后打开就可以愉快的查看控制台了。有个很好用的工具，可以在移动端查看控制台，跟小程序的下面的那个调试模式有点类似。
2023-04-19 15:23:56
689
1
原创 autox如何用夜神模拟器连接vscode进行调试
而后，先不着急连接电脑，autoX要在防火墙设置端口放行，端口号是固定的9317，重点来了，在你的windows中搜索防火墙。以上为夜神模拟器上autoX链接vscode方法，试过用雷电的，应该是模拟器没有配置好，没有链接成功过。如果vscode上出现如下文字，那么恭喜你说明已经链接成功，可以本地用模拟器调试了。然后一直点下一步，最后会弹出来让你命名规则，自己随便命名就好了。弹出输入框后，输入刚刚vscode上autox的服务运行地址。再到输入框内输入9317端口号，其他不用改，点下一步。
2023-03-22 01:15:40
1302
原创 js 数组去重
过滤器里写export function uniqueArray(array, key) { var result = [array[0]]; for (var i = 1; i < array.length; i++) { var item = array[i]; var repeat = false; for (var j = 0; j < result.length; j++) { if (item[
2022-04-24 10:16:24
203
原创 金额数字分割
全局过滤器里面写export function moneyNum(nStr) { nStr += ''; // 数字转换为字符 let x = nStr.split('.'); // 按照小数点分隔 let x1 = x[0]; // 整数部分 let x2 = x.length > 1 ? '.' + x[1] : ''; // 小数部分 var rgx = /(\d+)(\d{3})/; // 正则式定义 while (rgx.test(x1))
2022-04-24 10:14:11
218
原创 vue数字转大写
写在全局过滤器里面export function convertCurrency(money) { // 汉字的数字 let cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']; // 基本单位 let cnIntRadice = ['', '拾', '佰', '仟']; // 对应整数部分扩展单位 let cnIntUnits = ['', '万', '亿', '兆']; // 对
2022-04-24 10:12:34
1649
原创 正则校验手机号和座机
let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/reg.test(value)
2022-04-24 10:09:42
567
原创 vue 页面刷新vuex清空处理
将vuex中的数据缓存到浏览器即可保证刷新页面vuex不回被清空首先缓存state中的数据，在app.vue中添加mounted中添加监听unload事件，当页面刷新的时候缓存数据： window.addEventListener('unload', this.saveState)method中添加方法：saveState() { sessionStorage.setItem('state', JSON.stringify(this.$store.state)) }在st
2022-02-16 17:14:26
3833
原创 echart 按需引入
npm install echarts在main.js中引入let echarts = require('echarts/lib/echarts') //echart基础配置，必须引入require('echarts/lib/component/tooltip') //echart基础配置，必须引入require('echarts/lib/component/title') //echart基础配置，必须引入require('echarts/lib/component/grid') //
2022-01-08 12:01:09
1568
原创 element 按需加载
npm install element-ui再main.js文件添加需要用到的组件import { Message, Tabs,} from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; //引入样式文件// 注意，message这个组件不要Vue.use,不然进入页面会有个空弹窗Vue.use(Tabs)...
2022-01-08 11:58:47
689
原创 mac npm install ** -g报错问题
权限问题：打开命令行，输入如下代码，然后提示输入密码，将电脑密码输入进去就好了sudo chown -R $(whoami) /usr/local/*
2021-10-26 15:24:15
265
原创 webpack 前端性能优化----css篇
webpack将css打包成独立文件webpack.config.js如下配置：需要用到mini-css-extract-plugin，安装npm install mini-css-extract-plugin在webpack中引入const MiniCssExtractPlugin = require('mini-css-extract-plugin')在module选项中使用mini-css-extract-pluginrules:[ { test:/\.css$/, //正
2021-09-17 18:07:56
206
原创 vue 清除keep alive 表单内的内容清楚以及页面缓存
keep alive 页面内会触发两个方法，一个是deactivated，离开keep alive 页面的时候触发，一个是activated，进入到keep alive 页面的时候触发，有这两个方法，那么对于在表单页面打开其他页面时就可以做到内容不清空，但是重新打开页面的时候可以把数据清空，解决思路如下：新打开当前页面的时候传参数设为true，从mounted 取到，存起来，这个参数会随着页面一起缓存，当离开表单页面的时候吧这个参数设为false，如果是表单返回上个页面，不做处理，如果是提交给他设置为tr
2021-08-20 18:28:00
633
原创 echart 引入移动端无法缩放
echart 引入移动端无法缩放，换个echart库就好了，记录一下这个坑无法缩放的库：小程序的web-view也可使用<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts-en.common.js"></script>可缩放的库<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/
2021-07-13 21:38:46
274
原创 vue axios api 集中管理
来，我们先安装axiosnpm install axios再来，建好api文件目录及js文件我们在request 里面写上如下代码import axios from 'axios'const baseUrl = 'https://--------';export default ( method, url, data) => { console.log(method, url, data,"=====") return new Promise((resolve, reje
2021-05-31 20:44:32
392
原创 vue路由新窗口跳转
带参数跳转打开新窗口isService(val) { const params = { id: val }; let routeData = this.$router.resolve({ path: `/details/${val}`, query: params }); window.open(routeData.location.path, "_blank"); }新窗口接收参数created() { if (thi
2021-05-25 11:16:53
237
原创 vue根据宽度自适应屏幕
最近pc端需要使用到自适应的，网上搜了一堆，几个坑，文章会提，先说怎么实现的首先我用的是postcss-px-to-viewport这个插件，它能将px转化为vw，px就是你设计稿上的单位npm install postcss-px-to-viewport安装好之后再去配置postcss文件"postcss": { "plugins": { "postcss-px-to-viewport": { "unitToConvert": "px", //这里是需要转换的
2021-05-22 17:26:43
1911
4
原创 vue自适应各种屏幕布局
PC端，移动端，各种小程序等都可使用这个自适应方法匹配宽度，本文是根据屏幕宽度来做到自适应的，具体如下：在postcss文件中加入如下代码：module.exports = { plugins: { "postcss-px-to-viewport": { unitToConvert: "px", // 要转化的单位 viewportWidth: 1920, // UI设计稿的宽度 unitPrecision: 6, // 转换后的精度，即小数点位数 propList: [
2021-02-04 15:49:42
5725
原创 uview与colorUI的对比
uview 是一套相对很齐全，功能强大的前端ui工具，在uview出来之前，colorUI也确实是良心之作，现在看看这两大框架有何区别功能上：uview封装的组件很多，涵盖了几乎所有的常用业务场景，换句话说就是，你要快速搭建一个小程序，直接使用里面的所有组件就足够你使用了而color UI也提供了相应的一些组件，功能就没有那么多视觉上：uview的视觉效果没有colorUi做的精致，包括页面的排版以及基础色调和动画等等图标库：colorUi的图标库是真的很不错，每个图标都做的很精致，相对来说U
2020-12-16 12:09:03
5266
4
原创 时间戳转多少小时几天前
export function dateDiff (timestamp) { // 补全为13位 if (!timestamp) { return '未知' } timestamp = timestamp.toString().length === 13 ? timestamp : timestamp * 1000 var minute = 1000 * 60; var hour = minute * 60; var day = hour * 24; v
2020-11-09 16:01:21
437
原创 好用的图片压缩网站
https://www.bejson.com/ui/compress_img/一次压缩一张，没有大小限制，无损压缩https://tinypng.com/一次压缩20张，每张图片不超过5M无损压缩
2020-08-10 13:24:49
1073
原创 小程序分享到朋友圈
特大好消息，小程序于最近开通了分享到朋友圈的功能，再也不用像以前一样，先要canvas画个海报，然后保存，再让用户去分享朋友圈了，简直是分销神器，废话不多说，看看具体怎么实现吧。在要分享的页面添加段代码就好了如下：onShareTimeline(){ title:'我是小程序', query:'分享页面携带的参数', imageUrl:'分享展示图，默认是小程序的logo'}到这里就完了，是不是很简单，然后点击小程序的右上角的点点点，就会弹出来分享到朋友圈的按钮注意事项：1.分享到朋友圈
2020-07-27 12:55:57
347
原创 css3实现微信小程序红包雨
最近公司需求做一个微信红包雨功能，网上搜索到的基本都是用的canvas，对于canvas不是很熟练，于是用css自己写了一个，这种方式对于苹果机效果很好，但是在安卓机上会出现卡顿的情况，几番优化，还是会有一点点卡顿，废话不多说，上代码：wxml：<view> //红包开始前5秒倒计时 <view wx:if="{{showBefore}}" class="beforeRa...
2020-03-17 09:41:23
1517
原创 jq图片高度随着宽度按比例变化
这样就好了var ratio = 0.8;/*此处是宽高比例*/var liWidth = $('.wrap ul li').width();/*括号中为父元素选择器*/var liHeight = liWidth * ratio;$('.wrap li img').width( liWidth );$('.wrap li img').height( liHeight );...
2020-01-04 18:05:53
605
原创 uni-app和mpvue对比开发小程序？
最近在研究uni-app,因为公司要同时准备做小程序和H5，网上对比了一些框架，发现uni-app是比较适合这种开发的，下面拿原生代码和uni-app还有mpvue这三种框架做对比，你就知道为什么了：uni-app是遗传了原生小程序的绝大部分api，用法跟原生小程序一样，那么这样基本上不会出现什么不兼容的问题了，小程序里面的api在mpvue里面也可以用，但是用了之后转H5怎么办？性能方面，u...
2019-10-08 11:13:17
5155
1
原创 移动端屏幕自适应（笔记）
首先单位自适应，使用rem做单位，rem根据根标签来决定，若html的font-size为50px；那么1rem就是50px；然后我们在根据屏幕大小来给html定义font-size；把以下代码写到index.html中 fnResize() window.onresize = function () { fnResize() } function fnR...
2019-07-18 11:37:35
195
原创 时间戳转换为具体时间（笔记）
function formatNumber (n) {const str = n.toString()return str[1] ? str : 0${str}}export function formatTime (date) {const year = date.getFullYear()const month = date.getMonth() + 1const day = d...
2019-07-18 11:25:07
717
原创 vue 底部导航组件
不喜欢罗里吧嗦，拿过去直接能用：<template> <div class="footer"> <div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)" :key='index'> <...
2019-06-10 16:37:10
1199
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人