![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
H5前端开发
文章平均质量分 67
小能豆豆_前端
web前端爱好者,在武汉从事互联网web前端开发工作。
展开
-
uni-app开发壁纸图像小程序 瀑布流、懒加载展示
为了提高用户体验,我们可以使用uni-app框架来开发这样的小程序,并实现瀑布流和懒加载展示功能。本文将介绍如何使用uni-app框架来开发壁纸图像小程序,并详细讲解瀑布流和懒加载展示的实现方法。原创 2023-06-16 11:32:51 · 2406 阅读 · 2 评论 -
CSS使用伪类控制边框长度的方法
需要实现一个边框长度比容器长度小一些的边框时,以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果,并且使用起来很方便,下面通过本文给大家介绍CSS使用伪类控制边框长度的方法,感兴趣的朋友一起看看吧。我们需要实现一个边框长度比容器长度小一些的边框时,以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果,并且使用起来很方便。上面都是页面的基础样式, 想要实现边框的长度控制, 就需要使用。这里使用的是微信小程序编写的, 所以标签会是。最后两句是控制边框居中的问题。转载 2022-10-11 17:51:20 · 1562 阅读 · 0 评论 -
vue项目开启Gzip压缩配置方法及性能优化建议
原文地址:https://jingyan.baidu.com/album/454316ab29d0c0f7a7c03a1f.html?picindex=1vue项目开启gzip压缩和部署 nginx开启gzip优化性能第一步,在vue项目中安装依赖并将productionGzip改为true,开启Gzip压缩:npm install --save-dev compression-webpack-plugin第二步,运行 npm run build打包项目,这时可能...转载 2020-09-14 16:14:08 · 3413 阅读 · 4 评论 -
前端项目报错chunk-libs.e495f7a4.js:41 Failed to execute ‘postMessage‘ on ‘DOMWindow‘:
最近一次vue项目打包之后,在控制台出现了一个错误如下chunk-libs.e495f7a4.js:41 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').使用postMessage实现跨域 解决'Failed to execute 'postMessage' on原创 2020-09-14 16:09:48 · 5449 阅读 · 4 评论 -
git 代码提交,出现403错误的问题
git 代码提交,出现403错误的问题git -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks commit -q -F C:\Users\Administrator\AppData\Local\Temp\oyjlj03h.rmtgit -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks push -v --ta原创 2020-07-13 17:22:13 · 14798 阅读 · 4 评论 -
神魔?居然还有人认为这些初中级VUE面试题简单!!?
前言❝上次写了一篇不会吧!都2020年了你还不会这些VUE面试题?我遇到的一面的面试题,有小伙伴觉得这些题太easy了❞我反思!! 今天总结了一些比较新的VUE面试题,适用于初中级的面试者,也是我在面试中遇到概率比较高的题目「面对疾风吧!!」1.keep-alive的作用是什么?<keep-alive>是Vue的内置组件,能够缓存组件,防止重复渲染页面,提高用户体验,同时可以很大程度上减少接口请求,减小服务器压力。比如: 有一个列表页面和一个 详情页面.转载 2020-07-07 18:33:20 · 419 阅读 · 0 评论 -
vue组件之间传值方式 vue父子组件传值传参方法
https://www.cnblogs.com/lingdu87/p/9147555.htmlvue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h2>{{ msg }}</h2> <son p...原创 2019-10-26 01:54:00 · 681 阅读 · 0 评论 -
第三届VueConf将于2019年6月8日在上海举行 转发评论送门票
点击关注H5前端开发社区昨天演讲嘉宾日程安排日程安排将随时更新09:30 演讲者:尤雨溪 与Vue3相关的主题演讲 10:40 演讲者:卢俊杰 Vue单元测试之旅 您可能尝试过在代码的各种bug之间疲于奔命,堵上一个bug又冒出另一个,也可能尝试过在一个充斥着大量冗余单元测试的项目里举步维艰。这个主题会和你讲述单元测试的故事,讲述为什么我们...原创 2019-05-23 09:56:31 · 309 阅读 · 0 评论 -
不就是个短信登录API嘛,有这么复杂吗?
上联:这个需求很简单,下联:怎么实现我不管,横批:今晚上线。经ThoughtWorks洞见(ID:TW-Insights)公众号授权转载暴力破解早上开完站会,小李领了张新卡,要对登录功能做升级改造,在原来只支持用户名密码登录模式的基础上,新增手机号和短信验证码登录。业务分析师薇薇早就准备好了故事卡,并且也考虑到这个功能的特殊性,除了平常的业务性验收标准外,还专门添加了一些和...转载 2019-05-18 13:11:23 · 210 阅读 · 0 评论 -
VueConf 2019 尤雨溪上海演讲资料 vue3.0爆料
尤雨溪Vue.js 作者,前 Google Creative Lab 成员。日程安排日程安排将随时更新 09:30大会开始了 尤雨溪演讲主题:与Vue3相关的主题演讲 发展现状 ● Chrome DevTools: ~90万周活跃用户 ○ 对比:React ~160万 ● npm 下载量:~400 万次...原创 2019-06-10 22:06:19 · 1909 阅读 · 1 评论 -
[VueConf 2019]快手前端-天翔 - 分享探索Web编程的另一种形态
2019年6月8日来自全球各地的开发者齐聚上海交通大学文治堂,一起见证了VueConf 2019上海的成功举办。天翔快手前端架构师,游戏直播团队前端负责人。在大会上,快手前端架构师,游戏直播团队前端负责人天翔给大家带来了主题为“探索Web编程的另一种形态”的主题演讲。主题介绍:在去年各家如火如荼的小程序搭建过程中,快手内部也曾尝试过小程序平台的搭建,在这过...原创 2019-06-10 22:06:13 · 902 阅读 · 0 评论 -
[VueConf2019]蒋豪群 - Vue Beyond Vue Loader
蒋豪群Vue.js 官方团队成员,Vue CLI 维护者。曾在阿里巴巴、蘑菇街就职。2019年6月8日来自全球各地的开发者齐聚上海交通大学文治堂,一起见证了VueConf 2019上海的成功举办。在大会上,Vue.js官方团队成员,Vue CLI维护者蒋豪群给大家带来了主题为“Vue Beyond Vue Loader”的主题演讲。主题介绍:初学 Vue 的时候,大家可能...原创 2019-06-10 22:06:02 · 790 阅读 · 0 评论 -
VueConf 2019 尤雨溪Q&A 现场问答 PPT pdf 资料
VueConf 2019 尤雨溪演讲总结距离参加 VueConf 第一届大会已经很久了,yubo 的介绍一如既往地有意思 ❤️,是他的努力保持了大会热情的社区氛围!另一个彩蛋就是 Evan You 带了自己的亲人和孩子来到现场,真的是其乐融融!尤雨溪 @ State of Vue发展现状Chrome DevTools 有约 90 万的周活用户,React 相比有 16...原创 2019-06-10 22:05:45 · 805 阅读 · 0 评论 -
2019年值得推荐的11款JavaScript动画库
我在通过浏览网页寻找一个整洁好用的JavaScript动画库时,发现许多“推荐”的动画库都已经有一段时间没有维护了。经过一些研究,我已经收集了11个优秀的库可以在你的应用程序中使用。Three.js拥有超过43K stars,这个流行的库拥有一个强大的方式在浏览器中来创建三维动画,以WebGL作为更直观的方式。这个库提供了、、css3d和webgl渲染器,使我们能够在设备和浏览...转载 2019-07-05 23:12:33 · 4578 阅读 · 0 评论 -
浅谈:前端之未来
Gartner 2018 年的一份报告中提到三项前端相关的战略技术:Digital Twin、Immersive technologies、Smart Spaces,但当下的前端技术远不足以胜任这些领域。站在 201X 的末尾、互联网下半场的开始,不妨一起看看前端的未来在哪里,有哪些值得投入的方向。目录01引02回顾过去03立足当下04一窥未来App Developm...转载 2019-07-05 23:16:19 · 753 阅读 · 2 评论 -
vue页面缓存的实现方以及与原生的部分效果对比
前言作为移动开发者,相信大家对于使用html开发的App和使用原生Api开发的App,或多或少都有所体验。他们有各自的优势与劣势,今天我们就参考原生App的效果,通过使用vue.js框架来实现一款类似原生效果的应用。项目简介联华会员线上退货流程的实现。主要功能点:选店、定位、上传图片、售后查询。实现方案:vue.js效果预览项目过程中遇到的难点与解决方案1、原生的...转载 2019-07-15 20:06:16 · 1090 阅读 · 0 评论 -
vuejs中html2canvas使用 背景图和二维码海报图片保存到一张图片上 生成一张海报并下载
不少的项目中都用到了二维码加背景图片生成海报的宣传图片,实现方法就是canvas绘制到一张上后进行下载。html2canvas的技巧在这里不在讲解。二维码和背景图片进行定位。在传统场合,这类功能往往依赖后台合成图片,或依赖端上实现,但web侧本身也有独立的解决方案。 Web中具有图片生成功能的是canvas标签,我们可以使用canvas中的toDataUrl() API,得到当前画布内...原创 2019-08-10 18:01:47 · 5240 阅读 · 2 评论 -
vue父组件可以监听到子组件的生命周期吗
vue父组件可以监听到子组件的生命周期吗?比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现:// Parent.vue<Child @mounted="doSomething"/>// Child.vuemounted() {this.$emit("mounted");}以上需...原创 2019-09-20 18:47:13 · 1660 阅读 · 0 评论 -
input选择框 勾选 不勾选 数组的操作
$(function(){ $(".st_tree").SimpleTree({ /* 可无视代码部分*/ click:function(a){ if(!$(a).attr("hasChild")) console.log($(a原创 2017-04-17 18:02:07 · 1869 阅读 · 0 评论 -
vue项目中canvas两张图片生成合并成一张图片 canvas二维码放图片上
在项目中用户需要让我把二维码和背景图保存到一张图片上,其实大家都知道,这个可以用canvas来实现。简单上网搜了一下,调试了下,终于成功了,写篇日志记录下源码<template> <div class="content"> <div class="title font-16 font-bold" v-text="$t('lab...原创 2019-05-16 11:46:01 · 8480 阅读 · 0 评论 -
vue.js项目中时间戳转时间最简单方法
vue.js项目中时间戳转时间最简单方法【还需优化,后期改进了继续更新】timestampToTime(timestamp) { var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 // let Y = date.getFullYear() + '-'; ...原创 2019-05-07 14:28:36 · 4644 阅读 · 2 评论 -
react创建新项目 使用creat-react-app快速新建一个react项目
Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能。React 教程React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagr...原创 2019-02-14 18:32:21 · 24848 阅读 · 3 评论 -
吴晓丽分享[H5前端知识点和笔记]
吴晓丽分享[H5前端知识点和笔记]原创 2017-11-09 09:14:33 · 479 阅读 · 0 评论 -
05-Vue入门系列之Vue实例详解与生命周期
设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。 注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。转载 2017-08-30 15:50:39 · 376 阅读 · 0 评论 -
[标题党]15分钟开发可支持百万观众的H5视频直播网站
15分钟用Rails开发一个Blog有什么意思?那是2005年的Hipster追捧的玩具。现在都已经是2015年了。HTML应该读作Hipster's Toolkit Made Live了。既然是15分钟,那当然不是零基础的。在开始之前,你需要满足以下要求运行4.0以上Linux内核,并安装好v4l2loopback内核模块GStreamer转载 2017-08-30 09:59:59 · 7012 阅读 · 1 评论 -
$.getJSON报错Uncaught TypeError: Cannot read property 'id' of undefined解决方法
在开发中,写js的时候突然遇到了$.getJSON报错Uncaught TypeError: Cannot read property 'id' of undefined这种情况代码示例如下:input.keyup(function(){ var $key = input.val(); if($key==''){ suggestWra原创 2017-04-26 11:51:40 · 46772 阅读 · 1 评论 -
H5手机移动端开发常用资源整合
在移动端开发中需要考虑的问题比较多,常见的资源以及移动端需要注意的地方整理出来了,这是篇转载的文章,写的比较全面,分享给大家。转载 2017-03-12 21:09:14 · 2049 阅读 · 0 评论 -
web前端工程师面试技巧 常见问题解答
每年的春招是各企业需求人才的黄金时期,不少的前端大牛或者前端新手在面试时候不知道怎么来回答面试官的问题,下面来看下我转载的这篇文章吧,希望对从事前端工作的你有所帮助。每到年后,便是换工作的高峰期,很多同学会开始面试马拉松。当然也会有一批人选择年前面试年后入职。今天,我决定聊聊关于面试的话题,以及前端工程师的面试套路. (ps:这篇文章摘自 医小生与程序猿 的微信订阅号)。简历的细节转载 2017-03-06 17:58:31 · 3615 阅读 · 0 评论 -
H5新标签 <figcaption> 定义图文并茂的html5新标签-figure、figcaption
本来想分两篇文章来解释说明figure、figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受。大家在写xhtml、html中常常用到一种图片列表,图片+标题或者图片+标题+简单描述。以前的常规写法:title而在html5中有了新标签更能语义化的定义出这中图片列表,那就是figure标签。w3c赋予的定义:figure标签规定独立的转载 2017-03-05 16:30:57 · 7501 阅读 · 0 评论 -
HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用?
X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。 兼容性模式设置优先级:meta tag > http headermeta tag转载 2017-02-25 16:22:47 · 14233 阅读 · 0 评论 -
基于vue+node+mongo实现一个锤子商城
做个锤子官网demo练习个人一直想尝试用vue与node结合,做一个全栈电商型的网站,最后选择了锤子手机商城,这个项目从0开发到部署前前后后大概花了一个多月的时间,涉及登录、商品展示、购物车、下单等等,是一个非常完整的流程。其中交易的逻辑也比较复杂,所以可能存在一些细节问题(页面美观度就请放过我…),此后都会慢慢修复.锤子手机用的是 Angular,罗永浩的产品,感觉还是挺简洁美观.页面...转载 2017-11-14 17:32:00 · 2064 阅读 · 0 评论 -
根据url 添加菜单颜色
当鼠标选中页面导航栏的某一栏目后,如何给选中栏目添加特殊样式,一直没怎么搞清楚,今天学习了一下,并做个总结。这边有两种情况,一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失;另一种情况是即使刷新页面后样式仍然有效。直接上代码:第一种情况:[html] 在CODE上查看代码片派生到我的代码片<script type="text/javascript" src="temp...原创 2018-03-22 19:04:08 · 1249 阅读 · 0 评论 -
Vue 签到日历组件demo 源码案例
vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件vue-calendar-component基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库WhyGithub 上很多点击弹出日历选择某个时间的组件,却没有找到单纯展示日历并且能点击获取时间的组件 少部分日历组件的占用内存过于大,...转载 2018-12-24 16:50:44 · 12558 阅读 · 1 评论 -
Flutter在Windows平台下的安装配置
目录1. 安装 Flutter SDK2. 设置环境变量3. Flutter doctor4. 安装 Android Studio5. 启动 Android Studio, 安装 Android SDK6. 再次运行 Flutter doctor 查看依赖项7. 设置 Android emulator8. 配置编辑器8.1 Android Studio8.2 V...转载 2018-08-18 22:34:56 · 995 阅读 · 0 评论 -
前端 H5 Canvas 实现了一下水波图 水波纹效果
编者按:本文由 止战之殇 发表于掘金,并已授权奇舞周刊转载在项目中自己使用 Canvas 实现了一下水波图,在这里给大家分享一下它的实现原理。 一开始看到波浪,可能不知道从何入手,我们来看看波浪的特征就会有灵感了。没错,有人肯定会想到,就是 正余弦曲线!对于波陡很小的波动,一般选择正弦或余弦的曲线来表示波形,这是最简单而又最接近实际波形的表述。这里我选择了正弦曲线来实现。在讲实...转载 2018-07-25 16:57:28 · 19580 阅读 · 1 评论 -
npm run dev运行报错 error in ./src/App.vue error in ./src/components/HelloWorld.vue问题
运行项目时候出现的问题Windows PowerShell版权所有 (C) Microsoft Corporation。保留所有权利。PS C:\Users\Administrator> cd E:\projectwork\vuework\sellPS E:\projectwork\vuework\sell> npm installnpm WARN optional SKIP...原创 2018-05-28 23:40:17 · 63342 阅读 · 2 评论 -
form表单提交,前端验证,dedecms表单提交验证
Form表单提交,js验证1, Onclick()2, Onsubmit()Button标签 input (属性 submit button )标签Input type=button 定义按钮,没有任何行为。多数情况下,用于通过javascript启动脚本Input type=submit 定义提交按钮,提交按钮会把表单数据发送到服务器 1, onclick 与 Input type=...原创 2018-05-24 00:04:59 · 5902 阅读 · 0 评论 -
ajax上传图片demo示例,含图片功能和图片验证
ajax上传图片demo示例说明:本案例使用了layer的弹出层,使用案例的的时候,请删除非相关代码。仅供参考,不喜勿喷。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="原创 2018-05-08 18:04:16 · 991 阅读 · 0 评论 -
用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
谷歌浏览器 H5视频不显示下载,去掉浏览器视频窗口下载按钮方法使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮。如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷歌浏览器版本问题(低版本的右下角没有下载按钮,比如53.0版本,我的谷歌浏览器是53.0版本) 。用同事电脑上的58.0版本测试有下载按钮...原创 2018-05-20 22:39:23 · 4942 阅读 · 0 评论 -
js短信验证码60s修改密码demo
需要引入bootstap,layer库,本案例仅供参考<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1&原创 2018-05-14 14:02:26 · 988 阅读 · 0 评论