- 博客(23)
- 收藏
- 关注
RSS订阅原创 vue 开发：动态设置html的title
技术干货当页面跳转（路由发生变化）时，操作title即可~// 路由 router.js{ path: '/index', component: resolve => require(['****'], resolve), meta: { title: '这是homePage' },}// 入口页面 App.vuewatch: { '$route.meta.title': function(val) { document.title = val; }}...
2021-01-28 16:01:54
1102
1
原创 微信小程序：区分运行环境并设置对应的请求域名
技术背景卤煮在没发现小程序的可以获取当前帐号信息时，大致上线流程如下：1、先切生产分支2、上传代码到体验版3、将当前体验版提交审核4、本地迅速切回测试分支、然后提交体验版（迅速的原因是担心这期间有测试同志测试，因为这时候体验版本上是生产的请求域名…）重要的事情说三遍，这是错误示范！这是错误示范！！这是错误示范！！！因为刚开始开发小程序，也没有人带，看了别人的demo就上手了，一直感觉这很鸡肋，一个字”忙“，所以一直没机会优化。直到昨天卤煮提交审核的是测试域名的包，生产问题就来了…抓紧版本回滚
2020-12-16 10:03:15
1869
原创 微信小程序：rpx和px转换
技术背景我们知道小程序里面是不可以直接进行DOM操作的，所以卤煮通常以下面的方式设置元素的尺寸：所以有时候就涉及到px和rpx之间的转换~~需求解决先看看官方的回答：通过小程序内置方法**getSystemInfoSync()**获取屏幕宽度，然后进行转换：rpx转px:var px = rpx / 750 * wx.getSystemInfoSync().windowWidth;px转rpxvar rpx = px / wx.getSystemInfoSync().windowWi
2020-11-16 19:18:37
1571
2
原创 微信小程序：打开debugger就有数据，关了就没有数据（高德地图）
bug背景微信小程序开发，卤煮项目里涉及到地址检索的需求，因为之前有开发过同样的需求，所以直接把前一个项目的代码粘了过来，CV工程师嘛，效率这块要把握的死死的~结果，测试工程师给我测出bug了，卤煮用的高德地图的api，直接前端调起接口获取地址检索的数据，发布体验版后死活就是检索不出数据，无奈之下打开debugger，结果返回数据正常打印，页面又能正常展示。我就纳闷了，之前项目运行起来好好的e~bug解决卤煮以为是小程序赋值出现了问题，就抱着试试的态度搜了一下，结果发现！！！对，就是合法域名没有
2020-11-13 10:11:16
1467
原创 面试篇：清除浮动的几种方法
技术背景前端开发绘制页面时，设置了浮动的元素会脱离文档流，无法撑开父级元素的高度，就会导致浮动元素的父级高度塌陷问题（高度为0），所以要对父级元素进行清除浮动的操作~技术总结clear语法：clear : none | left | right | both取值：none : 默认值。允许两边都可以有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象both : 不允许有浮动对象深入理解clear戳这里方法1：clear: both + 空标签
2020-10-20 17:57:19
2216
2
原创 小程序开发：监听返回当前页面
故事背景开发过程中，有些业务场景需要我们判断是不是返回到当前页面，一般就是当前页面设置一个变量，当拿vue来说，浏览器里面直接通过地址上的导航栏后退的话，这时如果页面使用了keep-alive，那么我们可以在activated钩子里面确定是不是返回的操作...
2020-09-04 13:37:26
3775
2
原创 微信小程序：canvas实现图片压缩
故事背景卤煮项目中有OCR证件识别的需求，像这种前端向后台发送图片的操作，我们这边肯定是要把图片压缩一下再传给后台的，比如卤煮MI 10 pro拍一张要10兆起步，这上传起来还不要了老命啦~~看网上大佬都说微信自带的wx.compressImage不是很好用，所以咱就直接用canvas进行压缩吧！！！！！！强烈建议：主要跳转画布大小和压缩质量，不然给你压个20KB？？？需求实现1.首先我们需要一个canvas画布，记得把它设置在某个隐秘的角落~~<canvas canvas-id='phot
2020-09-04 13:36:58
3381
原创 微信小程序：按钮设置宽度无效
故事背景卤煮开发过程中，对按钮设置样式都OK的，但是设置宽度就是不起作用，查了一下才知道，删除一行代码即可~对的，就是app.json中，将下面这行代码删掉即可~~
2020-08-09 13:35:17
4013
原创 面试篇：前端优化整理
故事背景前端优化这种高概率出现的面试题，能背下来最好~技术小白的卤煮表示已经n多次听到大佬们面试会问到。。。。。。作为一名前端开发工程师，前端优化其实最多的还是资源上的优化，逻辑上的优化不多，因为前端所涉及的逻辑相对于后台来说少之又少（这里不排除有些童鞋写的那些惨不忍睹的代码）。那下面就梳理一下前端优化的手段~上才艺！！！代码优化：1.减少重定向的使用（很影响初屏加载的时间）2.避免空src的img标签（浏览器其实会有一些额外的请求发生，版本高一点的这点优化了）3.减少iframe数量（同等数
2020-07-23 21:51:22
2620
原创 微信小程序：二次封装微信弹窗、上传图片等等等等......
故事背景微信小程序确实给我吗提供了太多太多的API，好用白piao他不爽吗？但是伴随着高频率的使用，封装是大道必行~简单明了上代码公共方法卤煮统一放到utils/util.js中，上代码(干货)~// 模态框const showModal = (obj, callback) => { const tempObj = obj || {}; const { cancelText = '取消', confirmText = '确定', cancelColor = '#999', c
2020-07-23 21:05:24
2727
原创 微信小程序：封装弹窗组件
故事背景卤煮开发的小程序还处在绘制静态页面的阶段，发现弹框这东西使用频率太高了，能不能封装一个公共组件呢~实现效果图片红色区域一律动态传入，放在vue框架，这个肯定很好封装，难就难在现在是放在微信小程序里面封装，卤煮可真的是踩了不少的坑，内容区域其实是最不好复用的，所以这部分卤煮用了微信小程序提供的标签rich-text，它可是支持插入HTML标签~戳这里。友情提示，看完官方api你觉得你就行了？？？大错特错，记得回来接着看卤煮的~~代码实现1.先看弹窗组件的部分(样式先撇一边)，WXML上图
2020-07-23 19:34:26
5105
2
原创 前端开发：对象key赋值变量
故事背景卤煮的开发之旅，今天恰好遇到这个问题，我们用字面量的方法创建对象的时候，对象的key如何赋值变量呢？需求实现const argA = 'myWorld';const tempObj = { [argA]: 'my_world'}console.log(tempObj); // { myWorld: 'my_world' }其实就是将变量用中括号包裹一下，就是如此简单～...
2020-07-20 22:47:40
3657
原创 vue开发：组件内的导航守卫
故事背景面试但凡问到vue框架，vue-router是逃不掉的~vue为我们提供了全局守卫、路由独享的守卫、组件内的守卫，详情戳这vue导航守卫卤煮借项目里实际的应用场景来讲一下组件内的导航守卫，顺便记录一下小坑~应用场景当页面返回上一页的时候，拦截路由，提示用户是否确定离开当前页面，上图~代码实现组件内的导航守卫：beforeRouteEnter和beforeRouteLeave两个钩子函数，拦截跳转用到的是beforeRouteLeave，上图~这里有个小坑，因为return写习惯了
2020-07-16 00:27:21
4114
原创 前端开发：禁用鼠标右键的网页查看源码
故事背景卤煮今天偶遇一个知名网站，正纳闷他的布局的时候，哎~ 我鼠标咋不好使了~，细品过后原来是鼠标右击事件被禁用了，这就无形之中勾起了卤煮的探索欲！！！！！！查看源码只需要在地址栏输入：view-source:你要查看源码的网址像这样~大功告成，抓紧试验一下吧~...
2020-07-11 11:35:01
3266
原创 前端开发：去掉input标签获取焦点后的边框
故事背景一般我们发会用到UI组件库，当我们自己写的时候就会遇到各种小坑，比如原生input输入框获取焦点后会有一个边框，有大佬说是蓝色，为啥我这个是黄色？？？一句css解决总之，干就完了：input{ outline: none }...
2020-07-08 21:39:55
6322
1
原创 前端开发：通过手机端访问本地vue开发项目
故事背景卤煮用的是vue框架，当我们想用手机获取电脑访问一下正在开发的项目，岂不是狂拽酷炫~实现教程1、保证你的项目跑起来了，并且要预览的设备和你开发的设备连接同一个网络（不在同一个网络，那基本废了，另寻他法吧）2、查看开发设备的IP(小黑框敲指令：windows–ipconfig、mac–ifconfig )3、找到package.json文件，给运行项目的指令后面添加一个 --host 指令，写入查到的IP（根据个人项目来，一般vue 2.0是dev，卤煮的是3.0：serve，当然你可以自定
2020-07-08 21:39:09
5930
原创 前端开发：every和some的用法
故事背景前后端交互数据的时候，肯定会涉及到一些复杂的数据结构，比如像一些枚举类的数据，后端一般不会返回中文给你，而是用一些数字代替。本篇讲一下ES6处理数组的方法：every和some的用法吧~every和some用法共同点：1.只能遍历数组2.符合条件即可跳出循环（可跳出循环！！！小心面试坑），返回布尔类型3.用法相同，接收3个参数：item(当前项)，index(当前索引)，arr(数组本身)不同点：every：一项为false就返回false，全为true则返回truesome：一项
2020-07-08 09:42:24
6029
2
原创 vue开发: v-on监听多个事件
故事背景巧了，刷知乎看到vue一个很讨巧的用法，对于这种在项目中没有用到且新颖的技术，卤煮就是如此神往~v-on的用法（特别推荐第四条）<!--1. 普通绑定方法 --><button v-on:click="onClick"></button><!--2. 内联语句，传参 --><button v-on:click="onClick('hello', $event)"></button><!-- 3. 缩
2020-07-06 14:48:27
5493
原创 前端开发：VUE之全局混入
故事背景得闲宁可散步，也不敢刷朋友圈~ 打住今天闲来翻看了卤煮在上家公司负责的项目，感觉vue应用的水准还是挺高的，以至于卤煮在新的项目中游刃有余，今天就说说vue的全局混入吧，这东西属于进阶的童鞋们不得不涉猎的技术点~mixin的使用场景项目中多次使用相同方法或变量，这时候可以借助mixin把这些方法和变量注册为全局的，然后在你需要的组件中进行调取就可以啦~，举个最简单的例子，你的项目中肯定会使用弹窗的吧，关闭弹窗的方法就可以注册为全局方法，然后混入到单个组件中，每个组件里都写一个关闭弹窗的方法
2020-07-02 17:02:07
4579
原创 微信小程序：父子组件的通信
故事背景（可忽略）卤煮马上要入坑微信小程序，为了开发起来更顺手一些，肯定要提前熟悉一下API。原本想找个视频看看的，但是看到网友都说，有点技术功底的都直接上手API踩坑。卤煮这种没技术功底的马上站起来表示不服，我也要硬充胖子不行啊！作为一名出色的前端工程师，学习新的框架技术，路由跳转和组件通信是必须搞懂滴。今天就先讲讲微信小程序的组件通信吧！！！父传子父传子就很简单了，看图说话~跟vue一样，父组件在调用子组件的地方使用自定义属性名，然后子组件在properties里面通过自定义属性名拿数据就可
2020-07-02 14:23:55
4253
原创 前端开发：a标签实现下载功能
应用背景前端项目实现下载文件的功能，在后台没给我们撸接口的情况下，我们可以利用a标签实现下载功能，而且贼简单~实现原理通过a标签的download的属性，将需要下载的文件放在前端项目中，然后href属性访问文件路径（这里一定要是绝对路径，不然上线到服务器就变长脸啦）！！！！！！代码示例拿vue来说，我们的文件需放在静态资源的文件夹，知道你常用assets文件夹放图片啥的，卤煮告诉你，这样行不通！！！！vue 2.× 的版本，把文件放static文件夹下，vue 3.×以上，放到public文件夹
2020-06-23 16:32:41
5953
1
原创 前端开发：css3实现文字首尾衔接跑马灯
故事背景事情是这样的，卤煮无意间得知一款外放效果宇宙无敌第一的手机！！！脑袋一热就趁着阿东618大促搞了一台，毕竟卤煮是一个地道的电子发烧友！！！但是当卤煮查询物流信息的时候。。。。。。好吧，我这该死的探索欲，被这突兀的跑马灯吸引住了目光（ca，今天看样子是收不到货了！！！）那就说说怎么实现它吧（这个梗接的就是这么硬）效果图逻辑描述p标签包含俩span标签(提示的文字)，要两个span，或者2个以上，p标签定位，改变p标签left值进行运动，运动到第一个span标签的结尾处，看图！！！当第二
2020-06-19 14:32:23
8519
9
原创 vue开发：动态缓存组件—动态应用keep-alive
vue动态缓存：动态应用keep-alive在实现动态缓存之前，先了解以下技术点:1.假设A组件用了缓存，则A组件首次加载的钩子执行顺序：created—> activated —> mounted，而再次返回A组件时只会执行activated，如果你想每次进入A组件都做一些事情的话，你可以放在activated里面2.使用include和exclude的时候，必须给所有路由管理起来的vue组件都设置name属性，后果不赘述。3.当同时使用include和exclude的时候，exclu
2020-06-16 19:58:53
4493
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人