前端开发
onabort: 当视频加载被中止时触发。oncanplay: 当视频可以播放时触发。oncanplaythrough: 当视频可以连续播放且无需停顿时触发。ondurationchange: 当视频的时长发生改变时触发。onemptied: 当当前视频被清空（资源被释放）时触发。onended: 当视频播放结束时触发。onerror: 当视频加载发生错误时触发。onloadeddata: 当视频的第一帧已加载时触发。onloadedmetadata: 当视频的元数据（比如尺寸和时长）加载完毕时触发。onloadstart: 当视频开始加载时触发。onpause: 当视频暂停时触发。onplay: 当视频开始播放时触发。onplaying: 当视频正在播放时触发。onprogress: 当视频正在下载时，会定期触发，以报告下载进度。onratechange: 当视频播放速率发生改变时触发。onseeked: 当用户完成对视频的跳转（seek）时触发。onseeking: 当用户开始对视频进行跳转（seek）时触发。onstalled: 当浏览器尝试获取媒体数据，但数据不可用时触发。o ...
前端开发
1、全局过滤器
单起一个 js 文件，编写函数main.js 内进行配置组件内使用
// filter.js
let random30 = (number) => {
if (parseInt(number) < 30) {
number = Math.round(Math.random() * 20 + 30);
}
return number;
};
export default { random30 };
// main.js
import filter from "./api/filter";
Object.keys(filter).forEach((key) => Vue.filter(key, filter[key]);
// 组件内使用
<!-- 直播间人数，如果不满足30人，生成30-50的随机数 -->
<span style="font-size: 14px; color: #999999">
{{ list.roomPeopleTota ...
前端开发
vue 路由守卫
1、vue 路由守卫
1 全局守卫2 路由独享守卫3 组件内守卫
2、完整的导航解析流程
3、路由守卫中next带参数和不带参数的区别假设参数是 '/login'在Vue.js, 路由守卫用于在路由切换前或切换后执行特定的逻辑。next() 和 next('/login') 是两种不同的方式来控制路由守卫的行为。
next():当你在路由守卫中调用 next() 时，表示允许当前的路由切换继续进行。这通常用于在一个路由守卫中执行完必要的逻辑后，允许路由继续切换到下一个路由。例如，在一个验证用户登录状态的守卫中，如果用户已登录，你可以调用 next() 来允许切换到下一个路由。示例：
router.beforeEach((to, from, next) => {
if (userIsLoggedIn) {
// 用户已登录，允许继续路由切换
next();
} else {
// 用户未登录，重定向到登录页面
next('/login');
&# ...
移动端开发
微信小程序开发实战完全指南微信小程序作为一种轻量级的应用形态，凭借其无需安装、即用即走的特点，在移动应用开发中占据重要地位。本文将系统性地介绍微信小程序开发的核心技术，包括云开发、组件通信、性能优化等关键知识点。
1. 微信小程序云开发详解1.1 云开发基础概念微信小程序云开发是腾讯云与微信小程序团队联合推出的免鉴权、免服务器的一站式后端服务。开发者无需搭建服务器，即可使用云数据库、云存储、云函数等能力。
1.2 云函数开发创建云函数// cloudfunctions/getRunData/index.js
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV // 使用当前云环境
})
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
// 获取微信运动数据
try {
...
前端开发
1、canvas点连线生成图片canvas点连线生成等值线就是将数组内索引为0的元素设置为起点，moveTo该点其余点使用lineTo进行连接，当涉及到多维数组的时候，需要进入到数组的最内部循环进行上述操作注意：如果需要绘制的图形铺满整个画布，则需要先计算出所有坐标点的极值点，即最大最小的x、y，再结合画布width和height，算出每个方向上的缩放倍率scaleX和scaleY，moveTo和lineTo的时候需要将缩放倍率计算进去
let xmin, xmax;
let ymin, ymax;
let xArr = [];
let yArr = [];
let scalex, scaley;
function drawChina() {
// 解析边界线
let obj = fs.readFileSync("./data/china.json");
let object = JSON.parse(obj);
let features = object.features;
// 计算极值
for (let i = 0; i < fea ...
前端开发
1、组件封装// 组件封装
<template>
<div>
<!--本地导入弹窗-->
<div v-show="showLocalImport">
<el-dialog title="数据导入" :visible.sync="showLocalImport" class="localImportModal">
<div class="requirement">
<h3>导入要求</h3>
<slot></slot>
<h3>模板表头(点击预览)</h3>
<el-image style="width: 100%; height: 100px" :src="url" :preview-src-list="srcList"> </el-image>
</div>
<div class="btnGroup">
<el-button class="btnContainer" type="success ...
前端开发
nextTick(() => {
document.querySelectorAll('table').forEach((table, idx) => {
// 创建div容器并插入到表格后面
const div = document.createElement('div')
div.className = 'divTableContainer'
// div.style.margin = '20px';
// div.style.padding = '10px';
// div.style.border = '1px solid #ddd';
table.parentNode.insertBefore(div, table.nextSibling)
// 转换表格
convertTableWithMergedCells(table, div)
})
function convertTableWithMergedCells(tableElement, targetConta ...
移动端开发
{
"name": "abcd",
"version": "1.0.0",
"private": true,
"description": "",
"templateInfo": {
"name": "default",
"typescript": false,
"css": "less"
},
"scripts": {
"build:weapp": "taro build --type weapp",
"build:h5": "taro build --type h5",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"lint-staged": "lint-staged",
"lint": "eslint --fix **/*{.js,.vue,.ts}"
},
"browserslist": ["last 3 versions", ...
前端开发
function isElementVisible(element) {
const style = window.getComputedStyle(element);
// 元素本身的可见性判断
const isDisplayVisible = style.display !== "none";
const isVisibilityVisible = style.visibility !== "hidden";
const isOpacityVisible = style.opacity !== "0";
// 检查元素是否在视口内
const rect = element.getBoundingClientRect();
const isInViewport =
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && ...
桌面应用开发
在创建 electron 项目的时候，在 package.json 文件内指定入口文件是 background.js（任何名称都可以，确保引用正确就可以）
$fontSize: 1.4rem;
.scroll{
/* 必须要用 #{}把变量包起来 */
calc(100% - #{$fontSize});
}
当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改) 事件。
出于兼容性原因，请确保使用 document.addEventListener 而不是 window.addEventListener 来注册回调。Safari <14.0 仅支持前者。
document.addEventListener("visibilitychange", () => {
// 浏览器、webview进入前台的时候
if (document.visibilityState == "visible") {
console.log("显示");
}
// 浏览器、webview进入后台的时候
if (document.visibilityState == "hidden") {
console.log("隐藏");
}
});
