_Daniel_-CSDN博客

原创移动端H5-音视频资源优化方案实战方案推荐

很久没更新了，近期在做资源播放相关的，看到很多方案很少人分享，来给大家马下分享分享。在微信中做H5端的页面开发时，尤其会有做视频或音频播放的最最最常见的一些问题如下：IOS音视频自动播放IOS加载音频/视频较慢视频播放全屏1. IOS音视频自动播放自动播放我之前的文章有说过，音频的实现可以看这里至于视频很不巧在IOS 视频的自动播放一定得有 "交互动作"这里的交互动作对用...

2020-03-27 16:40:24 703

转载 Vue3.0数据响应机制 - Proxy

在即将接触Vue3.0的数据响应机制前先熟悉一下2.0中的响应原理1.Vue2.0响应式原理机制 - defineProperty这个原理老生常谈了，就是拦截对象，给对象的属性增加set和get方法，因为核心是defineProperty所以还需要对数组的方法进行拦截1.1 对对象进行拦截function observer(target){ // 如果不是对象数据类...

2020-01-15 16:32:58 1212

原创日常记录-微信H5端，视频/音频自动播放

function autoplay (id) {document.addEventListener('DOMContentLoaded', () => {var audioAutoPlay = () => {var audio = document.getElementById(id);document.addEventListener('WeixinJSBridgeRead...

2019-08-14 11:41:35 1039

转载前端虚拟列表的实现

实现思路在讲解下面的内容之前，先对虚拟列表做一个简单的定义。因为 DOM 元素的创建和渲染需要的时间成本很高，在大数据的情况下，完整渲染列表所需要的时间不可接收。其中一个解决思路就是在任何情况下只对「可见区域」进行渲染，可以达到极高的初次渲染性能。虚拟列表指的就是「可视区域渲染」的列表，重要的基本就是两个概念：可滚动区域：假设有 1000 条数据，每个列表项的高度是 30，那么可滚...

2018-10-18 10:40:26 9399 7

原创日常开发记录打卡系列--让你的Vue项目感受特殊服务

这个特殊服务就是让我们的Vue项目够快体验如丝般顺滑的加载速度。不要想歪了。相信大家在开发Vue较中型的项目时会发现首屏加载真特么慢，特别是引用了一些插件和UI框架的run build的时候会有三个主要的JS文件app.js是入口js <包含了我们所有写的业务JS>vendor则是通过提取公共模块插件来提取的代码块 manifest则是在vend...

2018-08-01 10:05:45 1431

原创日常开发记录打卡系列--新版微信浏览器H5开发

微信更新新版之后，有的吐槽有的点赞不管你是因为新版微信的什么问题导致前端页面和逻辑有影响的这篇文章主要讲的就是哪一些原因你能控制哪一些无法控制的。 1.Fixed固定定位在头部或者底部的会因为返回栏或顶部栏滚动缩小拿个京东的例子给大家看看是不是心里拔凉拔凉的，内心想法：‘没错是我了’这个大家想在原有的布局方法上去改可能性不大。为啥？...

2018-07-20 18:18:12 1245

原创日常开发记录打卡系列--JSON树状数据处理

写博客频率有点低了呀由于工作没什么时间研究太多干货很多都是在工作中直接研究实现，就忘记写博客记录了不过偶尔抽点时间写写记录一下也不错，虽然问题基本都能解决但是希望能在其他兄弟们遇到问题的时候能找到关键字，并解决所以今天起开一个日常开发系列今天主要讲的是后台根据传入ID和parentID来判断子父级的JSON数据然而实际运用的...

2018-07-17 09:54:13 372

原创迟早会遇见的web视频播放器之疯狂的进度条 ---微信开发

本篇文主要讲的是在微信浏览器IOS中视频播放器的问题，至于安卓为啥不讲呢毕竟安卓系统开源，微信动动手脚还是挺容易的安卓基本上使用X5内核的播放器基本没多大问题，就是比较多小坑点有兴趣的同学可以留言我会开多一篇博。这个video不陌生吧，w3c的例子，但是实际开发移动端都知道，很多对象属性PC端基本完美实现,然而移动端的问题就出来了在IOS 若写入< controls >,基本都会用...

2018-07-10 11:12:26 1302 1

原创 vue-cli build打包后CSS浏览器兼容前缀自动去除的问题

今天构建发现原本是很正常的一个兼容性写法渐变。结果npm run build项目时background: -webkit-linear-gradient(left,#ccc,#fff)background: -moz-linear-gradient(left,#ccc,#fff);background: -o-linear-gradient(left,#ccc,#fff);backgrou...

2018-05-30 15:32:37 2959 1

原创微信浏览器--IOS安卓video中的坑点

刚好项目中有使用video,便自己预先写了个demo发现在微信浏览器中用video会有不小的坑，网上大部分说的集中的主要是1、安卓/IOS播放自动全屏2、安卓播放完毕后的广告毕竟腾讯的<video id="video" width='100%' height="100%" controls src="我是资源路径" poster="我是封面图" x5-plays...

2018-05-15 18:35:57 2443

项目完成，抽空出来总结一些遇到的问题。我罗列一下大家通过网上途径一步步查找解决办法后所带入的一个坑相信做过微信H5的都知道IOS二次分享会拼接一段‘form=……’的导致分享失败。其实不需要处理该url 只需要在wx:config认证的时候注意一点。POST请求可以直接传入url。GET请求则一定要将URLencodeURIComponent（url）那么还是有很多同学在做Vue项目的时候去用过...

2018-04-25 10:48:15 2267 2

原创微信小程序之富文本图片适应

一开始小程序还没有富文本组件，用的都是第三方的，但是毕竟占资源嘛。好在推出了rich-text组件。只需要传入String/Array即可。长话短说。那么如何让图片自适应页面而不出现超出屏幕的情况呢。content='富文本'content.replace('<img', '<img style="max-width:100%;height:auto" ') //防止富文本图片过大会...

2018-04-16 19:25:17 8563 1

原创微信浏览器中出现拖动元素显示外层的情况

直接阻止Body的确可以很好的实现防止拖动。但是会出现子元素无法拖动的现象。document.body.addEventListener('touchmove', function (e) { e.returnValue = true; }, false);其实只要针对某个元素的ID起禁止拖动行为即可。若需要恢复。document.addEventListener('t...

2018-04-09 15:19:07 608

原创微信小程序wx.createInnerAudioContext()取消回调监听

相信大家在看文档的同时会发现wx.createInnerAudioContext()中不陌生。，但是有时候会发现在二级页面新建了这些事件之后。即使页面卸载也依然会执行回调。。其实官方是有取消回调事件的API的。只是没有写在小程序写在了。。小游戏。https://mp.weixin.qq.com/debug/wxagame/dev/document/media/audio/InnerAudioCo...

2018-03-05 12:20:10 2820 3

原创微信小程序之音频播放-wx.createInnerAudioContext()注意点

咱们先看看官方示例地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/createInnerAudioContext.html创建innerAudioContext对象。autoplay自动播放开启，src音频路径onPlay()以及onError()播放以及错误回调。以上理解的不难懂。那么问题来。大部分人...

2018-03-02 15:48:11 49437 12

转载剖析Vue原理&实现双向绑定MVVM

原文-代码地址 https://github.com/DMQ/mvvm本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看

2018-02-01 10:54:29 263 1

转载关于HTML/CSS/JS常见兼容性整理

13 标准网页布局的兼容性处理标准网页设计的最大挑战不在于技术本身，而在于浏览器兼容性处理。所谓浏览器兼容问题，就是当我们使用不同的浏览器（如IE 7、IE 6、Firefox等）访问同一个页面时，可能会出现不一致的情况，出现这种现象的原因有很多种，但根本原因就是浏览器对于技术支持的标准不同造成的。IE浏览器对于标准技术的支持是很不完善的，这些问题可以分为两种：一种是IE支持

2018-01-31 18:40:50 2659

转载 CSS经典布局

作者：brianwaybrianway.github.io/2017/05/18/css-layout-classical-problems/本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Flexbox 布局，等等。CSS 基础知识

2018-01-22 10:20:47 6123

转载 ES8语言规范发布

什么是 ES8ES8 是 ECMA-262 标准第 8 版的简称，从 ES6 开始每年发布一个版本，以年份作为名称，因此又称 ECMAScript 2017，简称 ES2017。每年一个版本两个版本之间间隔时间太久（从 ES5 到 ES6 经历了 6 年）会有以下两个问题：有很多早已讨论完毕的特性需要等到标准的大版本发布才能进入标准有一些特性本身比较

2018-01-22 10:18:56 2034

转载微信小游戏

原文：https://segmentfault.com/a/1190000012646888觉得分析的不错收藏一波！1.前言前天一个跳一跳小游戏刷遍了朋友圈，也代表了微信小程序拥有了搭载游戏的功能（早该往这方面发展了，这才是应该有的形态嘛）。作为一个前端er，我的大刀早已经饥渴难耐了，赶紧去下一波最新的微信官方开发工具，体验一波小游戏要如何开发。我们欣喜地看到可以直接点击小游戏体验一下，而且官方

2018-01-18 12:05:15 630

原创 Vue 服务端Cookies删除问题

一般在我们做项目时，我们都会通过POST请求拿到服务器给到的set-Cookies，保存在浏览器的Cookie里这里需要明确一点。缓存有三类cookie、 sessionStorage 、localStoragecookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册

2018-01-18 10:49:26 5598 3

原创 Vue axios post请求

首先咱们要明确一点，本地测试记得先处理跨域，可以在我上一篇文章看到处理完跨域问题，本地测试POST 需要注意以下几点：1、记得全局设置Cont-Type请求头axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';2、import qs from 'qs'; 并且在P

2018-01-11 13:46:57 2042

原创 Vue 跨域处理

假设咱们的请求url地址是 http://sourcemyx.com/api-dsm第一步：找到第二步：proxyTable: { '/api-dsm': { target: 'http://sourcemyx.com/api-dsm', pathRewrite: { '^/api-dsm': '' }

2018-01-11 13:40:54 1035

原创微信小程序-IOS时间戳坑解决方法

后台传给我的时间是"2017-08-08 10:30:40"计算时间戳的话 Date.parse("2017-08-08 10:30:40")安卓端和PC是可以完美显示的，但是IOS这个妖艳*货，是国际时间不是中国时间很多网上的方法都是让大家用正则把所有 “-”换成“/”，别试了还是不行的。。所以博主经过一轮小波折想出了个完美兼容所有平台的时间戳

2018-01-04 11:05:14 5041 3

原创整理系列-时间戳，时间格式年月日，时间差几天前、几月前的方法封装

后台给的时间格式是"2017/11/28 11:20:00"而产品UI那边要求在前端显示的是 11月28日刚刚于是便封装了个便于使用的方法直接调用var time = "2017/11/28 11:20:00";getDateTimeStamp(time);//结果返回的应该是距离该日期的时间段刚刚、几天前、几月前、几年前、几小时前。

2017-12-26 10:36:48 525

原创顿悟系列-JS对象键值修改,删除

在Angular开发中，遇到了JS对象键值对的知识实际运用，不常见，但实用假设我们需要把var a = {a:"张三",b:"24",c:"帅哥"}a这个对象的键值全部改变自己所想要的值。比如说 {名字:"张三",年龄:"24",颜值:"帅哥"}则我们需要把 a中的值保存至数组中。所需要的键值也保存在数组中。var keyarray = [名字、年龄、颜值]

2017-12-15 11:41:13 4898 2

原创多行文本省略/单行文本

多行文本.note_item text{ display: -webkit-box; font-size:28rpx; color:#000000; line-height: 40rpx; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:3;

2017-12-07 09:41:50 260

原创随笔记下100个常用JS

1.输出语句：document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)5.得到表单中元素的名称和值:document.getElementById("表单

2017-11-13 16:54:22 318

原创浮点数加减乘方法封装~

网上的都存在一些问题，我完善了一下直接调用方法即可传入acg1,acg2两个参数即可/数据相加function Add(arg1, arg2) { var r1, r2, m, n; try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } try { r2 = arg2.toStri

2017-10-25 14:08:03 221

原创正则表达式-身份证验证

//正则表达式终极版 var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/;

2017-10-18 18:09:05 509

原创微信小程序之Data当前日期坑

获取当前日期。var userDate = new Date().toLocaleDateString()注意:微信小程序中手机的地区版本差异会导致不同的格式从而出现一些日期的计算出现差错所以为了避免这种情况我建议大家vardate= new Date();var myDate = date.getFullYear() + '-' + (date.g

2017-10-09 17:11:14 10922 1

原创微信小程序-拒绝授权友好的交互反馈方式

首先在全局定义一个判断空数组的方法.// 是否为空对象function isEmptyObject(e) { var t; for (t in e) return !1; return !0}在page定义一个授权判断// 判断是否是第一次授权，非第一次授权且授权失败则进行提醒 checkSettingStatu: function

2017-09-28 10:41:19 1335 1

原创微信小程序-获取屏幕可显示尺寸-全布局需要的

获取当前用户屏幕可显示尺寸在wxss中可以在page{overflow:hidden;}防止页面1/2px的滚动onLoad: function (options) { var that = this // 获取系统信息 wx.getSystemInfo({ success: function (res) {

2017-09-26 15:18:50 9044

原创微信小程序获取下标

在wxml页面中，对需要获取下标的节点插入:data-index="{{index}}"例:{{item.xx}}js中对应下标事件触发，直接获取触发事件元素的下标。e.currentTarget.dataset.index

2017-08-07 09:42:24 10590 7

原创 JQ中异步上传图片预览

亲测可以用。点个顶~谢谢HTML部分JS部分 $("#file0").change(function(){ var objUrl = getObjectURL(this.files[0]) ; console.log("objUrl = "+objUrl) ; if (objUrl)

2017-05-17 15:14:10 470

原创 HTML空格

nbsp; 它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

2017-05-05 09:22:45 1504

转载什么是Git?(看到大牛的解释分享一下)

Git是目前最先进的版本控制系统，拥有最多的用户数量并管理着数量庞大的实际软件项目；风靡全球的Github更是让Git版本控制系统名声大震。什么是版本控制系统？如果对“版本控制”没有概念，那真是没法用Git。所以我们来看一个例子：假设大四毕业生小张在写毕业论文，写好初稿后经常删改，甚至还会在第二天把前一天删掉的东西找回来。如果他动点脑子，就不会只在一个文档中改来改去，而

2017-04-20 11:37:11 349

原创关于Jquery WEUI Popup的笔记

Popup打开弹出层的按钮class="open-popup" data-target="#bottomb">打开弹出层其中 class='open-popup' 和 data-target="#bottomb"两个属性不可缺少，前者表示点击链接需要打开一个 popup，后者是这个popup的选择器底部弹出层（默认是隐藏不要乱加样式）

2017-04-13 17:05:41 12875 1

原创关于JQ JS的延时方法笔记

$("类名/ID名").click(function(){ setTimeout(function () { self.location=document.referrer; //两秒后跳转回上一个页面并刷新 }, 2000);});//记住 settimeout和setinterval的根本区别settimeout: 页面不刷新该定时器只会执行一

2017-04-13 14:58:12 591

原创 px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持

px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。vw：viewpoint width，视窗宽度

2017-04-13 10:31:37 2053

bootstrap-paginator.js

js new image缓存图片后，赋值至dom元素中 又加载了一次？

js new image缓存图片后，赋值至dom元素中又加载了一次？