- 博客(12)
- 收藏
- 关注
RSS订阅原创 html5生成图片、海报 canvas 2d画布的应用
常用API fill() 填充 stroke() 线条 save() 保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 颜色属性 fillStyle 填充颜色 strokeStyle 线条颜色 font 字体样式 textAlign 以下canvas表示获取的dom，cxt = canvas.getContext('2d') 设置canvas.width = 750, canvas.height = 1334 绘制图形 矩形 fillRect(x,y,width,heigh
2021-03-25 15:35:31
562
原创 前端下载文件流形式的文件
原生保存 将数据转换为链接形式，模拟点击发生跳转进行下载。 apiDownloadFile(url).then(response => { const blob = new Blob([response]) // 包装数据 const dom = document.createElement('a') // 利用节点下载 dom.style.display = 'none' dom.href = window.URL.createObjectURL(blob)
2021-03-25 11:44:06
457
原创 H5在微信端锁定背景滚动
在微信浏览器中，未做处理时，滚动到顶部，依然能滚动一段距离。现在通过一些方式，来阻止背景的滚动。 document.addEventListener('touchmove', function(e) { e.preventDefault() }, { passive: false })
2021-03-25 11:38:28
587
原创 html、css文本溢出显示省略号
单行文本溢出省略号 <div class="ellipsis example">单行文本溢出省略号</div> .example { width: 90px; } .ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* text-overflow (显示省略符号来代表被修剪的文本) white-space (文本不会换行，文本会在在同一行上继续，直到遇到 <br&
2021-03-25 10:10:42
273
原创 移动端H5调试方法
Chrome Devtool 手机开启调试 手机与电脑连接数据线 开启开发者选项，开启USB调试 开启inspect debug 微信打开 debugx5.qq.com ， 信息 -> TBS settings 勾选 打开TBS内核Inspect调试功能 等。 打开调试窗口 Chrome进入 chrome://inspect/#devices ，在 Remote Target 下列表链接，点击 inspect 进入调试窗口。 注意：需要FQ 代理进入调试窗 在 ping.chinaz.co
2021-03-24 18:49:48
774
原创 npm、webpack、gulp多项目自动化构建、部署
多个不同的项目，可能共用一些组件或方法时，不需重新创建多个目录，初始化多个项目，减少重复操作。 文件结构 --build #用于构建的相关文件 |--build.js |--gulpfile.js |--utils.js |--vue-loader.js |--webpack.base.js |--webpack.dev.js |--webpack.prod.js --dist # 各个项目打包后的文件夹 |--project1 --publi
2021-03-24 17:58:43
322
原创 H5自动播放背景音乐（IOS和安卓）
安卓与IOS播放 安卓可以直接使用audio标签进行播放 <audio ref="sound" :src="bgm.mp3" loop /> const audio = document.querySelector('audio') audio.play() IOS端需要借助微信自带的事件进行播放 const audio = document.querySelector('audio') document.addEventListener('WeixinJSBridgeReady',
2021-03-23 18:35:31
2878
原创 支付宝小程序跳回小程序后状态数据问题
问题产生 使用插件时，先跳转到指定的收藏的小程序A中，此时，在小程序A中有一个按钮使用的url：alipays://platformapi/startapp?appId={appId}&page=pages%2Findex%2Findex再跳转到自己的小程序来，在Page外定义的变量，并没有重新初始化，即不是完全的重新启动应用 具体过程 在index有如下代码： // index.js // 事件订阅 const Emitter = require('/Emmitter') // 作为观察标记 l
2021-03-23 12:29:34
6970
原创 位运算的实践运用
判断一个数的奇偶（|） var n = 2 n | 1 // 0 var n = 1 n | 1 // 1 向下取整（~~，>>，<<，>>>，|） ~~1.2 // 1 ~~1.8 // 1 1.8 >> 0 // 1 1.14 << 0 // 1 1.14 | 0 // 1 1.14 >>> 0 // 1 (>>>不可对负数取整) 2的倍数乘除法（<<，>>） 1.
2020-10-25 00:36:57
187
原创 前端H5移动端自动适配
rem布局 使用 js 动态设置 font-size 原理：动态设置html根元素的font-size，其大小实际上是可视界面中宽度的1 / 10。 js代码如下： // REM布局 function setFontSize() { var _document = document, _documentElement = _document.documentElement, html = _document.getElementsByTagName('html')[0], w
2020-10-18 22:15:16
686
原创 vue-cli打包css引用图片路径问题
将项目引用绝对路径改为相对路径，修改 build 中 assetsPublicPath ： // config/index.js 'use strict' const path = require('path') const packageJson = require('../package.json') // 构建文件夹 const dir = 'dist/' + packageJson.name module.exports = { dev: { // Paths assetsS
2020-10-18 22:14:56
862
1
原创 H5与微信小程序web-view通信
微信小程序里的代码如下： <!-- index.wxml --> <web-view src="" bindmessage="msg"></web-view> // index.js App({ msg(e) { console.log(e) }, onShareAppMessage() { return {} } }) H5的代码如下： <!-- index.html --> <body> <
2020-10-17 23:57:56
786
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人