前端开发
本文转自掘金和github
1、掘金参考链接
2、github参考链接
前端开发
Vue组件通信完全指南Vue组件通信是Vue开发中的核心内容。本文将系统性地介绍Vue中各种组件通信方式,帮助你全面掌握组件间的数据传递技巧。
1. 父子组件通信1.1 父传子(Props)父组件通过props向子组件传递数据。
子组件接收:
<template>
<div class="operate">
<!-- i和data 是父组件传输过来的 -->
<i class="el-icon-bottom" @click="toNext(i, data)"></i>
<i class="el-icon-top" @click="toPrev(i, data)"></i>
</div>
</template>
<script>
export def ...
前端开发
// 页面加载进来的时候检测屏幕方向
window.addEventListener('load', function () {
// 在这里检测屏幕方向
console.log('屏幕方向:', window.orientation);
showOrHide()
});
let dom = document.createElement('div');
// 监听屏幕方向变化
window.addEventListener("orientationchange", function () {
showOrHide()
}, false);
function showOrHide() {
if (Math.abs(window.orientation) != 90) {
dom.style.width = '100%'
dom.style.height = '100%'
dom.style.background = '#fff'
...
前端开发
window.conf = {
traceid: "",
errorList: [],
timeList: {
httpts: [],
},
};
console.log("log/jsError");
let errordefo = {
t: "", // 时间戳
// n: 'js',
errMsg: "",
errMsg2: "",
// data: {}
};
function _error() {
setTimeout(() => {
window.logp.reportLog2 = debounce(window.logp.reportLog, 5000);
}, 0);
window.addEventListener(
"error",
function (e) {
let defaults = Object.assign({}, errordefo);
setTimeout( ...
工具与效率
1、查看项目远程仓库地址// 第一种方式
git remote -v
// 第二种方式
git remote get-url origin
// 第三种方式
直接在该项目.git目录下config文件内查看
2、git diff2.1 尚未缓存的改动:git diff
2.2 查看已缓存的改动: git diff –cached
2.3 显示暂存区和工作区的差异: git diff [file]2.4 显示暂存区和上一次提交(commit)的差异: git diff –cached [file] 或者 git diff –staged [file]2.5 显示两次提交之间的差异: git diff [first-branch]…[second-branch]3、git clone –recursive3.1 git clonegit clone --recursive 是一个 Git 命令,用于克隆一个包含子模块(submodule)的仓库。子模块是指在一个 Git 仓库中嵌套的另外一个独立的 Git 仓库。当你在一个 Git 仓库中使用子模块时,你可以将外部仓库作为你的 ...
其他
1、js 树逆向查找利用递归,当最后找到当前节点后再一层层返回上来拿到整棵树从当前节点到根节点的id
function findParentArr(targetId) {
const ids = [];
function getParent(sources) {
if (Array.isArray(sources) {
return sources.find((elm) => {
let rs = getParent(elm);
if (rs) {
ids.push(elm.id);
}
return rs;
});
}
if (sources.id === targetId) {
return true;
}
if (Array.isArray(sources.childFunctionList) {
...
移动端开发
JS Bridge(JavaScript Bridge)是指在移动应用开发中,通过在原生代码(如Android或iOS)和JavaScript代码之间建立桥梁,实现它们之间的相互通信。这样,原生代码和JavaScript代码就能够互相调用对方的方法和获取对方的数据,从而实现混合开发。
在移动应用中使用JS Bridge有很多好处。首先,它允许开发者使用熟悉的Web技术(如HTML、CSS和JavaScript)来构建应用的用户界面,同时还能使用原生代码来处理一些性能要求较高或需要访问底层设备功能的部分。其次,使用JS Bridge可以降低开发的难度,因为可以利用Web技术开发部分功能,而无需完全掌握原生开发技术。此外,JS Bridge还可以使得跨平台开发更加容易,因为可以共用一部分代码,从而减少重复劳动。
在Android中,通常使用WebView来实现JS Bridge。WebView是一个能够显示网页内容的控件,通过WebView提供的addJavascriptInterface()方法,可以将Java对象注入到JavaScript中,从而使得JavaScript可以调用Java ...
前端开发
根据项目需求创建.env.XXX 环境文件文件内使用package.json 文件 javascript 配置运行
本文使用开发、测试、生产3种环境
1、根据项目需求创建.env.XXX 环境文件根据VUE_APP_CURRENTMODE进行package.json javascript运行配置根据NODE_ENV进行环境判断
// 开发环境
// .env.development
NODE_ENV = "development";
VUE_APP_CURRENTMODE = "dev";
VUE_APP_BASE_URL = "https://xxx.com";
// 测试环境
// .env.test
NODE_ENV = "test";
VUE_APP_CURRENTMODE = "test";
VUE_APP_BASE_URL = "https://xxx.com";
// 生产环境
// .env.production
NODE_ENV = "production";
VUE_APP_CURRENTMODE = "prod";
VUE_APP_BASE_URL = " ...
移动端开发
微信小程序开发最主要的就是编写云函数、使用微信提供的功能与数据库,在存储与鉴权方面存在一定便利。实现方式最主要云函数的编写与调用,wx.cloud.callFunction({})
1、定义云函数假如我们要在微信小程序内获取用户运动步数,首先要在 cloudfunctions 文件夹内定义函数
// 云函数入口文件
const cloud = require("wx-server-sdk");
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); // 使用当前云环境
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext();
return {
event,
};
};
2、调用云函数封装调用
getWeRunData() {
return new Promise((resolve, rej ...
前端开发
vuex的持久化解决的就是页面刷新时vuex数据还原的问题,注意是还原(不是丢失),因为写死在vuex的固定数据是不会丢失的,但是后期更改的值会还原为初始值
前端开发
参考链接
1、static该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
2、relative该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
3、absolute元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
4、fixed元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 trans ...
后端开发
import os
import shutil
import subprocess
import sys
import re
if not shutil.which("ffmpeg"):
print('当前系统未安装ffmpeg,请下载变将 ffmpeg.exe 放在当前目录下\n下载地址\nhttps://www.gyan.dev/ffmpeg/builds/ffmpeg-release-essentials.7z')
input("按回车退出")
sys.exit()
root = os.getcwd()
filepath=root
cfg = os.path.join(root, 'cfg.txt')
sext = ['mp3', 'flac', 'mp4', 'mpeg', 'aac', 'mkv', 'avi','wmv','m3u8']
ext = 'mp4'
if os.path.exists(cfg):
with open(cfg, 'r', encoding='utf-8') as f:
for line in f. ...