莫成尘-CSDN博客

原创谷歌浏览器一键安装vue-devtools插件（最简单省时的安装方式）@莫成尘

如果您阅读到本文章，恭喜他将给您省下很多时间。（我们省略了下载github安装修改等步骤，这也将是您见到的最简单的安装方式），此安装包在windows和macos中同样适用！步骤一：下载已经打包好的安装包托管在gitee上网址链接: https://gitee.com/Filialpiety/chrome-vue-dev.步骤二：如果您是使用git下载，那么恭喜您，已经接近完成了。打开谷歌插件拓展程序打开开发者模式，加载已解压的扩展程序，选择刚才的路径即可完成。如下图：如果在gitee中您

2021-08-12 15:42:28 876

原创中国省份城市区县划分.xlsx文件

中国云南普洱镇沅彝族哈尼族拉祜族自治县。中国云南普洱孟连傣族拉祜族佤族自治县。中国内蒙古乌兰察布察哈尔右翼前旗。中国内蒙古乌兰察布察哈尔右翼中旗。中国内蒙古乌兰察布察哈尔右翼后旗。中国重庆重庆秀山土家族苗族自治县。中国重庆重庆酉阳土家族苗族自治县。中国重庆重庆彭水苗族土家族自治县。中国贵州遵义道真仡佬族苗族自治县。中国贵州遵义务川仡佬族苗族自治县。中国贵州安顺镇宁布依族苗族自治县。中国贵州安顺关岭布依族苗族自治县。

2024-03-15 17:37:42 801

原创一篇讲透前端宏任务与微任务 @莫成尘

本文章将浅谈浏览器宏任务与微任务执行机制请看完我有理由相信，在面试过程中你遇到的如下问题：（他们是怎么执行并输出的） setTimeout(()=>{ console.log(1) }) console.log(2) let a = new Promise((resolve,reject)=>{ console.log(3) resolve(4) }).then(res=>{ console.log(res) }).catch(err=>{ con

2021-09-14 16:13:16 859 3

原创前端面试35k题库2021-@莫成尘

Web前端面试题宝典【精编版】过了八月，马上到了金九银十的跳槽季，找工作的时候曾一周面试了十多家公司，从一开始被面试官虐的体无完肤到最后对答如流，过程中经历了多少挑灯夜战的晚上，恶补前端知识，努力的付出终会有回报，最终获得了心仪的offer，所有的一切都是值得的。整理一下面试过程中遇到的高频题目，这些都是精简后的真题，就算不能百分百涵盖，至少也囊括7、8%了，如果面试过程中的你能回答出百分之八十左右的题目，不出大的纰漏offer基本上也就稳收囊中了，剩下的百分之二十是面试官测试你的技术极限在哪里，也会因

2021-07-28 10:08:43 1820

原创 2021前端最新面试题之价值30k的面试题

文章目录**一、Vue响应式原理****二、proxy数据代理是什么****三、计算属性和watch的区别****四、VueX的应用场景****五、v-for为啥要加Key****六、虚拟DOM和真实****的DOM的区别****七、基本数据类型和引用数据类型的区别****八、深拷贝与浅拷贝****九、****基本数据类型赋值和引用数据类型赋值的区别****十、为什么是js是单线程的****十一、小程序的生命周期****十二、jsonp的实现原理****十三、本地存储 localStorage sessi

2021-04-13 16:38:23 10004 25

原创前端js去重，一个好用的去重方案 @莫成尘

先看代码，复制使用即可，在实际开发中，我们经常会遇到数组去重的问题，简单的数组比如[1,2,3,1] 可以很轻松的使用es6New set或者别的形式，稍微复杂点的对很多刚入门的小伙伴是个不错的考验，基于此，将以下较好的方法分享，我称其为单key模式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> &lt

2021-04-08 17:26:09 585

原创前端面试之vue2和vue3的双向绑定问题@莫成尘

面试进行的一定程度，且面试官想对你过往的实际工作经验深入了解时候通常有此疑问。事实上，技术开发或多或少会遇到问题，有一些前端通病，也有一些是随着技术发展带了的，甚至还有个人粗心导致的问题。示例回答：1：某次在项目中发现了数据已经更新，但是页面并没有实时渲染数据，如vue2或uniapp中：<template> <view> {{object}} <br> {{arr}} </view></template><s

2021-04-01 10:38:49 620

原创 vue,uniapp,js手写单选和多选效果

单选您将看到以下效果思路是给要设置的元素绑定一个值，并判断这个值是不是和我们赋予（传参）的值相同（使用uview组件您可以尝试换成class等）<template> <view> <u-button @click="setClass(1)" :type="setClassIndex==1?'primary':'default'">设置1</u-button> <u-button @click="setClass(2)" :typ

2021-03-16 17:57:26 871

原创前端面试JS必备基础之深浅拷贝和this指向问题@莫成尘

一：js深拷贝在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中。深拷贝作用在引用类型上！例如：Object，Array。深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突如何实现深拷贝？1：序列化以及反序列化，JSON.stringify()以及JSO

2021-03-05 14:10:11 386 1

原创 uniapp微信小程序实现对H5的全屏适配（@莫成尘）

复制代码您将看到和一下截图一样的效果。我们将适配全屏至正常h5下的所以页面大小，您再此处将依然使用rpx作为开发单位。<template> <view class='pageBox'> <view class="wrap"> name </view> </view></template><script> export default { data() { return{ tit

2021-02-25 15:48:20 2482 1

原创自定义滚动条@莫成尘

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右，您将看到以下效果）。原生的滚动条比较方正，不够圆滑，很大程度上不能满足我们的审美，有时候需要修改其样式。<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&

2021-02-24 12:01:06 188

原创 uniapp微信小程序实现对地图多点或单点标记（@莫成尘）

先看代码，复制使用即可。您将看到以下效果：注意：icon图标需要自行下载并替换，此外调用我本地的地图密钥可能有上线次数，请使用调试不要超过50次！<template> <view class="box"> <map name="" :markers="markers"></map> </view></template><script> export default { data() { ret

2021-02-22 18:40:00 3898 2

原创 uniapp微信小程序常用防抖函数及调用

先看代码，复制使用即可。（防抖一般用于按钮使用，避免如登陆，购买等多次调用，如多次点击购买按钮在网速较慢下可能生成多个订单信息等）这里只是一个封装调用的简单流程，如您使用我们官方产品 uview，防抖参考: throttle & debounce节流防抖.您需要先定义一个js文件复制以下代码//防抖原理：一定时间内，只有最后一次操作，再过times毫秒后才执行函数let timeout = null; // 执行函数时间是否立即执行function debo

2021-02-22 11:07:51 2356 5

原创 js对数据进行加密（账户密码加密）@莫成尘

先看代码，复制使用即可。这是一个比较常用的场景我们借助了（crypto-es==>vue3）（crypto-es==>vue2）库。如您满意请给莫成尘点个star将他封装为单独的js文件import CryptoJS from 'crypto-es'export default { encrypt(word, keyStr) { keyStr = keyStr || '固定密钥' const key = CryptoJS.enc.Utf8.parse(keyStr)

2021-02-07 14:26:52 1097

原创 uniapp获取手机网络状态和手机系统信息（如4g，wifi）

先看代码，复制使用即可。（uni内置方法uni.getNetworkType用来获取网络状态，uni.getSystemInfo用来获取手机系统）<template> <view> <view @click="getNetworkType">点击获取状态</view> <view> 网络状态为：{{TypeOfNow}} </view> </view></template><s

2020-12-15 15:39:52 5118 8

原创用js判断字符串的字节长度（区分汉字和英文）@莫成尘

先看代码，复制使用即可。这是一个比较常用的场景，汉字视为2个字符，字母和数字等视为一个字符，繁体汉字视为三个字符。如您满意请给莫成尘点个star（以下链接点击下载即可）这是一个具名函数 function getByteLength(str = '') { let len = 0; for (let i = 0; i < str.length; i++) { if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94)

2020-12-11 11:54:18 4036 1

原创 css实现三角形（上下左右）@莫成尘

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右，您将看到以下效果）。如您满意请给莫成尘点个Fabulous<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ

2020-12-10 11:54:15 713

原创 CSS使网页适应不同屏幕大小（最实用的rem基础屏幕的适配方案）

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右）。如您满意请给莫成尘点个Fabulous牛顿说过：我之所以看得远,是因为我站在巨人的肩膀上，我们充分借鉴了element，antd等的方案来适配。需要注意的是使用了这个方案，您最好使用rem作为单位来设置css，\color{#FF0000}{需要注意的是使用了这个方案，您最好使用rem作为单位来设置css，}需要注意的是使用了这个方案，您最好使用rem作为单位来设置css，如果觉得自己计算比较麻烦，可以使用您的编译器设置

2020-12-10 11:40:00 3933 2

原创 uniapp原生查看图片大图（保存，修改，识别），调用外部地图app

在uniapp中，有一些原生的小技巧处理交互，简单分享两个，一个是点击图片查看大图，可保存等，一个是调用外部地图。如您满意请给莫成尘点个star 话不多说，直接上代码点击查看大图（代码均复制粘贴即可使用）<template> <view class="Box-Wrap"> <view class="IStitles"> <view class="toptitle Names">客服二维码</view> <view cl

2020-12-10 10:41:03 2708

原创在js中过滤数组（子元素为对象）@莫成尘

先看代码，复制使用即可。数组中嵌套对象，是常见的数据结构，某些时候我们渲染需要过滤掉其中子元素某个值为空的情况如您满意请给莫成尘点个star（以下链接点击下载即可）我们将过滤name为空的子值let List = [ {name:'张三',sex:'1',age:'18'}, {name:'张四',sex:'2',age:'29'}, {name:'',sex:'2',age:'20'}, //我们将过滤点这个name为空的值 {name:'张五',sex:'0',age:'17'

2020-12-03 10:17:52 969

原创在Uniapp微信小程序中解析富文本注意事项和正则@莫成尘

let IsReg = new RegExp('<img', 'gi');

2020-11-30 13:56:19 1058 2

原创在Uniapp微信小程序中使用vantweapp@莫成尘

有时候我们发现，在uniapp中使用vantweapp的时候，vant官方的案例并不能帮助我们在uniapp中使用vant。如您满意请给莫成尘点个star（以下链接点击下载即可）项目链接: https://gitee.com/Filialpiety/uniapp-and-vantweapp.您将看到以下页面，下载压缩包本地解压即可使用。具体使用方式和vant一样。vantweapp官网链接: https://youzan.github.io/vant-weapp/#/button. 附加和可能出现

2020-10-26 11:07:40 1231 2

原创 Uniapp微信小程序存储/获取本地缓存数据@莫成尘

先看代码，您将看到以下效果，复制使用即可，一下代码均可复制粘贴使用。如您满意请给莫成尘点个Fabulous如果同步存储不到接口数据可以尝试使用异步 // 异步存储和读取 //设置存储内容参数为参数名，参数值 uni.setStorageSync('name',"莫成尘"); //也可以这样写 uni.setStorageSync('name',this.name); //输出仅仅使用参数名即可获取 console.log(uni.getStorageS

2020-10-14 10:38:06 6052 2

原创 Uniapp微信小程序一套拿来即用的微信授权登陆流程@莫成尘

先看代码，您将看到以下效果，复制使用即可，部分地方需要修改，已备注。如您满意请给莫成尘点个Fabulous<template> <view> <view class="Administration"> <view class="welcome"> 我们这个小程序欢迎您！ </view> <view class="fondyour"> 请确认授权以下信息 </view>

2020-10-13 16:21:17 1321 3

原创使用JS方法做一个简单地本地数据加密解密

先看代码，复制使用即可，（您将看到以下效果）var name = '123' //实现可以加解密汉字的window方法console.log(name + '<==将要被加密')let namejiami = window.btoa(window.encodeURIComponent(name))//账号加密console.log(namejiami + '<==加密信息')let namejiemi = window.decodeURIComponent(window.atob(

2020-10-10 11:19:47 1058

原创前端css文字单行和两行超出变为省略号解决方案@莫成尘

先看代码，复制使用即可，css样式在本身提供的特别多的能力，但我仍以为很多前端开发者并不精深于研究css，这里提供一个超出隐藏的demo，让您可以很轻松应对。（您将看到以下效果）两行省略word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;line-height: 50px;/

2020-09-29 17:26:04 1299 3

原创 border-radius进阶使用，画瓜子，眼镜片，水滴等@莫成尘

先看代码，复制使用即可，css样式在本身提供的特别多的能力，但我仍以为很多前端开发者并不精深于研究css，这里提供一个背景样式，让您可以很轻松应对复杂的UI界面。（您将看到以下效果）如您满意请给莫成尘点个Fabulous以下是代码片段，一个完整的html文件，您可以直接复制，对于其他您想要设置的样式，这里提供了在线网站网站链接.可以供您做其他参考，使用方式如下图<!DOCTYPE html><html> <head> <meta charset=

2020-09-29 11:09:52 642

原创前端js正则验证大全（一套完整的正则验证解决方案）@莫成尘

先看代码，复制使用即可，验证基于前端常用的正则验证而来。（个人习惯用驼峰命名，请见谅）如您满意请给莫成尘点个Fabulous手机号验证思路是以1开头的第二位是23456789，匹配数字字符9位并结束共计11位function PhoneNum(value) { return /^1[23456789]\d{9}$/.test(value);}固定电话号验证思路是以1开头的第二位是23456789，匹配数字字符9位并结束共计11位function FixedPhoneNum(value)

2020-09-25 18:09:16 1123

原创 uniapp微信小程序的各种弹框提示（轻提示）

您直接复制粘贴即可使用不需要做特殊的处理。如您满意请给莫成尘点个Fabulous1：纯文字提示框uni.showToast({ title: '只有文字弹窗', icon: 'none', //如果要纯文本，不要icon，将值设为'none' duration: 2000 //持续时间为 2秒}) 2：带有成功图标提示框uni.showToast({ title: '成功提示弹窗', icon: 'success', //将值设置为 success 或者 ''

2020-09-22 12:14:53 15633 8

原创 uniapp微信小程序拿来即用的瀑布流布局（复制粘贴即可使用，无需做其他处理）

先看代码，您将看到以下的效果，图片来源于网络Uview框架，这意味着您直接复制粘贴即可使用不需要做特殊的处理，当然，如果下半部分的商品介绍信息不符合您的UI 我已提供了可以更改的大盒子，他自己没有高度，您可随意自定义。如您满意请给莫成尘点个Fabulous<template> <view class="Index">  <view class="pubuBox"> <view class="pubuI

2020-09-21 10:26:22 3463 13

原创 uniapp（js）处理过去时间对比现在时间的时间差如几分钟前，几小时前，几个月前（仿照cnode社区）

先看代码，复制使用即可，不过还是建议您一边阅读，一遍整理思路，总的来说，思路很重要，其次才是代码。您将看到以下效果<template> <view> 发表时间 <span style="color:red">{{outTime}}</span> 是现在的 <span style="color:red">{{nowTimer | formatDate}}</span> </view></template&

2020-09-17 11:25:14 5075

原创 uniapp中有关调用微信支付功能和其他注意事项

先看代码，复制使用即可，当然，可能并不是通用的，建议您一边阅读，一遍整理思路，总的来说，思路很重要，其次才是代码。（在此之前，您首先要确定的是您的小程序主体是商户才可以发动微信支付）<script> //就一般思路而言您首先将要做的是根据商品订单或者其他信息创建一个订单 // 比如创建订单接口({activity_id:_this.activity_id}) // 然后调用你们后台的支付接口等待返回数据如下 export default { name: 'p

2020-09-15 18:23:11 819

原创 uniapp滑块验证和依次点击字体验证（包含vue，后端，html端，weex，reactnative，android，ios等多端）

先看代码，复制使用即可，这是一个uniaap和vue版本的行为验证，不同的区别是他们将使用不同的包，包文件我已放在本人文件下载资源中，您将看到以下效果（请看完gif图，中间有过度时间有些长）。感谢captcha 团队的开源支持附送连接，您对滑块验证有后端，html端，weex，reactnative，android，ios等多端的需求请访问 https://mirror.anji-plus.com/captcha-web/#/第一步下载本人提供的压缩包解压之后放进项目任意位置，你可以将其视为组件

2020-09-11 14:53:10 2313

原创 uniapp一套完整的正则验证解决方案[ js正则常用大全]（手机号验证，邮箱验证，身份证等）

先看代码，复制使用即可，验证基于购物商城类可能会用到的正则验证而来。（个人习惯用驼峰命名，请见谅）手机号验证思路是以1开头的第二位是23456789，匹配数字字符9位并结束共计11位function PhoneNum(value) { return /^1[23456789]\d{9}$/.test(value);}固定电话号验证思路是以1开头的第二位是23456789，匹配数字字符9位并结束共计11位function FixedPhoneNum(value) { return /^\d

2020-09-09 17:22:05 8142 2

原创 uniapp实现一个搜索加提示功能（含传参等）

先看代码，复制使用即可，我已帮您考虑到使用v-for循环或者其他可能带来的问题。（这里推荐您安装插件使用scss）您将看到以下效果。<template> <view class="box"> <input type="text" @input="GetValue" class="S-input" :placeholder="placeholder" @focus="ShowValue">

2020-09-09 14:31:03 4609 5

原创 uniapp生态UI框架选择之uView（@莫成尘）

市场上的小程序UI框架有很多，都有哪些合适uniapp而不仅仅是针对单一的微信小程序的才是作为uni开发者最想知道的，接下来给您推荐uView（不仅仅是UI库也是一个js库）（uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。）uView官网连接，点击跳转.安装教程最后一步完成时需要重新编译

2020-08-28 15:34:54 8756 18

原创 uniapp中常见的上下（纵向）滑动屏幕的tab切换以及吸顶效果（类似淘宝京东）

先看代码，复制使用即可，这是纵向滑动屏幕导航栏跟随滑动的效果，是一个最基础的判断滚动距离和元素距离顶部高度的方式构成的，您将看到以下效果。以下是代码复制粘贴即可，这是一个非常基础的原理，我并未进行封装或更高深的写法，为了方便您理解（尤其是作为新手，主要给您提供思路），同时并未借助框架或别的，拿来即用。部分思路我将放在注释中。<template> <view class="ComBox"> <view class="box"> 站位 </v

2020-08-28 11:30:58 8051 12

原创 uniapp中常用的首页商品列表（包含下拉加载更多和超出文字改为省略号）

先看代码，复制使用即可，我已帮您考虑到使用v-for循环或者其他可能带来的问题,包含了下拉加载更多以及跳转详情页的参数传递。（这里推荐您安装插件使用scss）您需要新建页面，点击复制即可看到效果，效果如下：<template> <view class="ComBox"> <div class="ComList" v-for="item in ComListSon" :key="item.id" @click="ToDel(item.id)"> <

2020-08-26 18:19:34 4003 1

原创 uniapp中常用的九宫格和列表布局（包含超出文字改为省略号）

先看代码，复制使用即可，下文中您即将找到一些您很非常常用的界面样式，我已帮您考虑到使用v-for循环或者其他可能带来的问题。（这里推荐您安装插件使用scss）（其他诸如UI框架涵盖的内容，样式效果这里将不再赘述，下面我将会整理一个目录供您快速浏览使用）九宫格布局// tetemplate<view class="Grid"> <view class="Grid-Item" v-for="item in List" :key="item.id"> <view c

2020-08-26 11:20:20 12601 5

原创 uniapp中使用vantweapp实现省市区三级联动选择

先看代码，复制使用即可，本文介绍了如何在uniapp中使用vant组件实现省市区联动选择，在复制使用之前您要先配置使用以下两个vantweapp组件"van-action-sheet": "路径/dist/action-sheet/index","van-area": "路径/dist/area/index",然后在下载本人提供的资源ThisIsarea.js。（如果您未找到本人提供的ThisIsarea.js资源，您可以去以下地址下载 https://github.com/youzan/vant

2020-08-25 17:07:03 2846

中国省份城市区县划分.xlsx文件

vue行为验证压缩包.rar

uniapp滑块验证压缩包.rar

ThisIsarea.js

空空如也