- 博客(28)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 @z-utils组 重构和自动化实现
@z-utils组 是一个可以在vue/react/pure js 中使用的工具包，它包含三个子类，分别为 @z-utils/base, @z-utils/react, @z-utils/vue
2023-12-23 16:07:28
1574
原创 Vue实现腾讯云_音视频通话的推拉流
目标：单对单通信大部分异步使用 async await 进行同步，try catch 捕获错误处理先放一个流程图，解决80%的问题安装 TRTC Web SDK安装npm install trtc-js-sdk --save需要的页面中引入，或者全局引入import TRTC from 'trtc-js-sdk'创建 client,streamcreated中创建,存入当前页面的全局即可，不需要放入data中TRTC.createClientTRTC.createStreamr
2021-11-16 15:20:01
3312
14
原创 react组件封装：可视页面内盒子渐显上浮
需求滑动到可视窗口时，自下向上进行渐显不影响内部盒子的布局结构高度自定义(延迟时间，下沉距离)效果图(gif较慢，实际上要快一些)：实现思考像这种的需求，由于很多参数都是需要变量填充的，而且得保证内部盒子不会受影响，所以首先排除绝对定位来实现，而是使用 transform:translate(l/r,t/b) 来进行一个位置的变换。然后再配合opacity完成渐显。设置过渡(transition)来决定延迟时长步骤首先它得是一个组件获取到当前页面所有的目标dom判断当前视图中有
2021-10-15 09:13:38
423
原创 从零开始搭建一个自己的脚手架
此文为已有一个自己的框架为前提，npm角度出发搭建一个脚手架发布流程不阐述，自行发布项目地址，npm地址均在文末步骤创建项目创建脚手架命令控制台与用户交互获取创建信息远程下载模版发布创建项目目标父级文件夹：// 创建文件夹mdkir zzy-react-cli(你的脚手架名称)// 进入创建的文件夹cd zzy-react-cli// npm 初始化npm init...一路enter首先创建下文件夹，npm初始化之后对package.json进行改造{
2021-10-13 16:38:41
555
原创 webpack4 升级至 webpack5 过程总结
本文章记录本次从webpack4框架升级为webpack5之后衍生出来的所有更改框架主体为 zzy-javascript-frame(地址在文末) 此项目为自行开发构建，包含原 webpack4 版本 和升级后的 webpack5 版本框架技术栈为 react、react-router、HOOK、react-redux(已安装，未使用)、antd-mobile(UI框架)插件相关改动...
2021-09-03 10:59:06
6522
3
原创 react 中 swiper.js 的使用
基础yarn add swiper -Dimport { Swiper, SwiperSlide } from 'swiper/react'// 引入 Swiper 样式import 'swiper/swiper.min.css'<Swiper initialSlide={1} // 初始化显示哪一个 loop={true} // 是否循环 // 滑动触发 onSlideChange={() => console.log('slide change')} //
2021-08-24 18:28:12
1071
原创 跨页面拖拽DOM - transmat
亮点：跨越浏览器边界，实现数据共享本文仅简述如何快速在页面内实现，若想了解原理，请前往文末的链接！实现方式 react - HOOK拖拽方： // 引入 js文件 <script src="https://unpkg.com/transmat/lib/index.umd.js"></script> // jsx // 设置 draggable="true" 表示此DOM可进行拖拽 <div className="draggable"
2021-07-16 10:50:37
440
原创 bytemd 代码编辑器的安装与使用 (by react)
说明bytemd这个编辑器是字节跳动的掘金团队所使用的编辑器，今天碰巧读到了一篇解析的文章，奈何水平有限看不明白，但厉害是真的(笑)，所以自己简单上手安装使用了一手，在此做做记录。Ps: 相关地址都在文末。安装安装相关内容：主要 bytemd(核心) @bytemd/react(react所需要使用的插件)插件@bytemd/plugin-gfm (支持GFM(自动链接文字,删除线,表,任务列表))@bytemd/plugin-gemoji(支持Gemoji短代码)@bytemd/
2021-06-11 16:26:38
5134
4
原创 在开发npm包时遇到的一些问题以及解决方法(zzy-javascript-devtools)
目录文件## lib -- 转义生成的代码## node_modules## src -- 源代码## .gitignore## babel.config.json -- babel7配置文件## index.js -- 入口文件## package.json## readme.mdReact转化为ES5代码(包含所有ES6转化为ES5代码)1.npm包内安装babel相关依赖yarn add @babel/cli @babel/core @babel/polyfill @babel
2021-04-09 10:18:50
512
原创 zzy的工具包 zzy-javascript-devtools_readme.md
渣渣宇的开发工具包安装npm install zzy-javascript-devtoolsyarn add zzy-javascript-devtools目前分为两类，正则(regModules) 和 一些常用的方法(devtools)regModules身份证 isIdCard(idCard)验证护照（包含香港、澳门） isPassport(val)手机号 isPhone(phone)验证手机号中国(严谨), 根据工信部2019年最新公布的手机号段 isPhoneStr
2021-04-06 18:20:10
372
1
原创 (react-HOOK+antd)技术栈 实现 from表单+校验
jsxfunction Page({ history }) { let [fromData, setFromData] = useState([ { label: '真实姓名', value: '', errorTips: '您输入的姓名有误', checkVal: (val) => nameTest(val), errorLineShow: false }, { label: '手机号',
2021-02-20 17:29:38
1217
原创 js 常用功能代码片集合
都是自己一点点实践敲出来的，未来不定期更新。WebH5验证码倒计时按钮技术栈：react-HOOK<div className="getCode" onClick={getCode}> {codeTxt}</div>const [codeTxt, setCodeTxt] = useState('获取验证码')let timerconst getCode = () => { if(codeTxt !== '获取验证码') return s
2021-02-20 16:53:14
109
原创 agora(声网)web端(Vue)与小程序内拉流处理方式
简单说一下agora在不同框架内端应用，以后可以直接套用。由于我只做过拉流，所以只记录拉流的步骤。以下都是以 互动直播 产品为前提下进行的开发。Web端(agora.version:4.3.0)概述/** * agora声网解决方案 * 1. 创建 AgoraClient 对象 * 2. join进入相应频道 * 3. on 监听 user-published 拿到远端用户对象 AgoraRTCRemoteUser * 4. subscribe订阅流 将3.内的参数(远端用户对象, t
2021-02-19 18:22:07
4443
11
原创 VSCode自定义代码片段集合
HTML指令为 html{ "Print to console": { // "scope": "javascript,typescript", "prefix": "html", //快捷键 "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>", " <meta charset=\"UTF-8\"&
2021-02-18 11:46:52
256
2
原创 前端进阶问题答疑汇总(mine)
这是我完成答题之后的有问题的问题的记录，如果你们也想试一下的话可以到文末 clone 一波，自己试试。var/let // 1 function a1() { console.log(name); // 显示 undefined 但不会报错，因为已经提升变量了，在运行到定义位置前都是undefined console.log(age); // 暂时性死区 ReferenceError var name = 'Arthas' let age = 21 }thi
2021-02-18 11:30:00
1003
2
原创 移动端 H5 相关疑难总结
本文主要讲解关于移动端H5页面内的一些小操作、与app之间的交互注意事项A. 本文提及的安卓系统包括Android和基于Android开发的系统B. 本文提及的苹果系统包括iOS与iPadOSC. 本文内的大部分内容都是适应绝大多数浏览器的，所以除去某些偏门操作不用担心兼容问题D. 本文是针对移动端浏览器的，所以下文提到的浏览器均为移动端浏览器，PC上不一定会有效HTML调用系统功能使用 < a > 能快速调用移动设备的 电话/短信/邮件 三大通讯功能使用 < input
2021-02-03 16:46:11
941
原创 rem.js
(function (designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem, rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (!maxWidth) {
2021-02-03 14:33:26
131
原创 关于小程序中 被层级较高的盒子遮盖住无法触发事件的解决方式
pointer-events: auto核心是这个css的样式将它放置在点击事件的父盒子中即可大概意思就是让当前盒子可以进行穿透，也就意味着没有能够遮挡住它的东西，也就可以触发点击事件了这个css也可以用在H5上，但目前没有应用过。参考地址 地址...
2021-01-18 15:33:57
1002
2
原创 JS&React 由时间表衍生出来的关于时间的处理
var toHHmmss = function (data) { var s; var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60)); var seconds = (data % (1000 * 60)) / 1000; .
2020-09-23 16:23:09
285
原创 微信小程序实现 短视频无限播放效果(类似快手小程序，抖音app的短视频滑动)
1.实现原理利用小程序内置组件 swiper+video 来制定逻辑的方向实现方式设定swiepr-item数量为4，也就是在swiper里面同时展示4个video，避免过多导致页面卡顿例： (假设数据请求一次获取6组数据) [now, new, new, new] // 数据首次加载，将数据放置swiper盒子中 [old, now, new, new] // 向下滑动第一次 [new, old, now, new] // 向下滑动第二次，也就是在swiper滑动到第三个的时候，启用轮循
2020-07-09 11:08:50
35799
24
原创 H5与App之间的交互处理
一、H5与App之间的一些简单交互(H5主动调用app的方法)第一种方法，H5这边只需要调用window里面app注册好的方法，就可以function getAppMethods(anz, ios, data = null) { // 判断用户为 iOS 还是 Android (device) let u = navigator.userAgent let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') >
2020-06-27 18:06:44
1956
转载 关于X5内核(微信浏览器) 中 video 的处理
不全屏状态，不弹出播放层的话 X5里面的video最好只加这三个参考链接: 腾讯文档–X5内核视频之问答汇总
2020-06-03 11:09:09
2436
2
原创 Vue 中 npm 安装 sass 项目中使用scss运行后报错
主要原因是版本过高导致的npm安装一些包的时候，会默认安装最新版本，但过高版本的sass会导致scss编译错误解决思路项目中使用scss时，sass-loader要安装^7.3.1版本(package.json中设置)目前这个问题仅在Vue中有遇到过...
2020-06-02 09:52:53
1785
原创 微信小程序内七牛云图片显示异常
接口返回的图片有些是存储在七牛云里面的，部分图片有可能是因为图片过大的缘故，导致在云内进行了压缩，导致图片显示异常这里的异常是指 图片被翻转了90°复现过程把该链接置入Chrome，下载图片，发给微信好友，微信一般会有两种查看模式，一种是缩略图(省流量)，一种是查看原图，手机上查看该图片的时候缩略图显示的是被翻转之后的图片，查看原图之后才是翻转前的，也就是正常的图片解决方式在传输的图片后面主动追加一行代码 ?imageMogr2/auto-orient大概就是这个样子这样写就可以让他展示原
2020-06-02 09:42:49
1245
2
原创 移动端H5 input标签在IOS手机下键盘弹出回拉异常处理
移动端H5 input标签在IOS手机下键盘弹出回拉异常处理 // ios 键盘弹出收回屏幕异样问题 // 用到了jQuery;(function() { // 判断机型是否为IOS var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // device = isAndroid ? 'android' : 'ios' if(!i
2020-06-02 09:28:21
197
zzy-react-project.xmind
2021-07-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人