- 博客(60)
- 收藏
- 关注
RSS订阅
原创 挖坑指南: canvas元素的宽高属性和css中的宽高(大型翻车现场..)
前言在微信小程序中做分享海报, 需要绘制 canvas，设置图片 100% 占满元素, 作为海报的背景。开始文档翻一翻, canvas.drawImage() 一把梭, 呃呃呃…发现背景图片没有按照原图 100% 平铺, 而是只取了部分, 变形了实践装X失败, 还是仔仔细细看看文档drawImage(image sx, sy, sWidth, sHeight, dx, dy, dWid...
2019-01-11 12:13:57
1983
1
原创 挖坑指南: 微信小程序this.setData({ })的骚操作
如果想设置 this.data.filter.Room 的值, 无法直接通过动态 key 的方式设置selectedFilterItem(e) { var dataset = e.currentTarget.dataset this.setData({ // 直接使用变量的形式是行不通的 filter[dataset.key]: dataset.value }) ...
2019-01-05 10:57:07
1572
原创 记一次重大事故：愿我们一生温暖纯良，不舍爱与自由~
前言在较早的时候, mpvue 刚出道, 试了一下坑, 在博客中记录了下来, 希望给之后入坑的人一个简单参考。后期随着 mpvue 的发展, 文章阅读数也越来越多。但是呢, mpvue 的发展也带来了新的问题, 文章写于早期, 其中的一些方式方法可能不具备实际的指导意义。在文中有放自己的二维码, 也是希望博友有问题能够一起交流, 在技术的路上携手共进, 互帮互助; 如果博文中有不当的地方, 能...
2018-12-22 10:29:58
657
原创 挖坑指南：vue刷新某个路由就404了，咋办？
前言单页后台，上传到线上，在某个路由刷新时就报错404。开始为什么会出现这样的问题呢？配置路由时，设置了访问模式为mode: 'history'；而后端是无法判断这是一个前端路由的。它会按照路径去找相应的资源，但是在服务器中并不存在，所以...404实践我们找到官方的文档看看：https://router.vuejs.org/zh/guide/essentials/h...
2018-11-19 17:30:43
4698
原创 挖坑指南：如何在引用的外部js文件中获取vue页面实例？（独家）
原文链接前言在基于iView的后台项目中，表格组件是我们的老朋友了。实现如下的效果更是最基本的需求：开始在iView早期1.x的版本(其实在~2.0.0-rc.7也能使用)，想要渲染这样的效果，代码如下：升级2.x后，Table组件的render()也作了更改：vue官方文档(render())：https://cn.vuejs.org/v2/guide/...
2018-11-19 08:54:53
12808
原创 挖坑指南：在vuex的多个module中的getters里存在相同的方法名，使用mapGetters会报错？
原文链接前言其实这个标题就是我们今天要谈论的话题。开始在vuex中有多个module是很正常滴，为了方便管理呢，我们有些module中使用了相同的名称。那么，在使用时，就会报错啦~实践其实在vuex的官网，已经为我们描述过啦~vuex:https://vuex.vuejs.org/zh/guide/modules.html#%E5%91%BD%E5%90%8D%E7%A...
2018-11-17 08:30:01
7958
1
原创 挖坑指南：[Vue warn]: Avoid using non-primitive value as key, use string/number value instead
开始报错信息：[Vue warn]: Avoid using non-primitive value as key, use string/number value instead实践原因： 在v-for遍历时，将item作为:key的值，而遍历出来的item恰巧是一个对象。解决：循环时添加index，或者将item.key对象中的某一项的值作为key。总结嘘寒问暖 不如打...
2018-11-16 18:02:13
6470
原创 挖坑指南：iView Select的Option@click事件无效
前言日常挖坑。。开始上车。。实践bug描述：Select组件，设置了filterable和remote，前端启用模糊查询。期望在用户选择某一结果项时，获取选择的对象。给Option绑定了点击事件，但是并未生效。为什么呢？应该是组件自身做了事件监听。那该怎么办呢？改用@click.native=""绑定事件。总结why? How? What?嘘寒问暖 ...
2018-11-15 16:12:50
5419
原创 挖坑指南：iView-admin动态配置route.meta.title（独家）
原文链接前言新的项目，基于iView-admin。结合自身的项目需求，对官方的模板进行一些修改。以达到动态修改route.meta，并同步更新面包屑导航文字和标签页标题。开始如果你还未使用过iView-admin或者正在上路，那我们先来看看项目的需求以及遇到的问题。那应该如何解决这个问题呢？实践方法一：一开始想到的方法，就是在新建页面的created()中，通过th...
2018-11-14 16:03:15
7760
7
原创 挖坑指南：ESLint + VS Code自动格式化代码
原文链接前言最近在整理公司的之前的项目，对整个产品线进行梳理重构。由于项目的编码人员换了好几拨，每个人编码又各有各的风格。现在在重新翻看，可读性很差。考虑到后期项目的扩展，以及对现有项目的优化，决定对代码进行整理，并统一使用ESLint进行规范约束。开始“编码一时爽，重构火葬场。”刚开始接触vue学习的时候，也都是自然而然地关闭了ESLint。以至于没有从头开始养成良好的...
2018-11-10 17:02:47
13560
1
原创 挖坑指南：如何通过事件动态地切换iView的Tabs（v-bind与v-model的区别）
前言iView的官方文档算是很详细的了，但是如果我们没有一定的编程经验，看文档也是一件令人困惑的事情。Tabs官方文档：http://v2.iviewui.com/components/tabs#API开始先来看看项目的需求看看官方文档为我们提供的接口有了这些基本就可以开始啦~实践页面结构为Tabs绑定了事件指定了value。可以实现动态切换。页面事...
2018-11-03 12:22:22
15211
3
原创 挖坑指南：iView表单 日期校验出错
前言表单数据的验证在前端是很有必要的，它是数据的第一道过滤。可以避免一些错误的发生开始先看看我们的使用虽然iView的官方已经更新到3.0的版本了，但是目前项目中使用的还是2.0的版本。官方的文档：http://v2.iviewui.com/components/form实践对照看了官方的文档，使用方式是相同的，字段也是没有问题滴。校验为啥就会报错呢？仔细地对照...
2018-11-02 18:02:47
4965
原创 挖坑指南：[Vue warn]: Invalid prop: custom validator check failed for prop "XXX".
前言表单表单，开发后台尽是表单。话不多说，先看看问题吧。开始这个项目呢，是使用了iView UI框架。开始查找网上类似的问题。type排查了一遍，最后发现是Input组件的type赋值为number。而官方支持的呢，如下好吧~开发中遇到各种各样的大问题小问题是难免的，关键是我们在遇到问题时，如何去解决问题。总结遇到问题，分析问题，解决问题，总结问题。很多...
2018-11-02 09:51:38
47187
3
原创 Vue: keep-alive在项目中的应用
前言上图看看项目基本情况。再次用文字简单地描述一下，左侧是公司的组织架构图。选择部门，在右侧展示对应的部门名称以及部门的子部门和成员数据。左侧是固定的，右侧的内容包含两部分，面包屑导航和子路由（初始时是默认路由/companyStructure/structureIndex）。由于每个页面都需要面包屑导航，就把它写在路由外，统一管理。在面包屑导航中，点击对应的导航可以回到相应的页面。...
2018-11-01 11:03:57
1253
原创 Vue挖坑指南：[vue-router] Named Route 'XXX' has a default child route.
前言OA系统，使用了路由的嵌套，希望在访问子模块时，默认加载模块的默认路由。即为子模块设置默认路由 。开始我们先来看看，如何为子模块设置默认的路由。这样写，会出现什么问题呢？打开控制台看看。实践vue-router给我们报了两个警告，我们一个一个来看。第一个：[vue-router] Named Route 'companyStructure' has a def...
2018-11-01 09:02:28
11526
4
原创 Vue挖坑指南: 如何在main.js中修改vuex中的值？
直接上图吧~好总结就是这么任性~嘻嘻(*^__^*) 嘻嘻……嘘寒问暖 不如打笔巨款~
2018-10-31 16:56:47
8665
原创 Vue: export default中的name属性到底有啥作用呢？
原文链接前言又开始一个全新的项目，每天都要元气满满呀~在划分模块和创建单页面组件时，常常写到name。嵌套路由中，index.vue极为常见，那么在vue中，export default { name: 'xxx'} 中的name到底有啥作用呢？开始还是先回到官方的文档：https://cn.vuejs.org/v2/api/#name官方文档已经给我们描述了两种使用情况，...
2018-10-31 11:08:01
84538
2
原创 前端进阶：vue中的computed和watch的异同
原文链接前言心情很忐忑，当我写下这个标题。想起年初时在杭州求职，电面了一家武汉的公司，面试官就抛了这样一个问题。那时候还懵懵懂懂，就知道如何使用，并没有太清楚两者的区别。开始有时候写这些东西，真的怕误导了一些人，以下描述的异同，只是我个人的观点。如果有什么不当之处，还望各位博友指出~感谢最近研究vue.js数据双向绑定的原理，看了一些很好的文章，自己也跟着敲了几遍代码。又开始思...
2018-10-23 18:12:16
1773
原创 挖坑指南：npm ERR! write after end
前言团队的项目，昨天还是好好滴，但是呢，github挂了，提交不了代码。晚上其他成员上传了代码，今天决定重新提交。开始提交时发生冲突，回退了一下版本。// 获取历史版本idgit log --pretty=oneline// 回退到指定的版本git reset --hard 版本id// 把修改提交到服务器git push -f -u origin mastergi...
2018-10-23 10:14:50
2925
原创 挖坑指南：Vue.directive()自定义指令的实践(含源码)
前言迫不及待想要上车试一试，直接贴代码吧。开始两个小例子，图片的加载优化以及第三方插件的配合使用。参考的资料在我分享的这篇博文中有记录，感兴趣的同学，可以参考更多。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title&g...
2018-10-22 16:44:59
1397
原创 前端进阶：一些好的博客博文分享
前言之前在读书会听到的，人与人思考同一问题时，心理表征是不同的。在技术圈，各路大神大牛云集。向他们看齐，学习他们发现问题、分析问题以及解决问题的方式，能让我们更好地看到差距，提升自我。开始我不盲目追随谁，只是取人所长，提升自我。以下是一些我自己在平时扩展学习中，发现的较好的博客与博文，在此记录下来。一方面，方便日后学习查阅，另一方面希望这些好的东西能被更多需要的人发现。博客大漠...
2018-10-22 14:54:34
375
原创 挖坑指南：npm install命令各参数的区别(--sava --save-dev -g)
前言在前端工作中，npm已经成为必不可少的一部分。npm install可以为我们的项目安装依赖，那么这个命令的参数，各代表什么含义呢？开始我们逐一来看看npm install --save-dev: 安装我们项目开发时的依赖，比如一些插件，对我们的less/sass/js/img进行一些处理，用于开发环境。npm install --save: 安装项目上线运行时的依赖，比如我们...
2018-10-19 09:03:08
3336
2
原创 挖坑指南：process.cwd()与__dirname的爱恨情仇
在网上找了蛮多资料，发现一片通俗易懂的，分享给大家。https://www.jianshu.com/p/aeb3d4318d07嘘寒问暖 不如打笔巨款~
2018-10-18 16:31:51
1136
原创 CSS: transition和@keyframes动画
前言为了更好的用户体验，在开发时我们使用了适当的动画，实现一些切换的效果。在使用@keyframes时遇到一点问题，于是开始找其他的解决方案，发现了transition很适合。开始先上一张图片，看看要实现的功能，很简单的。就是要实现右侧小三角的旋转实践一开始是使用了@keyframes，看下小程序的代码<view class="arrow"> &l...
2018-10-17 11:49:04
2148
原创 挖坑指南：百度鹰眼web api的使用与问题总结
前言公司想做外勤管理的工具，要记录员工的出行轨迹，研究了一下，发现高德、腾讯都没有相关的API，只有百度地图有一个鹰眼的服务。那就试试呗~开始货比三家，先来看看其他两家的解决方案。高德地图：https://lbs.amap.com/dev/demo/path-record#Android 腾讯地图：https://lbs.qq.com/geo/index.html 百度地图：...
2018-10-12 10:50:24
6129
4
原创 微信小程序：wx.navigateBack()时弹窗一直显示
前言小程序使用服务需要用户绑定手机号，在进入页面时，判断用户是否授权，未授权的话，弹窗组件(自定义的)显示onShow(){ let isBind = xxx if(!isBind){ // 获取弹窗组件(自定义的)实例 this.bindTip = this.selectComponent('#bindTip') // 调用弹窗组件的方法，显示组...
2018-10-11 09:09:38
2895
原创 微信小程序：globalData和Storage数据存储的错误示例
前言在小程序登录是，将返回的用户数据，存储在globalData中和storage中。// 存储的数据是一个对象wx.setStorageSync('userAuthData', user.data.data);this.globalData.userAuthData = user.data.data;之前，数据更新了，为了避免频繁的数据请求，要更新之前的用户数据（更新某字段的值...
2018-10-10 18:33:10
16811
3
原创 挖坑指南：各地图JavaScript API常用接口
前言从pc到wap到小程序，不同的业务需求，记录一些常用的API。开始自己项目中使用的是高德地图，第三方的数据是百度地图的经纬度，小程序SDK是腾讯的。各地图提供的接口很丰富，使用时参照对应的示例即可。实践记录一下项目中使用到的一些API，以及其对应的需求场景腾讯地图经纬度转换：https://lbs.qq.com/webservice_v1/guide-convert...
2018-10-09 11:09:04
1043
原创 微信小程序：惊！CSS导致JS事件未触发...
前言研究navigationStyle:costom，使用自定义的导航。老规矩，先上设计稿：要实现左侧的自定义导航，该导航有一个圆角的边框，圆角的啊~开始移动端经典的1px问题+圆角边框。早期，在.less文件中定义了.border-1px()用于解决移动端1px问题，后期为了兼容圆角边框，又添加了几个变量。// 添加一个设置圆角的.border-1px(@color:...
2018-10-08 16:54:22
973
原创 挖坑指南: 如何在微信端（x5内核）实现视频的内联播放？
前言之前的项目是基于微信端的，接入了直播的板块，要求在手机上可以一边看直播一边评论聊天。当时研究了两天，才慢慢清晰，记录一下。开始先来看一张设计稿，清晰明了整个播放页面可以划分为两大部分，上面是视频，下面是聊天互动区域。由于是直播，视频的实时播放格式的.m3u8格式的，播放视频使用了腾讯的TCPlayer播放器，根据它提供的API进行视频播放。实践使用TCPla...
2018-10-07 16:44:34
4196
4
原创 JS: 百度地图与腾讯/高德地图经纬度转换
前言在开发中使用了第三方的数据，由于经纬度使用的是第三方的数组，他们使用的是百度的地图坐标。在项目中使用时，能用百度地图去解析自然是最好的，但是呢，该项目是基于微信小程序的，百度地图针对小程序提供的API功能不是很完善，难以实现想要的需求，所以采用腾讯官方的地图。开始使用不同的地图，相应的经纬度会存在些许偏差，腾讯和高德是同一坐标的，可以互用，百度的坐标与两者稍有不同，使用前，需要先经...
2018-10-07 15:43:09
14037
2
原创 微信小程序：高德地图在小程序中的实践（含静态地图）
前言前人栽树，后人乘凉。记录下工作的点点滴滴，让同道中人少走弯路~来看看需求和问题：房产相关的项目，详情中需要显示房源地址，底部要有固定的菜单（不是tabbar），房源数据过多，数据超过一屏时，map组件从底部进入，会穿透固定在底部的菜单，导致页面闪烁。开始参考一些行业大佬的产品，发现他们使用的只是一张图片，没有使用原生的map组件去实现，我想可能也是开发中遇到了坑。。鉴于我司...
2018-09-29 12:46:46
8246
原创 JS: label的click事件执行了两次
前言混合开发的后台，需要根据当前选择的checkbox动态生成input组，所以就给label绑定了click事件，但是console时发现click事件执行了两次。解决直接给label内部的input绑定click事件。参考资料：http://www.w3school.com.cn/tags/tag_label.asp总结嘘寒问暖 不如打笔巨款~...
2018-09-28 08:50:50
974
原创 微信小程序：跳坑指南——常见问题总结
前言记录几个微信小程序，在真机上预览遇到的问题。开始上传图片失败描述：在开发工具上传正常，打开调试，上传正常解决：在小程序后台，要添加uploadFile合法域名 下拉刷新不回弹描述：下拉刷新时，页面没有回弹解决：在onPullDownRefresh(){ }中，主动调用wx.stopPullDownRefresh() 导航栏显示加载动画wx.showNavigationBarLo...
2018-09-25 15:46:42
455
原创 微信小程序：如何在小程序中使用骨架屏？
原文链接前言骨架屏，就是在页面数据尚未加载前，先给用户展示出页面的大致结构，直到请求数据返回后，再渲染页面，以优化用户体验。骨架屏在前端的应用已经很普遍了，之前接手vue的项目，没能用上，现在开发小程序，想在小程序中试一试。看着美团外卖小程序的骨架屏，很nice~开始没有使用骨架屏的经验，只能靠搜索引擎了。找找找....终于在网上找到一份很好的例子，作者是腾讯的，代码已经在gi...
2018-09-20 13:14:36
14503
3
原创 微信小程序：使用externalClass自定义组件样式
前言之前分享过一篇关于自定义小程序密码/验证码组件的博文，一开始写的时候是解决设置安全密码的需求，现在提现时，也是需要使用到，但是样式稍有不同，所以希望能够通过自定义样式，实现复用。开始看官方文档，万变不离其宗。官方文档就是最基本的游戏规则，我们可以根据官方的示例，照葫芦画瓢，实现我们自己的功能。实践在密码输入组件中，声明externalClass字段：在使用组件的页...
2018-09-19 16:45:46
15447
1
原创 微信小程序：如何在{{}}中使用函数？WXML+WXS
前言在项目中涉及到百分比的计算，js浮点数运算会出现精度问题，造成小数位数过多，因此想在模板语法中对值进行相应的处理。开始按照常规用法，使用js中的toFixed()进行处理：<view>￥{{(cashMoney*0.02).toFixed(2)}}手续费(费率2%)</view>报错，无法直接使用，也不能调用js中的方法。实践既然{{...
2018-09-19 09:54:39
24621
2
原创 微信小程序：外部字体引用以及遇到的一些问题（字体图标/字体文件）
前言设计稿中，有用到手机未内置的第三方字体。如何在微信小程序中使用呢？开始触类旁通，小程序的wxss语法与css是一致的。我们首先想到的是@font-face{}。没错，它就是今天的主角~在正式开始之前，我们先来看看两个常见的概念：字体文件：引用该类型文件，控制文字的显示形态。字体图标：使用字体代替图标显示。一开始，参照网上的方法，将对应的字体文件，上传到https://...
2018-09-12 11:38:47
25760
4
原创 github: 第一次提交代码遇到的问题
前言之前写过一篇博文mpvue项目中使用第三方UI组件库。mpvue的项目是在它开源早期的实践，现在已经更新挺多的了。有一些小伙伴在看文章时，有所疑惑，所以整理一份代码放在github上，供大家参阅。开始在此之前，还未在github上上传过自己的代码。创建的过程就不在此详述，不清楚的同学可以参考这篇文章。主要来说一下上传时遇到的问题。 代码提交成功，但是提交人显示的是前同事。。登...
2018-09-11 10:55:36
415
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人