- 博客(12)
- 收藏
- 关注
RSS订阅原创 html5生成图片、海报 canvas 2d画布的应用
常用APIfill() 填充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
430
原创 前端下载文件流形式的文件
原生保存将数据转换为链接形式，模拟点击发生跳转进行下载。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
391
原创 H5在微信端锁定背景滚动
在微信浏览器中，未做处理时，滚动到顶部，依然能滚动一段距离。现在通过一些方式，来阻止背景的滚动。document.addEventListener('touchmove', function(e) { e.preventDefault()}, { passive: false })
2021-03-25 11:38:28
435
原创 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
155
原创 移动端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
639
原创 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
207
原创 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
2548
原创 支付宝小程序跳回小程序后状态数据问题
问题产生使用插件时，先跳转到指定的收藏的小程序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
5836
原创 位运算的实践运用
判断一个数的奇偶（|）var n = 2n | 1 // 0var n = 1n | 1 // 1向下取整（~~，>>，<<，>>>，|）~~1.2 // 1~~1.8 // 11.8 >> 0 // 11.14 << 0 // 11.14 | 0 // 11.14 >>> 0 // 1 (>>>不可对负数取整)2的倍数乘除法（<<，>>）1.
2020-10-25 00:36:57
120
原创 前端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
615
原创 vue-cli打包css引用图片路径问题
将项目引用绝对路径改为相对路径，修改 build 中 assetsPublicPath ：// config/index.js'use strict'const path = require('path')const packageJson = require('../package.json')// 构建文件夹const dir = 'dist/' + packageJson.namemodule.exports = { dev: { // Paths assetsS
2020-10-18 22:14:56
742
1
原创 H5与微信小程序web-view通信
微信小程序里的代码如下：<!-- index.wxml --><web-view src="" bindmessage="msg"></web-view>// index.jsApp({ msg(e) { console.log(e) }, onShareAppMessage() { return {} }})H5的代码如下：<!-- index.html --><body> <
2020-10-17 23:57:56
605
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人