- 博客(164)
- 收藏
- 关注
RSS订阅
原创 前端从零到一搭建脚手架并发布到npm
好多前端童鞋工作多年依然不会搭建脚手架，本文就介绍下如何从零开始搭建一个属于你自己的前端脚手架，提高自己的工程化实力，同时也提高团队的开发效率。
2024-04-15 16:52:14
6647
5
原创 前端从零到一开发自己组件库并发布到npm
好多前端小伙伴干了五六年，一直在做切图仔，一看项目没啥亮点。今天开始，我就分享下自己开发组件库的历程。
2024-01-24 10:15:00
1700
1
原创 vue中swiper vue-awesome-swiper的使用方法和爬坑大法
vue中swiper vue-awesome-swiper的使用方法和爬坑大法由版本引起的一系列坑坑1坑2坑3正确的使用姿势：安装（指定版本）组件中使用由版本引起的一系列坑时间：2020.07.08（时间，版本很重要-坑的起源）这两天在vue中使用swiper做轮播图，就随手百度了一下，找个帖子开始参考（坑开始了）按照图中的方法，原计划5分钟搞定，一顿操作猛如虎，然后vue各种报错，然后再各种百度，结果开始了2天的爬坑之旅![在这里插入图片描述](https://img-blog.csdnimg.
2020-07-08 13:33:33
88129
124
原创 从0到1使用webpack搭建react脚手架
好多前端童鞋工作多年依然不会使用webpack搭建react脚手架，本文就介绍下如何从零开始搭建一个属于你自己的前端脚手架，提高自己的工程化实力，同时也提高团队的开发效率。
2024-08-21 18:34:12
1563
原创 性能优化-超大图加载
网站首页的头部有时候要加载超大图，可能超过4M，如果网速不好用户会看到好长时间的白屏，体验非常不好。这种方式适合页面顶部有超大图的情况，如果页面内容区和下面图比较多可以使用图片懒加载。这里很清楚的看到大图在逐渐加载。先看完成后的效果：缩略图几乎。
2023-08-14 18:29:10
265
原创 性能优化-react阻止子组件重渲染
因为父组件的状态变更会触发子组件的渲染，可以用shouldComponentUpdate或memo来阻止。下面就来介绍这两种方法。
2023-08-11 11:46:35
1517
原创 性能优化-react路由懒加载和组件懒加载
随着项目越来越大，打包后的包体积也越来越大，严重影响了首屏加载速度，需要对路由和组件做懒加载处理主要用到了react中的lazy和Suspense。废话不多说，直接上干货。
2023-08-03 17:21:03
1071
原创 小程序导航栏透明，精准设置小程序自定义标题的高度和定位
自定义标题栏、导航栏透明，自定义导航高度问题，微信小程序自定义标题栏，微信小程序自定义标题栏的高度和位置
2022-11-07 11:33:35
4755
原创 服务器配置开发人员的ssh秘钥，免密登录服务器，执行一键发布
需求：每次需要登录服务器再执行发布脚本，比较繁琐，需要简化操作，达到一键发布的目的例子将张三的ssh秘钥配置到服务器中，免密登录，运行本地的发布脚本就可以一键发布项目1.开发人员找到本地的ssh秘钥cd ~/ssh cat id_rsa.pub 复制秘钥2. 配置服务器的授权秘钥// 找到.ssh中的 authorized_keyscd ~/.sshls// 编辑authorized_keysvim authorized_keys// 进入编辑后吧张三的秘钥粘贴到文档底部即
2022-03-26 15:30:19
1185
原创 react中使用swiper7 react中处理swiper垂直显示问题
网上有些使用的是老版本，用法可能不同，先贴出最新版版本"react": "17.0.2","swiper": "^7.4.1"安装yarn add swiper效果图横向效果垂直效果页面中使用import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';import { Swiper, SwiperSlide } from 'swiper/react';import 'swiper/css';import
2022-01-11 14:12:23
1786
原创 nextjs处理在客户端请求数据时的跨域问题
问题：next在客户端点击按钮获取数据时有个奇怪的现象，post请求不跨域，get会出现跨域的情况参考文章1.https://blog.youkuaiyun.com/sinat_39415600/article/details/1204941522.https://www.cnblogs.com/stardust233/p/12193833.html注：参考文章中的是老版本， http-proxy-middleware的新版用法有变。一、安装插件yarn add express http-proxy-mi
2022-01-07 10:02:41
2825
原创 手把手教学 nextjs中环境变量的详细处理
官网只有dev和prod的环境变量判断，再次增加test环境变量和开发环境中调用线上接口的方法，然后再服务端和客户端都可以获取到环境变量了。1.创建.env文件首先在根目录下创建3个.env文件// .env.developmentAPP_ENV=development// .env.testAPP_ENV=test// .env.productionAPP_ENV=production2.配置next.config.jsmodule.exports = { reactStri
2021-12-29 17:10:09
6745
6
原创 nextjs的入门
环境准备// 全局安装nextnpm install -g create-next-app// 创建项目create-next-app next_demo// 启动项目npm run dev// 打包yarn build// 运行打包后的程序yarn start入门须知Next.js 遵从『协定优于配置』（convention over configuration）的设计原则，根据『协定』，在 pages 中每个文件对应一个网页文件，文件名对应的就是网页的路径名，比如 pa
2021-12-29 17:06:59
1386
原创 react native的开发环境搭建和出坑指南
最近在用rn开发app，一路走来踩了很多坑，这一篇先说一下开发环境搭建的步骤和坑。成果展示先看下再ios和android模拟器上成功跑起来的样子。电脑环境必须：Xcode, Android Studiorn-ios官网：https://www.react-native.cn/docs/environment-setup安装依赖必须安装的依赖有：Watchman、CocoaPods。* 安装 watchman brew install watchman 检测是否成功：watchman
2021-12-15 16:29:01
2447
原创 支付宝小程序：查看大图，图片的缩放功能
这里写自定义目录标题1.使用自带的my.previewImage功能2.使用enlarge-image插件 -- 坑需求：点击商品详情图，可以查看大图，并且可以进行缩放，还能左右滑动查看上下页1.使用自带的my.previewImage功能官网：https://opendocs.alipay.com/mini/api/media/image/my.previewimage<button type="primary" onTap="bigImg"> Button </button&g
2021-11-26 20:36:01
1201
转载 转发推荐一本好书 javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
注：今天再csdn 看到一本好书，很有趣推荐一波版权声明：本文为优快云博主「剽悍一小兔」的原创文章原文链接：https://blog.youkuaiyun.com/weixin_39570751/article/details/120621049乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村民日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。“叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaS
2021-11-17 14:14:18
311
原创 支付宝小程-调起支付宝进行支付
支付宝小程-调起支付宝进行支付题记1.服务端创建交易订单2.前端唤起收银台支付完整代码题记在支付宝小程序中调起支付服进行支付相对比较简单，记录下流程，帮没接触过过的小伙伴出个坑。前后端大概2天搞定，工作量再后台，前端就两步1小时搞定。1.服务端创建交易订单buy() { let params={...} goodsService.addMemberVip(params).then(res => { console.log('res: ', res); // 服务端先创
2021-11-12 17:19:21
3039
原创 支付宝小程序-上拉加载，下拉刷新
这里写目录标题准备工作（坑）所有代码htmlcssjs准备工作（坑）官网-下拉刷新：https://opendocs.alipay.com/mini/api/wo21qk下拉刷新的准备工作（坑）● 需要在 app.json 的 window 选项中配置 “allowsBounceVertical”:“YES”，在页面对应的 .json 配置文件中配置 “pullRefresh”:true 选项，才可开启页面下拉刷新事件。所有代码html<view> <view class
2021-11-10 14:53:08
2110
原创 支付宝小程序-实名认证流程讲解
这里写目录标题流程前端访问后端获取认证时的certifyId和url唤起认证所有代码流程1.第一次访问获取url,certifyId2.第二次唤起认证，处理返回结果前端访问后端获取认证时的certifyId和url// 1.传参let params = { realName: this.data.name, // 真实姓名 identityCard: this.data.idcard, // 身份证号 backUrl: '/pages/users/user-info/user-inf
2021-11-10 14:49:19
2729
原创 支付宝小程序-授权，获取手机号，登录等技术
这里写目录标题注意获取授权码-getAuthCode获取用户信息-getOpenUserInfo获取手机号获取信息对比项目中登录流程注意小程序 不允许首屏弹窗引导用户授权。需要在用户充分了解小程序的业务内容后再引导用户授权，建议将小程序授权环节放在业务流程中官网：https://opendocs.alipay.com/mini/introduce/authcode获取授权码-getAuthCode<button type="primary" onTap="getAuthCode">
2021-11-10 14:46:15
6390
6
原创 支付宝小程序-路由
路由跳转my.navigateTo 是从当前页面，跳转到应用内的某个指定页面的 API。my.navigateTo({ url: './back' }my.switchTab 是跳转到指定标签页（tabbar）页面，并关闭其他所有非标签页页面的 API。my.switchTab({ url: '/page/home/index' })my.reLaunch 是关闭当前所有页面，跳转到应用内的某个指定页面的 API。my.reLaunch({ url: '/page/index' })my
2021-11-10 14:36:49
628
原创 支付宝小程序-基础入门技能汇总
支付宝小程序-基础入门技能汇总开发前必知页面级常用配置常用列表渲染空标签事件图片引入css背景图自定义组件开发工具vscode 工具底部导航开发前必知● css单位用rpx● 需要安装ui● 支付宝审核超级严，有按钮没有相应的点击事件就会被驳回。开发时要拉分支开发完一个模块后再合并到主分支。● 静态资源全部放置再ali-oss中，减小包的大小；使用方法看下面页面级常用配置设置页面的title// xxxpage.json{ "defaultTitle":"商品"}常用列表渲染//
2021-11-10 14:33:31
9844
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人