- 博客(39)
- 收藏
- 关注
RSS订阅原创 Electron 去掉标题栏并设定可拖动
1、去掉标题栏const { BrowserWindow } = require('electron');let mainWin = new BrowserWindow({ width: 800, height: 800, frame: false, // 去除边框})mainWin.show();2、设置可拖动可以在html 元素中设置可拖动区域。给元素设置样式： style='-webkit-app-region: drag;' 用于设定该部分为可拖
2022-04-14 17:30:33
3099
原创 nginx rewrite 重定向
最近开发 H5，遇到的问题：微信 JSSDK 分享接口如何分享支持网页授权的拼接地址？JSSDK 分享的链接域名必须与当前公众号配置的 JS 安全域名一致，但获取微信用户信息又必须用微信指定的规则拼接访问地址，那就真的没办法实现了吗？（陷入僵局，跳不出这个????了）后来有网友提供了思路：分享自己服务器上的 URL，在用户点开的时候，进行重定向即可。（另辟蹊径，醍醐灌顶）查资料：1、rewrite 是 Nginx 服务器提供的一个重要功能，可以实现 URL 重定向功能。2、理解地址重写和
2022-01-07 16:41:12
2066
转载 IOS 微信端 视频自动播放问题解决方法
参考链接 ： https://blog.csdn.net/qq_45504161/article/details/99741844问题描述：由于浏览器限制，视频不能够自动播放，需要用户手势触发才可以。解决方法：通过微信浏览器提供的WeixinJSBridgeReady做桥接后就可以绕过这一限制。上面链接中的操作比较繁琐，在此给出简化版本（亲测可用）：function doPlay(){ WeixinJSBridge.invoke('getNetworkType', {}, functi
2021-10-12 20:07:35
1552
转载 iOS 14.6 IndexedDB open 不触发回掉函数
在移动端使用一般会使用indexedDB，来缓存数据，来提高用户体验。在之前一直都很正常，但是更新到14.6之后，不正常了。经多次测试排查，确认是IndexedDB 既没有触发onerror也没有触发onsuccess，导致程序一直在等待。目前发现很多人都遇到此问题，目前没有很好的解决手段。 只能设置一个超时的时间，时间到了，就当失败处理。// 类似伪代码async openDb(){ return new Promise(resolve => { const request
2021-07-05 15:33:03
477
4
原创 Vite+Vue3+TS 项目搭建
1、使用 Vite 初始化项目直接在命令行执行以下命令：yarn create @vitejs/app出现以下错误：升级node版本即可：sudo n stable再次运行命令，输入项目名称，选择vue、ts即可。进到该项目目录下，安装依赖，执行 npm run dev 即可在本地服务器进行预览调试。2、...
2021-05-12 18:19:25
1891
2
翻译 Live2D 1- 如何直接使用 CubismWebFramework 的方法
Live 2D (2020/01/30)Cubism SDK for WebCubism SDK for Web中包含的示例项目使用SDK包的“ / Framework”目录下的处理来处理Cubism模型。在创建处理Cubism模型的项目时，可以基于示例项目使用它，但是在现有应用程序或您自己的引擎中实现它时，您可能希望直接处理Cubism Web Framework的API。但是，由于包中包含的示例项目具有很高的功能，因此仅通过引用就很难理解和隔离该结构。接下来，我们将介绍直接调用
2020-09-16 16:58:40
1369
转载 前端性能监控-window.performance
在同样的网络环境下，有两个同样能满足你的需求的网站，一个唰的一下就加载出来了，另一个白屏转圈转了半天内容才出来，如果让你选择，你会用哪一个？Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。页面的性能问题是前端开发中一个重要环节，但一直...
2019-05-06 18:38:08
2220
原创 WebGL 阴影的实现
1、实现阴影的原理：原理：根据光源与物体之间的距离（也就是物体在光源坐标系下的深度z值），来决定物体是否可见。如下图，同一条光线上有两个点P1、P2，由于P2的z值大于P1，所以P2在阴影中。2、如何实现❓需要使用两对着色器：(1)一对着色器用来计算光源到物体的距离；(2)另一对根据(1)中计算出的距离绘制场景。(2)如何使用(1)中的距离❓使用一张纹理图...
2019-04-16 19:03:00
1052
原创 Electron 主进程、渲染进程及进程间的通信
简介Electron是由GIthub开发，用HTML、CSS、JS来构建跨平台桌面应用程序的一个开源库。Electron将Chromium和Nodejs合并到同一个运行时环境中，并将其打包为Mac、Windows、Linux系统下的应用。可以将其看作是一个由JS控制的迷你版的Chromium浏览器。主进程、渲染进程Electron打包的应用包含两个部分：Electron的环境(nod...
2019-03-21 15:04:59
4981
1
转载 URL.createObjectURL和URL.revokeObjectURL
一.URL.createObjectURLURL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.objectURL = URL.createObjectURL(blob || file);参数:File对象或者Blob对象这里大概...
2019-03-13 18:57:10
446
转载 Three.js raycaster - 拾取物体
Three.js中raycaster是射线，用于拾取物体的。这是官方例子:var raycaster = new THREE.Raycaster();var mouse = new THREE.Vector2(); function onMouseMove( event ) { mouse.x = ( event.clientX / window.innerWidth ) ...
2019-02-25 15:09:16
1299
转载 gulp常用插件
转自：林鑫匹配符 *、**、！、{}gulp.src('./js/*.js') // * 匹配js文件夹下所有.js格式的文件gulp.src('./js/**/*.js') // ** 匹配js文件夹的0个或多个子文件夹gulp.src(['./js/*.js','!./js/index.js']) // ! 匹配除了inde...
2018-09-28 17:33:22
250
2
转载 Mac下配置Apache服务器
有的时候，我们需要在内网工作组中分享一些文件或是后台接口没有及时给出，你又想要模拟真实数据，直接在项目里创建plist也可以做到这种需求，但难免让工程变得冗余且看起来比较Low。这个时候就看出配置本地服务器的重要性了，不用时刻等着后台接口的更新，只需要根据接口文档自己模拟真实数据，即方便又显得高大上。Mac自带了Apache环境，我们要做的只是稍微配置一下。环境：Mac OS X 10.1...
2018-08-14 16:31:51
215
转载 WebAssembly 现状与实战
为什么需要 WebAssembly自从 JavaScript 诞生起到现在已经变成最流行的编程语言，这背后正是 Web 的发展所推动的。Web 应用变得更多更复杂，但这也渐渐暴露出了 JavaScript 的问题：语法太灵活导致开发大型 Web 项目困难； 性能不能满足一些场景的需要。针对以上两点缺陷，近年来出现了一些 JS 的代替语言，例如：微软的 TypeScript 通过为 ...
2018-08-10 16:30:11
2200
转载 Mac上更新Ruby
在项目中要适配iOS10，要使用cocoapods更新第三方库，而目前使用的ruby版本是Mac系统自带的1.8.7。所以需要对ruby进行升级。这里使用rvm对ruby进行升级，升级过程如下：1、安装 rvmrvm：Ruby Version Manager,Ruby版本管理器，包括Ruby的版本管理和Gem库管理(gemset)。curl -L get.rvm.io | bash -s...
2018-07-31 17:29:37
2379
转载 videojs播放rtmp流提示 No compatible source was found for this video.
videojs播放rtmp视频流，提示 (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video.如下： 解决方案：1.将文件放到服务器上，就是别用本地文件的方式打开2.用的是chrome，将网站的flash设置成默认允许，然后刷新下，就可以了。像这样设置 ...
2018-07-19 15:11:07
25620
3
转载 向量点乘相关公式推导
1.向量点乘公式推导和几何解释一般来说，点乘结果描述了两个向量的“相似”程度，点乘结果越大，两向量越相近。01.向量点乘(dot product)是其各个分量乘积的和，公式：用连加号写：02.几何解释：点乘的结果是一个标量，等于向量大小与夹角的cos值的乘积。a•b = |a||b|cosθ如果a和b都是单位向量，那么点乘的结果就是其夹角的cos值。a•b = cosθ03.推导过程：假设a和b都...
2018-06-29 16:07:21
25516
3
转载 Mac 安装 Android Studio
第一步：下载、安装JDK1.java8下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html2.如下图以8u152为例，选择macOS版本。3.安装JDK在Windows上安装完JDK还需要配置环境变量，但是在Mac上非常方便了双击下载好的dmg 文件，依次执行以下步骤，即可安...
2018-06-21 11:12:59
11686
1
原创 WebGL 术语集锦
()GLSL ES：OpenGL ES 着色器语言，ES表示嵌入式系统(Embedded System)。程序对象(program object)：管理着色器对象的WebGL对象。画布(canvas)：HTML5元素，用以在网页上绘制图形。上下文(context)：实现了在canvas绘图的方法的JavaScript对象。完整性(completeness)：在帧缓冲区上下文中使用，表示帧缓冲区是否...
2018-06-20 15:44:17
395
转载 Web性能压力测试工具之WebBench详解
PS：在运维工作中，压力测试是一项很重要的工作。比如在一个网站上线之前，能承受多大访问量、在大访问量情况下性能怎样，这些数据指标好坏将会直接影响用户体验。但是，在压力测试中存在一个共性，那就是压力测试的结果与实际负载结果不会完全相同，就算压力测试工作做的再好，也不能保证100%和线上性能指标相同。面对这些问题，我们只能尽量去想方设法去模拟。所以，压力测试非常有必要，有了这些数据，我们就能对自己做维...
2018-06-13 16:07:38
179
转载 Web服务器性能/压力测试工具http_load、webbench、ab、Siege使用教程
可以通过压力测试对网站及服务器性能进行高压测试，暴露出其所存在的问题。从而对服务器及网站进行调整和优化。注意在进行压力测试时要在单独的机器上进行不要在待测服务器上进行。目前主要有apache的ab、http_load、webbench、Siege等。一、http_load程序非常小，解压后也不到100Khttp_load以并行复用的方式运行，用以测试web服务器的吞吐量与负载。但是它不同于大多数压...
2018-06-13 15:59:18
149
转载 html5 获取摄像头和麦克风的案例
原文：http://blog.csdn.net/qq_30100043/article/details/77727233使用的接口api通过navigator.mediaDevices.getUserMedia()方法进行获取 该MediaDevices.getUserMedia()方法提示用户允许使用产生MediaStream包含所请求类型的媒体的轨道的媒体输入。该流可以包括
2017-12-14 14:58:37
1770
1
原创 Threejs 拓展之二进制数组
在Threejs 的学习过程中，分配缓存区域时需要调用JavaScript中的Uint16Array、Float32Array等对象来分配连续的内存空间。看到Uint16Array、Float32Array时，感觉之前学了假的JavaScript。查资料发现，《ES6标准入门 第二版》的第十二章二进制数组 详细的介绍了上面的几个对象。二进制数组二进制数组(ArrayBuffer
2017-12-12 16:43:47
2323
1
原创 Threejs 三大组件 -- 场景、相机、渲染器
Three.js 中，要渲染物体到网页中，必备3个组件：场景 scene、相机 camera、渲染器 renderer。场景 scene场景是所有物体的容器。在Threejs中，场景只有一种，用 THREE.Scene 表示，构建场景如下：var scene = new THREE.Scene();场景组件包括：相机 — 决定哪些东西要渲染到屏幕上光源 — 对材
2017-12-06 16:20:10
11610
2
转载 Threejs 的前世今生及基本概念
原文：http://blog.csdn.net/lijunfan1994/article/details/52370629近年来web得到了快速的发展。随着HTML5的普及，网页的表现能力越来越强大。网页上已经可以做出很多复杂的动画，精美的效果。 但是，人总是贪的。那么，在此之上还能做什么呢？其中一种就是通过WebGL在网页中绘制高性能的3D图形。OpenGL,WebGL到Th
2017-12-04 18:52:02
5315
原创 sass或scss文件如何避免被编译？
偶然碰到 这种情况。最笨的方法，使用gulp 配置，去编译指定的SCSS或SASS文件。最简单直接的方法，就是在文件名前面加一个下划线，就能避免被编译。照常引入这个文件，省略掉文件名前面的下划线。//原文件名： _colors.scss@import "colors"; // 引入时不用加下划线⭐️ 同时注意：同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如：_co
2017-12-01 11:22:47
2504
原创 video — 移动端适配
最近做微信内H5分享页<内嵌视频>，适配移动端时，欲哭无泪，各种坑。来，现在开始填坑。移动设备：iPhone 6s(ios 11.1)，GIONEE S10(Android 7.0)。 自动播放PC端视频自动播放，在video标签里加上“autoplay”属性即可；但该属性在移动端不兼容（移动端为了避免浪费用户的网络流量，默认不允许媒体文件自动播放）。<vi...
2017-11-13 19:09:01
12459
4
原创 {} == {} 结果为什么是false？
var a = function() {console.log(11)};var b = function() {console.log(11)};console.log( a==b ); //falseconsole.log( {}=={} ); //falseconsole.log( []==[] ); //false如你所见，上述三个例子结果都为false。相信很多人都碰到
2017-10-25 16:28:18
10786
8
原创 js 中双叹号(!!)的作用
双叹号( !! ) 一般用来将后面的表达式强制转换为布尔类型的数据，true / false。因为js是弱类型的语言（变量没有固定的数据类型），所以有时需要强制转换为相应的类型，比如：a = parseInt('3456'); //显示转换b = someObject.toString(); //显示转换，将对象转换为字符串c = "3456" + 0; //隐式转换，转换为数
2017-10-25 11:46:16
1357
原创 Object.keys()
在实际开发过程中，有时需要知道对象的所有属性，除了 (for...in...) 外，原生js 给我们提供了一个更优雅的方法：Object.keys( object)。☆ 传入对象， 返回 包含对象可枚举属性和方法的数组var obj = {'a': 'Beijing', 'b': 'Haidian'};console.log(Object.keys(obj));
2017-10-24 16:45:33
9501
2
转载 package.json 详解
package.json 文件可以手动编写，也可以使用 npm init 命令自动生成。使用 npm init 命令时，需要回答一些问题，然后会在当前目录生成 package.json 文件。所有问题中，只有项目名称(name)和项目版本(version)是必填的，其他为选填。概述下面是一个最简单的 package.json 文件，只定义了两项元数据：项目名称和项目版本。
2017-10-24 14:39:08
505
原创 Grunt 配置文件
☆ 安装Grunt 及 插件npm install grunt grunt-contrib-concat grunt-contrib-connect grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch connect-livereload --save-dev☆ Gruntfile.jsmodule.exports =
2017-10-11 11:59:15
366
原创 H5 2D渲染引擎—Pixi.js 精灵的位置、大小、旋转、移动
根据 H5 2D渲染引擎—Pixi.js 渲染器、舞台和精灵的创建，创建精灵（不做其他设置）并添加到渲染器后，精灵默认的位置是在渲染器的左上角（x=0，y=0），大小为原图片大小。定位可以通过改变精灵的x、y的属性值来调整它的位置。sun.x = 200;sun.y = 100;或者sun.position.set(200, 100);效果：大
2017-09-01 14:55:29
6129
原创 Mac上画图工具
工作中或者生活中，偶尔需要画个简图，那mac怎么方便快捷的画图呢？首先，使用“预览”方式任意打开一个图片；屏幕顶部“文件”-->“拍摄屏幕快照”-->“从所选部分”进行截图（任意截取即可）。截取之后，会弹起一个未命名的窗口；然后，从“编辑”菜单选择“全选”，然后delete清空画布。再按一下下图的箱子按钮，绘图工具栏就出来啦啦啦~画完之后，保存就
2017-08-31 16:59:24
15635
原创 H5 2D渲染引擎—Pixi.js 渲染器、舞台和精灵的创建
此文章的思路：1️⃣ 创建渲染器 在页面上创建动画的第一步就是创建渲染器，也就是动画播放的区域，Pixi中的 renderer函数 或者 application类 会自动创建canvas画布来显示图像：① renderer函数var renderer = PIXI.autoDetectRenderer(256, 256);document.body
2017-08-31 11:32:01
4091
2
原创 H5 2D渲染引擎—Pixi.js简介及小demo
简介Pixi.js是一个快速的轻量级的2D动画渲染引擎，可以在浏览器里创建出丰富的交互式图形、动画和跨平台的游戏及应用程序等，主打支持硬件GPU渲染的WebGL API，如若浏览器不支持WebGL，Pixi则会回退使用Canvas来进行渲染。PixiJS的官网地址是：http://www.pixijs.com/PixiJS的开源地址是：https://github.com/pixi
2017-08-30 11:22:36
6004
1
原创 你了解js调试工具console吗？
对于我个人而言，在开发过程中需要监测某些表达式或者变量的值的时候，习惯使用console.log()将值打印到控制台。但console对象除了console.log()这个常用方法外，还有很多其他的方法。灵活运用这些方法，可以给开发过程增添许多便利。一、显示信息console.log('hello');console.info('信息');console.error('错误')
2017-08-29 11:29:23
406
原创 Git使用简介
简介Git是目前世界上最先进的分布式版本控制系统（没有之一）,用于敏捷高效地处理任何或小或大的项目。它采用分布式版本库的方式，不需要服务器端软件的支持。Git 与 SVN 区别点 专业叙述：（参考菜鸟教程：http://www.runoob.com/git/git-tutorial.html） 1、GIT是分布式的，SVN不是：这是GIT和其它非分布
2017-08-28 14:45:46
496
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人