- 博客(49)
- 收藏
- 关注
RSS订阅原创 开发h5项目通过ip连接到手机上访问
保证手机和电脑在同一个局域网下，用手机访问自己电脑的ip地址一、vue项目：在中添加二、html、js项目：添加文件和文件，启一个Node服务器，根目录下创建文件夹，将项目放入中，作为静态资源即可访问package.json:app.js:...
2022-06-13 10:19:58
968
原创 vite+ts配置.env环境文件
1、根目录下新建.env.development和.env.production文件名必须是这样定义，否则读取不到其中写node环境变量和其它变量其它变量必须要以VITE_开头NODE_ENV = "development"VITE_BASE_URL = "http://127.0.0.1:3333"2、在tsconfig.json中添加"types": [ "vite/client" ]，用来提供import.meta.env 上 Vite 注入的环境变量的类型定义"compiler
2022-05-18 09:48:42
5900
原创 小程序 银行卡号输入4位自动加入空格符和输入时的光标问题
小程序在输入银行卡号时每四位空一格用replace就可以实现.replace(/\s/g, '').replace(/[^\w./]/g, '').replace(/(\w{4})(?=\w)/g, '$1 ');但是当改变中间某一位时，如果使用setData重新给输入框赋值就会导致光标跳到最后一位，所以要使用cursor属性让光标不乱跑wxml:<view> <text>银行账号</text> <input type="number
2021-11-02 15:36:10
800
原创 小程序使用canvas2d进行截图(图片+列表)
使用canvas进行截图，就是在canvas画布上把想要的东西画一遍然后保存成图片。如果是线上图片要使用wx.getImageInfo进行转换再显示在canvas上wxml:<view class="canvas-box" > <canvas type="2d" id="canvas" style='width:100%; height:{{canvasHeight}}px'></canvas></view><view&g
2021-07-08 14:40:14
2076
9
原创 《深入浅出webpack》（四、优化首屏加载时间）
优化开发体验：1.区分环境2.压缩代码3.CDN 加速4.使用 Tree Shaking5.提取公共代码6.按需加载1.区分环境if (process.env.NODE_ENV === 'production') { console.log('你正在线上环境');} else { console.log('你正在使用开发环境');}2.压缩代码压缩的方法除了可以通过 GZIP 算法对文件压缩外，还可以对文本本身进行压缩。对文本本身进行压缩的作用除了有提升网页加载速度的优势外，还具有
2021-06-15 14:01:33
426
原创 《深入浅出webpack》（三、优化构建速度）
优化可以分为优化开发体验和优化输出质量两部分优化开发体验：1.优化构建速度1.缩小文件搜索范围2.使用3.使用 HappyPack4.使用 ParallelUglifyPlugin1.缩小文件搜索范围1）优化 loader 配置由于 Loader 对文件的转换操作很耗时，需要让尽可能少的文件被 Loader 处理，可以通过 include 去命中只有哪些文件需要被处理。module.exports = { module: { rules: [ { // 如
2021-06-07 16:40:32
245
3
原创 《深入浅出webpack》（二、基本配置）
Webpack 内置了很多功能。我们只需要大概明白 Webpack 原理和核心概念去判断选项大致属于哪个大模块下，再去查详细的使用文档。想让源文件加入到构建流程中去被 Webpack 控制，配置 entry。想自定义输出文件的位置和名称，配置 output。想自定义寻找依赖模块时的策略，配置 resolve。想自定义解析和转换文件的策略，配置 module，通常是配置module.rules 里的 Loader。其它的大部分需求可能要通过 Plugin 去实现，配置 plugin。常用配置e
2021-03-26 15:54:35
128
原创 《深入浅出webpack》（一、核心概念）
目录一、Loader二、Plugin三、DevServer四、核心概念一、LoaderLoader可以看作具有文件转换功能的翻译员，配置里的 module.rules 数组配置了一组规则，告诉 Webpack在遇到哪些文件时使用哪些 Loader 去加载和转换。Webpack 不原生支持解析 CSS 文件。要支持非 JavaScript类型的文件，需要使用 Webpack 的 Loader 机制。例：配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取
2021-02-03 22:23:18
216
原创 H5页面点击瞬间出现阴影块
一、移动端点击<a>标签会出现阴影块，全部去掉的话直接设置如下样式：*{ -webkit-tap-highlight-color:rgba(255,255,255,0);}二、如果是设置了 cursor:pointer，也会导致点击瞬间出现大块阴影。去掉即可...
2021-01-21 15:19:21
933
原创 微信小程序的双线程模型
微信小程序的双线程：渲染线程和脚本线程是分开运行的。所以我们书写的 JavaScript 无法直接操作 DOM ，更新 UI ，因为驱动 UI 更新的永远是data为什么小程序要使用双线程模型？1.安全考虑。微信小程序是基于微信平台的，我们书写的业务代码只是注入到平台的一段程序，所以为了不危及到平台自身的安全，微信平台就以微信客户端Native作为中转站，渲染层和逻辑层分开通过Native进行通信。2.提升性能，保证用户体验。因此没有采用 iframe 和 web worker 方案。将逻辑线程变
2020-12-30 16:03:15
512
原创 vue2中vant ui按需引入组件注册
前面步骤都是按照文档来的，但是引入之后就会报错，是因为最后一步组件注册，在文档里没有写在vue文件中还要写在components中才能正常使用UI组件: components: { 'van-cascader': Cascader, 'van-popup': Popup, 'van-field': Field,},...
2020-12-30 16:03:03
1096
原创 vue-cli2引入公共less文件
1.安装loadernpm install sass-resources-loader --save-dev2.找到 build/utils.js替换成 if (loader) { if (loader == 'less') { loaders.push({ loader: 'less-loader', options: Object.assign({}, loaderOptions, {
2020-12-07 10:55:22
332
原创 vue百度地图中显示多个不同的icon覆盖点
实现效果：vue2.x百度地图官网：https://dafrok.github.io/vue-baidu-map/#/zh/index百度地图开发者平台申请的密钥ak：http://lbsyun.baidu.com/apiconsole/key官网的API还是比较全面的，日常功能都能实现，简单易上手。简单介绍一下用法：安装： npm install vue-baidu-map --save注册（只是实现某一功能的话，建议在组件内按需引入，减少工程打包后的体积）：<script>
2020-05-31 19:21:34
2422
1
原创 canvas实现画板功能，包括画笔颜色，粗细，圆滑曲线，橡皮擦，撤回上一步，清空画板，保存为图片
js部分:<script> let canvas = document.getElementById('can') let ctx = canvas.getContext('2d') // 先画一个和画布同样大小的矩形，在保存时可有背景颜色 ctx.fillStyle="#fff"; ctx.fillRect(0,0,canvas.width,canvas.height); let textColor = "#000" // 画笔初始颜色为黑色.
2020-05-24 21:35:21
2937
原创 防抖和节流
防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗。防抖当持续触发事件时，只有在一定时间段内没有再触发事件后，事件处理函数才会执行一次。应用场景：input输入框搜索功能window触发resize的时候监听浏览器滚动时，最后触发某个事件以Input输入框搜索为例：没有防抖时，在输入时不停的触发事件，不停的请求接口加大了性能的损耗防抖代码如下：function debounce (fn,delay) { let timer = null return f
2020-05-16 17:30:48
309
原创 vue利用递归实现无限级伸缩树状菜单
先上效果：容器：<template> <div> <Tree :treeData="treeData"></Tree> </div></template><script> import Tree from './tree' export default { name:'h...
2020-04-16 09:23:18
823
4
原创 vue开发webapp监听手机返回和退出
之前做webapp时学到的：使用 mui 进行手机物理键的监听首先安装 muinpm i vue-awesome-mui然后在 main.js 里注册import Mui from 'vue-awesome-mui';Vue.use(Mui);index.html 里：<script type="text/javascript"> mui.init({ k...
2020-04-15 22:07:43
1116
1
原创 前端学习python之基础语法
本文内容来自于《Python编程从入门到实践》总结，该书内容简单，对于有编程基础的同学很容易上手，很多语法和js很像，比如arr.pop()，str.strip()等这些都是前端js里有的方法，课后题也很简单，都是对其章节所教的语法的一个使用，对python感兴趣的同学可以从这本书学起。还有刚刚入手了一本《利用Python进行数据分析》，后期在学过之后还是会分享上来，作为自己学习的一个总结。欢...
2020-03-29 17:43:00
202
原创 splice和slice用法
splice(下标，个数)是操作数组的方法，返回被删除的元素，操作后原数组会被改变splice()只有1个参数时：let arr = [1,2,3,4,5,6,7,8,9]let arr1 = arr.splice(3)//包含该下标元素，删除后面所有的console.log(arr) //[1, 2, 3]console.log(arr1) //[4, 5, 6, 7, 8, 9...
2020-03-27 20:50:21
393
原创 详解vuex使用方法
vuex有5个属性：State，Getter，Mutation，Action，ModuleState：1.可以直接使用 this.$store.state.count 获取2.使用 mapState 获取：import {mapState} from 'vuex'export default { data() { return { }; }, computed...
2020-03-08 22:50:09
132
原创 vue中使用keep-alive实现tab
当组件在keep-alive中被切换时，缓存一次后mounted就不执行了，而activated和deactivated这两个钩子函数会被执行。activated：被 keep-alive 缓存的组件激活时调用。deactivated：被 keep-alive 缓存的组件停用时调用。keep-alive还可以接受两个参数，include和exclude，允许组件有条件地缓存。二者都可以用字...
2020-03-08 18:41:06
1687
原创 Vue中的混入mixins
minins与components相似，mixins选项也用于注册在外部封装好的代码，不过这些代码更加碎片化，并不如组件一样成体系，混入的目的在于灵活地分发组件中一些可复用的功能。混入可以将一些封装好的选项混入另一个组件中，在混入过程中，如果没有发生冲突，则执行合并，如果发生冲突且用户没有指定解决策略，Vue则采用默认策略。注意：谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包...
2020-03-08 00:56:07
220
原创 Vue常见事件修饰符
.stop：当事件触发时，阻止事件冒泡.prevent：当事件触发时，阻止元素默认行为.capture：当事件触发时，阻止事件捕获.self：限制事件仅作用于节点自身.once：事件被触发一次后解除监听.passive：作用于移动端滚动事件，限制事件永不调用preventDefault方法.native：给自定义组件绑定原生事件...
2020-03-07 14:41:39
178
原创 简述Vue和React的区别
Vue和React都是轻量级框架，不过总体来看，Vue的性能高于React两者再渲染流程中都采用虚拟DOM，以降低页面开销，不过Vue的虚拟DOM实现的层级更高一些，所以Vue的性能更高。Vue的渲染速度更快，因为React中有大量用于提供警告和错误提示信息的检查机制。React采用JSX渲染组件，Vue采用模板。Vue模板更贴合HTML，更容易加入其他东西，如CSS预处理器。Vue有快...
2020-03-07 14:29:59
448
原创 简述MVC和MVVM的区别
MVC：Model-View-Controller 模型-视图-控制器MVVM：Model-View-ViewModel 模型-视图-视图模型相同点：都是为了分离View和Model，M注重数据，V注重视图，使Model和View更易于维护。不同：MVC是系统架构级别的，MVVM是用于单页面上的，MVVM的灵活性大于MVC。MVC是Controller从View视图层收集数据，然后向...
2020-03-07 14:22:04
486
原创 vue中computed传参
<template> <div> <div v-for="(item,index) in names" :key="index"> {{name(item.secondName)}} </div> </div></template><script>export defau...
2020-03-07 14:00:41
111
原创 vue父子组件生命周期执行顺序
vue的生命周期想必都不陌生，但是加上子组件，那这个生命周期执行顺序就变成了：父组件beforeCreate > 父组件created > 父组件beforeMount > 子组件beforeCreate > 子组件created > 子组件beforeMount > 子组件mounted > 父组件mounted > 父组件beforeDestr...
2020-02-29 18:49:58
1450
原创 vue中watch的handler，deep，immediate用法详解
我们使用watch监听数据时，有三个选项，handler，deep，immediatehandler我们平时的写法，就默认写的是handler，vue.js会处理这个逻辑，最终编译出来就是这个handler（可参考我上篇文章的watch） watch: { // 通过输入框文字的变化，来改变下面的数据 ipt: { handler(newVal,oldVal) ...
2020-02-28 22:56:14
25764
5
原创 vue中watch和computed的区别
watch和computed都是监听数据，都是当依赖的数据发生改变时，被依赖的数据就自动发生改变。他们之间的区别就是：1.computed是监听多个数据改变一个数据，一般用于计算一些比较复杂的场景，比如购物车计算价格，就是多对一watch是监听一个数据从而改变多个数据，通过观察一个数据的变化去改变其他数据，比如搜索框提示列表，就是一对多2.computed用于计算，watch用于观察3....
2020-02-24 22:04:49
415
原创 vue窗口变化onresize
div大小随着窗口变化而变化效果：以下代码：<template> <div> <div class="mask"> <div class="center" :style="{width:centerWidth*0.2+'px',height:centerHeight*0.5+'px'}"> <p...
2020-02-20 16:51:39
2086
原创 vue 滚动条自动到底部
不用jquery，scrolltop不会不能赋值，使用 ref ，一句代码解决需求注意：这里使用this.$nextTick是为了方便更多的人使用，在修改数据之后使用 $nextTick，可以在回调中获取更新后的 DOM如果只是在一进入页面就滚到底部，在当前页面没有操作进行DOM更新，就可以省略this.$nextTick<template> <div clas...
2019-08-06 22:20:30
15035
4
原创 小程序父子组件传值
小程序父子组件传值1.父传子父组件往子组件传值 <!-- 父 --><list list="{{drugList}}"></list>子组件接收//子Component({ /** * 组件的属性列表 */ properties: { list:Array, //接收从父组件传来的值 }, /** * 组...
2019-05-14 17:21:55
1288
原创 小程序单个页面分享+自定义分享按钮
<view class="share-box"> <image data-id="{{article.id}}" bindtap="videoShare" class='video-share' src='/images/icon/class/share2.png'/> <button data-id="{{article.id}}" class='vide...
2019-04-08 23:23:37
4137
2
原创 小程序video进入、退出全屏事件
html:<video bindfullscreenchange="screenChange" src='{{article.video}}'></video>js:screenChange(e){ let fullScreen = e.detail.fullScreen //值true为进入全屏，false为退出全屏 if (!fullScreen ){ ...
2019-04-08 23:02:24
8398
4
原创 小程序video自定义播放按钮
html:<video show-center-play-btn="{{false}}" controls="{{false}}" id="video" src='{{article.video}}'></video><!-- 播放按钮 --><view class='video-play'>...
2019-04-08 22:52:44
9494
6
原创 小程序改变swiper样式（带缩略图）
用两个swiper，通过相同的current来实现联动html部分：<view class="diaries"><!-- 背景图 --> <image class="bg-img" src="{{bgSrc}}"></image><!-- 大图轮播 --> <swiper circular="{{circular...
2019-03-28 23:07:20
1794
原创 小程序picker-view改变选中上下边框样式
picker-view有这样l两个属性 indicator-style 和 indicator-class我们只需要设置：<picker-view indicator-class="picker-box" style="width: 100%; height: 200px;" bindchange="drugChange"> &l...
2019-03-26 23:34:59
8192
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人