common
js
时间戳转换
toLocaleDateString()
new Date().toLocaleDateString()
'2023/10/7'
let today = new Date().toLocaleDateString().replaceAll('/','-')
'2023-10-7'
toLocaleTimeString()
new Date().toLocaleTimeString()
'11:13:02'
toLocaleString / Intl.DateTimeFormat
toLocaleString()是JavaScript中的一个内置方法，用于将日期对象转换为本地化的字符串。
Intl.DateTimeFormat是JavaScript中的一个内置对象，用于格式化日期和时间。
new Date().toLocaleString()
'2023/10/7 11:16:42'
//'zh-CN'表示中文（简体），'en-US'表示英语（美国）
//numeric表示日期和时间的数字部分是完整的数字
//'2-digit'表示日期和时间的数字部分只有一位数时，前面补零
var date = new Date();
cosnt options = {
year: 'numeric',
month: '2-digit', //'long 输出'2023年9月27日 11:38:30'
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
}
//toLocaleString方式实现
var dateStringLocale = date.toLocaleString('zh-CN', options ); // 输出：'2023/09/27 11:16:20'
//Intl.DateTimeFormat方式实现
var formatter = new Intl.DateTimeFormat('zh-CN', options);
var dateStringIntl = formatter.format(date); // 输出：'2023/09/27 11:18:38'
替换不同显示字符
let str = dateString.replaceAll('/','-')
console.log(str); // 输出：''2023-09-27 11:23:44''
正则
test
var pattern = new RegExp("he", "i");
pattern.test("Hello"); // true
match
"Hello".match("he"); // true 区分大小写
"Hello".match(/he/i); // true 不区分大小写
"Hello".match(new RegExp("he", "i")); // true
播放音频
https://588ku.com/video_list/36298607.html
import successAudio from "../assets/3C7493C6.mp3";
const media=new Audio(successAudio)
media.play()
虚拟滚动
vue3实现
注意添加key值 提高渲染效率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>虚拟滚动（虚拟列表）</title>
<style>
.list-wrap {
position: relative;
overflow-y: scroll;
width: 200px;
margin: 100px auto;
box-sizing: border-box;
border: solid 1px;
background-color: pink;
}
.list {
position: absolute;
top: 0;
left: 0;
list-style: none;
}
.list li {
border: solid 1px;
line-height: 30px;
background-color: aqua;
}
</style>
</head>
<body>
<ul id="app">
<div class="list-wrap" ref="listWrap" @scroll="scrollListener" :style="`height: ${showNum * itemHeight}px;`">
<!-- 虚拟列表所有项的高度 -->
<div class="scroll-blank" :style="`height: ${arr.length * itemHeight}px;`">
<!-- 虚拟列表项 -->
<ul class="list" ref="data">
<li v-for="(val,index) in showList" :key="val">
{{val}}
</li>
</ul>
</div>
</ul>
<!-- 引Vue -->
<script src="https://unpkg.com/vue@3.2.27/dist/vue.global.js"></script>
<script>
const { createApp, ref, computed, onMounted } = Vue
const App = {
setup() {
let arr = []
for (let i = 0; i < 50; i++) {
arr.push('第' + i + '个')
}
const data = ref()
const itemHeight = ref(30)
const showNum = ref(15)
const start = ref(0)
// 计算可视窗口内要显示的数组 从长数组中截取要展示的头尾
const showList = computed(() => {
return arr.slice(start.value, start.value + showNum.value)
})
function scrollListener(event) {
const { scrollTop } = event.target
// 开始的数组索引 卷去高度 / 每一项高度
start.value = Math.floor(scrollTop / itemHeight.value);
// 动态计算卷去总高度给 虚拟列表一个顶部的偏移量，让数据一直保持在可视窗口中
data.value.style.top = scrollTop + 'px';
}
return {
arr,
data,
itemHeight,
showNum,
start,
showList,
scrollListener
}
}
}
const app = Vue.createApp(App)
app.mount('#app')
</script>
</body>
</html>
react native
屏幕适配
/**
* Created by qianxin on 17/6/1.
* 屏幕工具类
* ui设计基准,iphone 6
* width:750
* height:1334
*/
// 获取屏幕的dp
let screenW = Dimensions.get('window').width;
let screenH = Dimensions.get('window').height;
let fontScale = PixelRatio.getFontScale();
let pixelRatio = PixelRatio.get();
// 高保真的宽度和告诉
const designWidth = 1920;
const designHeight = 1080;
// 根据dp获取屏幕的px
let screenPxW = PixelRatio.getPixelSizeForLayoutSize(screenW);
let screenPxH = PixelRatio.getPixelSizeForLayoutSize(screenH);
/**
* 设置text
* @param size px
* @returns {Number} dp
*/
global.setSpText= function setSpText(size) {
var scaleWidth = screenW / designWidth;
var scaleHeight = screenH / designHeight;
var scale = Math.min(scaleWidth, scaleHeight);
size = Math.round(size * scale/fontScale + 0.5);
return size;
}
/**
* 设置高度
* @param size px
* @returns {Number} dp
*/
global.scaleSizeH=function (size) {
var scaleHeight = size * screenPxH / designHeight;
size = Math.round((scaleHeight / pixelRatio + 0.5));
return size;
}
/**
* 设置宽度
* @param size px
* @returns {Number} dp
*/
global.scaleSizeW= function (size) {
var scaleWidth = size * screenPxW / designWidth;
size = Math.round((scaleWidth/pixelRatio + 0.5));
return size;
}
调用摄像头扫码
https://blog.csdn.net/m0_64481687/article/details/130410150
uniapp扫码
uni.scanCode({
// scanType:['barCode','qrCode'],
// autoDecodeCharset:true,
onlyFromCamera: false,
success: function(res) {
//去除空格
let space_str = '\u0000'
let code = res.result.replace(space_str, "")
res.result = code
title.value= res.result
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
},
fail() {
reject('失败')
},
complete() {
console.log("扫码结束，无论失败还是成功都会回调");
}
})
热更新
https://code-push.cn/docs/1600.htm
uniapp热更新
// https://www.jb51.net/article/270524.htm
const url ='https://pkg2.zhimg.com/zhihu-dispatch/futureve-app-market(zhihuwap)-release-9.30.1(18818)-armeabi-v7a-bangcle.apk'
var dtask = plus.downloader.createDownload(url, {
// filename: "_downloadsapp" //利用保存路径，实现下载文件的重命名
}, function(d, status) {
//d为下载的文件对象
if (status == 200) {
console.log(d.filename,7777)
plus.runtime.install(d.filename, {
// force: true
}, function() {
plus.nativeUI.alert("引用资源更新完成！", function() {
plus.runtime.restart();
})
},function(err){
console.log(err,'err')
})
// //下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
// var fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
// plus.runtime.openFile(d.filename); //选择软件打开文件
} else {
//下载失败
console.log('下载失败')
plus.downloader.clear(); //清除下载任务
}
})
console.log('666')
dtask.addEventListener("statechanged", (task, status) => {
switch (task.state) {
case 1:
console.log('正在下载');
break;
case 2:
console.log('已连接到服务器');
break;
case 3:
const pr = Math.floor(((task.downloadedSize || 0) / (task.totalSize || 0)) * 100);
console.log(`正在下载 ${pr} %`);
break;
case 4:
plus.nativeUI.closeWaiting();
break;
}
})
dtask.start()
npm
切换 npm 镜像源
npm config set registry https://registry.npm.taobao.org
npm config get registry
原始的路径
https://registry.npmjs.org/
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
vsCode插件
nvm
安装和管理多个 node 版本
node版本管理工具下载地址：
https://github.com/coreybutler/nvm-windows/releases
安装前卸载干净电脑上的node。
nvm常用命令：
1、nvm list available 获取所有可以安装的 Node.js 版本
2、nvm install 10.11.0 安装指定版本的 Node.js
3、nvm list 列出所有已经安装的版本
4、nvm use 10.11.0 指定当前要使用的 Node.js 版本，指定使用的 Node.js 版本后，并且配置nodejs当前使用版本的环境变量，nodejs才真正安装了
5、nvm uninstall 10.11.0 卸载某个 Node.js 版本
6、npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm命令
客户端渲染 CRS
当你在地址栏输入地址的时候
服务器返回一个文件给你
当这个文件运行的时候, 通过执行内部的 js 代码
发送一个 ajax 请求
拿到对应返回的数据
把数据渲染在页面上
服务端渲染
其实就是在服务端把所有的事情做完, 直接把结果给到前端，刚才我们说了, 页面等所有文件其实都是存储在服务器上面的。
当你在地址栏输入地址以后
服务器会找到你需要的 html 文件, 但是先不给你
然后去找到当前这个文件内所需要的数据内容
然后, 把数据内容组装成一个 html 结构插入到页面内
然后把插入好数据的页面直接返回给你
得到的 html 就是完整的最终页面, 直接展示即可
NextJS
创建项目
npx create-next-app@latest
依据 pages 目录结构自动生成路由模块的路由配置。
写到pages文件夹下面可以直接路由访问
运行
npm run dev 运行项目8080端口
部署
npm run build 打包后在。next文件夹
npm run start 在本地启动node300端口访问，部署到服务器用Nginx转发
http://localhost:3000/about
NuxtJS
创建项目
npx create-nuxt-app <项目名>
依据 pages 目录结构自动生成 vue-router 模块的路由配置。
写到pages文件夹下面可以直接路由访问
运行
npm run dev 运行项目8080端口
部署
npm run build 打包后在。next文件夹
npm run start 在本地启动node300端口访问，部署到服务器用Nginx转发
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
