-
1. 音视频基础 本文将给大家进行音视频基础的常规知识点的梳理。当然,短短的一篇文章并不能让大家立即变成音视频领域的专家,但这些知识点已经基本涵盖了音视频的入门知识。我们将按照下面的内容给大家 * 音视频的基本概念 * 音视频播放的流程 * 音视频编解码 * 音视频封装格式 * 音视频常见的传输协议 1.1 音视频基本概念 首先,我们需要先主了解下一些音视频常见的技术概念以及简单的原理。 1.1.1 采样率 采样,是指把物理信号转化为数字信号的过程。采样频率,定义了每秒从连续信号中提取并组成离散信号的采样个数,单位为赫兹(Hz)。形象来说,采样频率是指将模拟信号转换成数字信号时的采样频率,也就是单位时间内采样多少点。
-
-
本篇记录了阅读 Compiler.js [https://github.com/webpack/webpack/blob/v4.41.0/lib/Compiler.js] 过程中的一些笔记。(Webpack版本4.41.0) 阅读前需要先对tapable有一定的了解,可参考 Tapable github [https://github.com/webpack/tapable] . 这里主要对webpack调用了Compiler.run()到资源输出完毕后经历的过程及其代码进行了一些梳理。 代码特点 webpack的异步代码基本采用回调函数的形式进行书写,tapable实际上也是注册callback的形式,需要仔细区分各个部分对应的callback。 Compiler类成员变量的类型、含义都比较清晰,也有足够的文档支持,这里不做具体解读了。 大致流程 Compiler中的方法调用顺序大致如下(以.run为入口): Compiler.run(callback) 开始执行构建 Compiler.readRecord(callback) 读取之前的构建记录
-
需求简介 腾讯企鹅辅导在学生上课结束后推送“学习报告”,是课程所提供的一项重要服务。家长在“学习报告”中能查看孩子上课时间及互动情况,答题及掌握知识点,作业考试分数,班级排名等诸多数据,继而让学生家长及时掌握孩子的学习情况。 此次改版升级是针对旧学习报告的的数据和展示进行的一次优化:增加考试模块、知识点采用更简单的表达形式、在视觉交互上更加年轻活泼、并运用了更多数据图表可视化在其数据展示中。 设计稿 考试模块-数据图表可视化的应用 1.数据可视化组件库的选择及应用 在考试模块中,需要展示学生成绩变化趋势的曲线图,而这需要用到第三方的可视化组件库,继而快速回忆起比较知名的几款:国外的HighChart,百度家的Echart,阿里的AntV(移动端F2)等。当然也希望腾讯有一天也能有同样知名好用的的可视化组件库。
-
定时器 说起 JavaScript 的定时器,相信大家一定很熟悉 setTimeout 和 setInterval 。 具体功能不再重述,定时器的作用主要是做延时任务。 并且,像我们熟悉知道的编程语言, Java 、 PHP , 都包含与生俱来的多线程能力,可以同时处理多个任务。 而 JavaScript 则设计成 单线程 结合 event-loop 的异步任务调度模式。 在这种特别的设计模式下, JavaScript 不得不依赖定时器,来应对不同场景的逻辑。 阻塞 也因为 JavaScript 是 单线程 的运行环境, 同时也带来了 代码运行阻塞 的副作用。 为了解决各种各样的时序场景, 就诞生了 setTimeout(fn, 0) 这一句代码。 在阅读代码时,我们会产生非常符合人类直觉的想法: 这里的 0 ,代表浏览器在 0 毫秒后执行任务 fn 。 或者:浏览器会立即后执行任务 fn 。 当然,以上的想法是 错误 的。注意,是 错误 的。 正确的解读当然是: 任务 fn 会添加到 event-loop 的事件队列。
-
前言 在小程序 textarea 组件上展示一个模态弹窗组件,会发现 textarea 中输入的文字内容,会直接穿透模态弹窗显示在最上面,而且还能点击输入文字。 限制 小程序 textarea 是由客户端创建的原生组件,由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制: * 原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。 * 后插入的原生组件可以覆盖之前的原生组件。 * 原生组件还无法在 picker-view [https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html] 中使用。 * 基础库 2.4.4 以下版本,原生组件不支持在 scroll-view [https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html] 、 swiper
-
前言 webpack提倡一切皆模块,所有类型的文件都可以经过文件加载器处理变成我们可加载的模块,那么这个文件加载器便是loader。 那么我们如何开发一个webpack loader呢,让我们一起探索探索吧~ 一、LOADER执行顺序 在开发loader之前,我们先了解一下webpack loader的执行顺序。 webpack是支持loader的链式调用的,即一个文件可以经多个loader处理。当一个文件使用多个loader处理时,他的处理顺序是倒序,即传入loader数组的从右到左执行。 例如,对于scss文件,我们的配置如下,那么它的执行顺序是sass-loader -》 css-loader -》 postcss-loader -》style-loader: module: { rules: [ { test: /\.scss|\.css/, use: [ 'style-loader', { loader: 'css-loader',
-
这篇分析,可能微信的同学来写会更合适。这里只是做了次体验,记录体验中遇到的问题以及一些想法。 简介 kbone 主要提供了编写 web 端代码,编译到小程序端的能力。 web 端采用的框架是 vue ,然后提供一个适配层在小程序端适配 web 端代码。详细介绍参考: https://github.com/wechat-miniprogram/kbone/blob/develop/README.md [https://github.com/wechat-miniprogram/kbone/blob/develop/README.md] 原理 BUILD阶段 kbone 提供了一个 webpack 插件,该插件在 vueLoaderPlugin 处理后继续处理 chunk ,添加小程序端特定方法的封装,以及 window 和 document 的注入,小程序端配置的注入。 RUNTIME阶段
-
前言 树形组件的需求,很多人遇到都觉得头疼、逻辑复杂,除了展示之外,还要有增删该查的逻辑。一般树形组件具有多个层级,如果当前层级有下一个层级,会有像 children、list 等属性,数据结构一般就是 const tree = [ { name: 'a', id: 1, }, { name: 'b', id: 2, children: [ { name: 'c', id: 3 } ] }, ] 界面大概就是这种: [https://user-gold-cdn.xitu.io/2019/7/21/16c13247c92936fa?w=908&h=502&f=png&s=108344]
-
介绍 X-BUILD 是面向小型项目的脚手架工具,通过终端命令最快在几秒钟初始化项目目录,解决开发中的自动化、性能、模块化、规范、自适应布局等问题,辅助你生成更优质的代码。它两部分组成:一部分为基于 Node.js 环境下的项目生成器,它是安装在全局环境下的 NPM 包;另一部分是基于 webpack 的开发和生产环境,对各类需求做了相应的配置。 特性 脚手架: 自动创建工程目录(自定义/快速) 自动安装依赖 / 自动初始化 Git 生成配置文件,提供更灵活的选择 开发/生产环境: 基于 webpack4 的开发环境 支持 CSS 预处理器(sass、less、stylus) 支持 TypeScript& TSLint 或 Babel & ESLint 提供可选的自适应解决方案 数据接口模块自动加载 适合环境 小型项目:周期短,无需使用大型框架开发并且还能保证项目的品质和效率。 高效学习:无论是 ES 新语法、TS 或 CSS 预处理器,避免复杂的搭建环境影响学习效率。