- 博客(33)
- 收藏
- 关注
RSS订阅原创 Next.js+TS项目中的错误边界处理与渲染降级实践
是React 16引入的一个高级特性，它允许我们将组件树的一部分包装起来，并捕获该部分中任何子组件抛出的JavaScript错误，从而避免整个页面崩溃。通过自定义错误边界组件，我们可以展示一个友好的错误信息给用户，同时后台记录错误详情，甚至提供重试或者回退操作，达到所谓的“降级渲染”。首先，在你的Next.js项目中创建一个名为的文件，确保已安装以获得React相关的类型支持。接下来，按照以下步骤编写// 假设你已经创建了样式模块// 导入路由常量// 自定义本地存储工具。
2024-05-13 18:11:27
411
原创 react项目引入xlsx，通过文件链接进行多工作区多表头的表格页面渲染
一开始使用xlsx插件，转换的方法是XLSX.utils.sheet_to_json，再去map渲染数据，但是无法渲染多表头的的表格文件，最后使用XLSX.utils.sheet_to_html完美解决。
2024-03-02 15:39:14
362
原创 react项目引入electron进行mac、windows桌面应用打包，通过浏览器下载安装包
测试阶段可以去系统设置->隐私与安全性->安全性下面选择允许任何来源（如果没有该选项可以在终端中执行 sudo spctl --master-disable ）来解决此问题，正式包分发去往打包步骤7。对于 Electron 打包的 dmg 文件，有时候浏览器会将其标记为不安全的下载。如果返回了Xcode的路径，那么Xcode已经安装。3、点击dmg安装包下载链接后，浏览器提示“已阻止不安全的下载”，安装软件时提示已损坏。这将打开一个对话框，提示你安装Xcode命令行工具。确保你已经安装了Xcode。
2024-02-26 17:06:03
863
1
原创 Next.js下通过env分环境控制功能开关
当 Next.js 应用在开发环境下运行时，.env.local 文件中定义的环境变量将会覆盖 .env.prod 文件中相同名称的环境变量。这样可以轻松地在本地开发中修改某些特定的环境变量值，而不会影响到生产环境中的配置。因此，在 Next.js 中，你可以使用 .env.prod 文件配置生产环境的全局环境变量，通过 .env.local 文件灵活地调整本地开发环境中的特定环境变量。在 Next.js 中，.env.prod 和 .env.local 是两个不同的环境变量配置文件。
2023-09-12 13:51:09
1006
原创 uniapp H5 原生video重写控制条 倍速
由于video-player是依赖video.js的，体积太大，为了优化项目，特改用原生video，因为不包含倍速播放，重写了控制条，包含播放暂停、静音、进度条、倍速菜单、全屏、Loading、断点播放。
2023-02-23 14:15:10
1044
原创 vue项目cli2 升级 cli3
由于vue-cli2 版本太低，升级到vue-cli3采用的方法是新建cli3项目，对比差异，在cli2项目单独升级。
2022-12-29 17:41:49
2889
4
原创 vue-quill-editor 富文本组件封装&图片压缩并上传到服务器
富文本上传后的图片是以base64的形式存储在数据库，这会造成数据库存储过大，所以选择将图片上传到服务器上，然后返回后端给的url链接，插入在富文本对应的位置。
2022-09-22 10:46:44
1074
原创 vue-video-player 拖动进度条触发暂停&移动端展示倍速菜单
uniapp H5项目内，视频点击暂停需显示蒙层，vue-video-player 拖动进度条和播放结束时会触发暂停，不需要展示，查看源码后，发现DEFAULT_EVENTS不包含拖动事件，可以传入:events=“[‘seeking’,‘seeked’]”项目中视频播放主要在移动端H5，倍速点击无法显示菜单去选择，只能点击倍速按钮一直切换，vue-video-player底层用的。，要去改写PlaybackRateMenuButton。默认的底部按钮样式不符合UI，需要重写。
2022-09-06 14:31:54
3858
5
原创 TypeScript基础
简介:TypeScript是微软开发的⼀个开源的编程语⾔，通过在JavaScript的基础上添加静态类型定义构建⽽成。通过TypeScript编译器或Babel转译为JavaScript代码，可运⾏在任何浏览器，任何操作系统。1. 环境搭建npm install typescript -gtsc -vtsc --init2. 类型静态类型检查，在编写或编译阶段就排查出相应的错误，规避js默认的隐式转换带来的困扰let str:string = 'hello';let num:nu.
2022-04-28 11:44:37
560
原创 git实用命令
1. stashstash 命令能够将还未 commit 的代码存起来，让你的工作目录变得干净。应用场景：某一天你正在 feature 分支开发新需求，你的功能开发到一半需要切到dev分支 # 保存当前未commit的代码git stash# 保存当前未commit的代码并添加备注git stash save "备注的内容"# 列出stash的所有记录git stash list# 删除stash的所有记录git stash clear# 应用最近一次的stashgit stas
2022-04-28 11:24:38
131
原创 css常用布局样式记录
动态生成，每4个元素在每行平均分布.box{ display: flex; flex-wrap: wrap; padding:30rpx;}.item{ margin-right: 16rpx; margin-bottom: 16rpx; width: calc((100% - 60rpx)/4); line-height: 60rpx; height: 60rpx; text-align: center; border-radius: 4rpx; border: 2rpx .
2020-11-26 10:15:21
150
原创 iview-admin3.0 动态权限路由实现
效果后台新建行业和子模块，左侧导航栏动态添加一级导航和二级导航，登录后根据权限列表渲染相应模块。实现1.rouer/routers.js存放不需要权限控制的路由2.api/user.js 添加获取路由的方法export const getRequestRouter = () => { return axios.request({ url: baseUri + '', method: 'get', headers: { } })}3.lib/util.js
2020-06-23 14:40:06
1136
原创 微信网页授权
官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html1、配置公众号回调域名在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。2、关于网页授权的两种scope的区别说明1、以snsapi_base为scope发起的网页授权，是用来获取
2020-06-08 11:39:15
298
原创 uniapp跨域打包使用记录
1.引入vantUI组件时总是提示找不到路径，最终使用ColorUI代替。2.uniapp使用的是Vue语法，微信小程序组件。3.H5页面全局隐藏导航栏"globalStyle": { "h5": { "titleNView": false } },4.H5调用腾讯地图地址转坐标跨域问题，要在腾讯地图密钥配置白名单里添加域名，并使用jsonpnpm i vue-json...
2020-06-08 10:57:51
604
原创 小程序文本域展开收起
超出4行显示省略号和展开按钮，点击显示收起按钮，小于4行不显示按钮。效果图wxml <view wx:if="{{user.description}}" class="bg"> <view class="{{expend?'overflow4 textarea':'textarea'}}" id="desc">{{user.d...
2020-04-14 16:04:59
858
1
原创 小程序自定义组件对话框动画过渡记录
自定义组件对话框效果图自定义组件wxml自定义组件css自定义组件js效果图1调用效果图2调用animation.js效果图自定义组件wxml<view class="{{translateY?'modal-shadow':'modal-shadow flex'}}" bindtap="onCancel" hidden="{{!isShow}}"> <view...
2020-04-14 12:20:49
335
原创 iview使用记录
iview使用记录checkBox多选框Radio单选框Select选择器Switch 开关Table表格checkBox多选框在组合使用时， v-model绑定的数组中有label的value值即是选中状态。CheckboxGroup 上@on-change返回已选中的数组。<CheckboxGroup v-model="checkGuestGroup" @on-change="c...
2019-09-02 14:40:15
381
原创 前端开发流程
开发流程1.页面需求分析 ：需要开发的页面（数量，内容），明确页面的功能（如搜索框、轮播图、内容展示）2.接口设计：明确哪些功能需要后端配合，设计接口文档，数据格式不合理的话要和后端协商3.确定主要应用技术4.搭建环境5.页面整体结构分析：提取公共组件复用，一般是上中下布局，再去细分（如头部分为logo、导航、用户信息三个区域，中部可以细分为轮播和展示，展示区可以细分内容导航和内容，每个...
2019-08-12 11:02:15
3337
原创 小程序 查看指定位置的地图
由于小程序只能获取当前位置的地图，所以在项目调用了腾讯位置服务的geocoder()方法，提供由地址描述到所述位置坐标的转换，再使用微信内置方法 wx.openLocation()地图查看位置。1.引入微信小程序JavaScriptSDK2.调用geocoderJS代码var QQMapWX = require('../../assets/js/qqmap-wx-jssdk.js');v...
2019-07-09 15:41:11
2476
原创 小程序自定义导航栏返回主页
小程序自定义导航栏返回主页效果图在app.js中获取状态栏的高度statusBarHeight自定义组件navbar.wxml自定义组件navbar.wxss自定义组件navbar.json自定义组件navbar.js调用组件的页面.json调用组件的页面.wxml效果图在app.js中获取状态栏的高度statusBarHeightglobalData: { statusBarHe...
2019-06-13 10:04:51
5294
原创 小程序实现表单动态数据双向绑定
小程序实现表单动态数据双向绑定viewhtmljsview效果是输入表单内容，在名片上实时显示。html这里选择三个属性作为例子： <view class="topLeft"> <view>{{userTop.company}}</view> <view>{{userTop.name}}<...
2019-05-21 12:21:08
6169
原创 box-shadow属性分析
box-shadow: h-shadow v-shadow blur spread color inset;以上六个值的含义： h-shadow 水平阴影的位置，允许负值； v-shadow 垂直阴影的位置，允许负值； blur 阴影模糊程度； ...
2019-01-29 10:36:20
1688
原创 常用网站链接
前端字体下载网站：https://fonts.google.com/https://www.dafont.com/字体引入方式：@font-face { font-family: 'Quattrocento-Regular'; src: url('../assets/front/Quattrocento-Regular.ttf');}PC端UI框架：https:...
2019-01-18 14:31:20
599
原创 通过路由跳转到一个全新的页面
1. 在app.vue输入 <router-view></router-view><template> <div id="app"> <router-view></router-view> </div></template>&l
2019-01-17 18:09:15
2997
原创 利用clipboardJs 点击按钮复制文本
官网：https://clipboardjs.com/1. npm install clipboard --save2. 引入import ClipboardJS from 'clipboard'3. 实例化created(){ new ClipboardJS('.btn');}4. template <!-- Target --> &...
2019-01-17 17:27:24
462
转载 JS实现在一个输入框按回车键后光标跳到下一个输入框
<body> <el-input class="codeInput1 codeInput" autofocus maxlength="4" oninput=" focusNextInput(this);" > <el-input class="codeInput2 codeInput" maxlength="4"
2019-01-16 09:21:10
9648
4
原创 iframe在子页面刷新停留在当前页
进入顺序为：1. first.html<script type="text/javascript"> //刷新在子页面停留 if(sessionStorage.getItem('refresh')){ window.location.href = 'second.html'; } enter(){ ...
2019-01-15 18:05:01
3996
原创 vuecli获取facebook用户邮箱、头像并登录
一、第一种方法利用hello.js，首先在facebook开发者里注册你的应用，参考http://www.imooc.com/article/79629这种可以获取图片，无法获取email，查了一下要添加filedsprovider.api({ path:'/me?fields=name,first_name,last_name,email', name:'Hello'}).t...
2019-01-15 16:05:20
2858
原创 vuecli组件嵌套iframe页面相互传值
一、从头部组件向兄弟组件内的子页面传值 在头部弹框更改头像，用中央事件总线向兄弟组件传值在组件内都引入import Bus from '../bus'bus.vue :import Vue from 'vue'const Bus = new Vue();export default Bus;1. first.vue点击事件传命令：import Bus from ...
2019-01-15 10:37:02
5889
原创 vuecli+elementui+cropperjs 在弹窗更改用户头像
vue项目需要头像裁剪上传功能，看了一篇博客，原文：https://blog.csdn.net/leileibrother/article/details/78655371。代码放到初始化组件中可以用，但是放在项目里的组件遮罩层无法显示裁剪框和正常大小的图片，花了一下午时间，发现问题在使用了对话框和scoped。效果图：步骤：在项目里，运行：npm install cropp...
2019-01-14 13:12:04
1850
转载 js对url进行编码和解码（三种方式区别）
*** 只有 0-9[a-Z] $ - _ . + ! * ' ( ) , 以及某些保留字，才能不经过编码直接用于 URL。***例如：搜索的中文关键字，复制网址之后再粘贴就会发现该URL已经被转码。1、escape 和 unescape原理：对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码。编码：escape('http:/...
2019-01-07 13:49:14
893
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人