- 博客(49)
- 收藏
- 关注
RSS订阅原创 uniapp中如何进行微信小程序的分包
思路：在uniapp中对微信小程序进行分包，和原生微信小程序进行分包的操作基本上没区别，主要就是在pages.json中进行配置。此时需要在pages.json中的subPackages数组中新增一项。使用这个包中的页面时需要带上根路径的前缀，如进行tabbar页面的跳转。如图，我新增了一个包diver-page。pages代表这个包中所有的页面。root代表这个包的根路径。
2024-07-01 19:47:38
414
原创 uniapp如何根据不同角色自定义不同的tabbar
第二张思路就不赘述了，直接用上面的tabbar封装成组件引用即可，主要在pages.json中将tabbarlist设为空数组。1.第一种是根据登录时获取的不同角色信息，来进行 跳转到不同的页面，在这些页面中使用自定义tabbar。2.在tabbar页面中完成自定义tabbar，并完成根据激活的tabbar展示不同页面的逻辑。2.第二种思路是封装一个自定义tabbar组件，然后在所有要展示tabbar的页面中引入使用。1.根据手机号码一键登录，在回调中获取用户信息进行跳转。
2024-07-01 19:39:40
681
原创 TS-元组
元组是TypeScript独有的新类型，通常用于表示长度较固定的数组，并可分别指定每个元素的类型。在JavaScript中并没有元组这一概念，TypeScript的元组编译成JavaScript的元组后，代码类型依然是数组，元组更多是在编译过程中起限定作用的，是一种“语法糖”。
2024-06-30 15:39:11
548
原创 TS-字面量类型
例如，以下代码将变量number1声明为1、2、3字面量类型，因此取值只能为1、2、3中的一个，如果赋其他值，会引起编译错误。字面量在代码中表示固定值。在TypeScript中，字面量包括字符串、数值、布尔值、长整型值、对象、数组、函数、正则表达式、null等，例如，以下都是字面量。字面量类型的变量只能被赋予字面量值，如果尝试给以上变量赋其他值，就会引起编译错误，示例代码如下。基于字面量，创建字面量类型，字面量类型可以理解为仅表示固定值的类型，其定义方式如下。
2024-06-30 15:25:32
280
原创 px2rem配置黑名单忽略el-loading样式转换
配置.postcssrc.js中的selectorBlackList。使用px2rem发现el-loading样式被转换的很小。可以忽略调对应前缀的选择器。
2024-06-29 16:52:02
132
原创 代码提交检查husky+Lint-staged+Commitizen & cz-git
注意一定要使用pnpm来下载所有的husky包，不然到后面无法生成commit-msg钩子Husky + Lint-staged + Commitlint + Commitizen + cz-git 来配置 Git 提交代码规范。
2024-06-29 16:45:47
1665
原创 stylelint 配置
扩展 stylelint-config-recommended 共享配置并为 SCSS 配置其规则。扩展 stylelint-config-recommended 共享配置并为 Vue 配置其规则。共享 HTML (类似 HTML) 配置，捆绑 postcss-html 并对其进行配置。stylelint-config-recommended-scss 文档。stylelint-config-recommended-vue 文档。stylelint-config-html 文档。提供优化样式顺序的配置。
2024-06-28 12:57:02
453
原创 Eslint & prettier & airbnb规范 配置
这个配置项也是基于风格偏好的，一些人喜欢在最后一个元素后加上逗号（称为尾后逗号），因为这样在添加新元素时可以减少版本控制中的差异（只增加一行，而不是修改一行加一行）。段代码是Prettier代码格式化工具的配置文件的内容，通常存储为.prettierrc或prettier.config.js。Prettier是一个流行的代码格式化工具，用于确保代码的一致性和风格。这个配置影响代码的可读性和布局，2是一个比较常见的选择，因为它既保持了代码的紧凑，也足够清晰。eslint：代码质量检查工具。
2024-06-28 12:01:24
1194
原创 TS-常量枚举
如果使用普通的数值枚举或字符串枚举，在编译成JavaScript代码后会产生较多代码来支持各项功能，开销较大且可读性较差，而且很可能被人误用。此时如果编译这段代码，你可以发现它与普通枚举编译后产生的JavaScript代码存在区别。以下是普通枚举编译后产生的JavaScript代码。要定义常量枚举，只需在普通枚举的定义前面加上const关键字，示例代码如下。如果对常量枚举使用索引查找或反向映射，编译将无法通过，示例代码如下。以下是常量枚举编译后产生的JavaScript代码，整体上更精简。
2024-06-27 23:55:43
233
原创 docker部署vue项目
Docker Desktop启动的时候，有可能弹框提示"WSL2 installations is incomplete"，这是您的系统中没有安装WSL2内核的原因，打开。其中关键的部分是要开启电脑的虚拟化功能，在bios中打开即可，课直接百度如何通过bios打开电脑的虚拟化功能。,在打开的页面中有一个Linux内核更新包"链接，点击下载，安装。wsl --list --online 查看可以使用的虚拟机。docker会在当前目录下寻找dockerfile文件。需要依托于服务进行暴露访问。
2024-06-27 23:15:43
897
原创 使用axios+vue在离开页面时中断网络请求
第二步：在封装好的接口方法中加入cancelToken配置属性，并且传入this对象。最近做到一个需求需要在离开页面时中断未完成的网络请求。引入axios和CancelToken实例。第三步：离开页面时出发取消请求的方法。观察网络请求可以发现请求被取消了。
2024-06-02 23:47:37
343
原创 解决for in 遍历js对象，得到的顺序不正确问题
因为对象中没有顺序，他不是数组，所以想要得到一个顺序就首先要只给对象指定规则，这里是通过对象的value的字母来指定的规则。用for in之后发现每次得到的对象属性的顺序都不是按照后端数据源来排序的。最近在项目中需要遍历一个对象，按照顺序来渲染。
2024-06-02 23:45:23
295
原创 TS-引用类型的分类
复合引用类型通常都需要用户自行定义该类型的组成形式。例如，对于数组和元组，需要自行定义其组成类型和长度；对于函数，需要自行定义其参数、行为及返回值；对于对象或类的实例，则需要自行定义它们的成员、结构和行为。2.内置引用类型：包括Date（日期）对象、RegExp（正则表达式）对象、Math（数学）对象等。对于内置引用类型，通常已经由编程语言定义好该类型的结构、成员和行为，用户直接使用即可。1.复合引用类型：包括数组、元组、函数、对象、类的实例等。在TypeScript中，把引用类型分为以下两个大类。
2024-06-01 23:25:10
160
原创 TS-引用类型
TS中的数据值分为原始值和引用值两种类型。原始值即最简单的数据，而引用值则是有多个值构成的复合对象。原始值和引用值的声明方式类似，都需要创建常量或变量，然后对其赋值。其不同之处是，在变量或常量保存之后，可以对这个值进行的操作有所区别。
2024-06-01 23:22:58
1071
原创 TS-类型转换（显式）
要将其他类型转换为布尔类型，只需要将待转换的值传入Boolean()函数Boolean()函数会判断传入的值是空值还是非空值。若表示非空值，则返回true若表示空值，则返回false在TypeScipt中，以下5种值在一定程度上都有空值的含义，转换后会返回false，而对于其他值都会返回true1.undefined(无初始值)2.null(无值)3.NaN(非正确数字)4.05.""（空字符串）
2024-05-31 22:29:19
1109
1
原创 TS-object、Object和{}
object（首字母小写）类型是TS中新增的类型，用于表示非原始类型在TS中原始类型有number、boolean、string、bigint、symbol。因此object表示除此以外的全部类型以下赋值代码会引起编译错误以下为正确代码注意：当对象为object类型时，因为object类型是一种泛指的类型，并不是具体的类型，因此无法得知它支持哪些属性或者方法，需要将其转换为具体的类型才能操作。object类型可用于参数传递过程中的处理。
2024-05-31 21:53:40
486
原创 解决dataV库中滚动列表抖动的bug
最近在一个大屏项目组使用到了dataV库中的滚动列表，发现在滚动过程中第一行会抖动。猜测是表头的行高和row的行高不一样，每次滚动到表头的时候设置的行高冲突了。
2024-05-29 23:58:16
495
原创 webpack5零基础入门-19HMR的应用
HMR即HotModuleReplacement开发时，当我们修改了其中一个模块的代码webpack默认会将所有模块重新打包编译，速度很慢所以我们需要做到修改摸个模块代码，只对这个模块的代码重新打包编译，其他模块不变，这样打包的速度就能变快HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或者删除模块，而无需重新加载整个页面。
2024-05-29 23:54:04
464
原创 webpack5零基础入门-18sourcemap的应用
webpack所谓的高级配置其实就是进行webpack优化，让代码在编译/运行时性能更好一般会从一下角度进行优化：1.提升开发体验2.提升打包构建速度3.减少代码体积4.优化代码运行性能SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。它会生成一个xxx.map文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过xxx.map文件，从构建后的代码出错的位置找到映射后源代码出错的位置。
2024-05-21 13:59:53
492
原创 webpack5零基础入门-17CSS压缩
一样，但在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行。可以看到css文件变成了一行。
2024-05-19 20:23:46
409
原创 webpack5零基础入门-16封装cssloader函数
我们发现配的cssloader中有很多重复性代码，所以应该对其进行封装，减少冗余的代码 3.修改rules4.重新打包效果依然一样
2024-05-17 12:36:19
421
原创 webpack5零基础入门-15样式兼容性问题处理
注意：postcss-loader要在css-loader后面配置。注意：postcss-loader要在css-loader后面配置。3.写一个flex布局，flex是存在一定的兼容性问题的。2.在webpack.config.js中配置。重新打包可以看到flex对ie进行了兼容处理。因为我们还要设置兼容到什么版本的浏览器。可以看到打包后未被处理。可以看到打包后未被处理。
2024-05-16 14:09:40
665
原创 webpack5零基础入门-14提取css为单独文件
Css文件目前被打包到JS文件中，当JS文件加载时，会尝试创建一个style标签来生成样式，这样对于网站来说，会出现闪屏的现象，用户体验不好。我们应该是单独的Css文件，通过link标签来加载性能才好。
2024-05-15 14:16:04
406
原创 webpack5零基础入门-13生产模式
生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化代码运行性能优化代码打包速度。
2024-03-20 15:12:27
783
原创 webpack5零基础入门-12搭建开发服务器
每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化。在webpack.config.js中添加devServer相关配置。注意：开发服务器不会输出资源，在内存中进行编译打包的。此时修改文件后，webpack会自动重新打包。执行npx webpack serve。
2024-03-19 09:43:15
775
原创 webpack5零基础入门-11处理html资源
可以看到打包后的html文件既保留了模版的结构又自动引入了js文件。主要是为了自动引入打包后的js与css资源，避免手动引入。进行打包可以看到打包后的文件夹中多了html文件。并且自动引入了dist.js。
2024-03-18 10:16:55
971
原创 webpack5零基础入门-10babel的使用
主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。查看未配置babel前打包生成的dist.js可以发现箭头函数和...符号未被编译，还是es6的语法。因为只需要用到babel-loader我们不需要使用use直接用loader即可。因为只需要用到babel-loader我们不需要使用use直接用loader即可。/**排除哪些文件 */配置后重新打包发现编译成es5的语法了。JavaScript 编译器。
2024-03-17 21:33:25
628
原创 webpack5零基础入门-9eslint的用法
可组装的 JavaScript 和 JSX 检查工具。这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查。
2024-03-16 10:17:17
935
原创 webpack5零基础入门-8清空前次打包文件与处理图标字体资源
再配置generator将filename变成"static/media/[hash][ext][query]"与图片配置类似，不同的是type变为asset/resource。可以看到dist中已经有了图标相关内容。即可以在打包前自动清空path目录。static下的media目录中。表示将资源不进行转换直接打包。即可将字体图标相关文件打包到。执行npx webpack。
2024-03-15 12:29:31
1047
1
原创 webpack5零基础入门-7webpack修改输出文件目录
配置generator属性中的filename即可定义输出图片的名称。我们想要的是根据不同的资源进行分类很显然这样不行。filename是入口文件打包后输出的文件名。可以看到打包后图片文件都到img是文件夹中了。从这里可以看出path是所有文件的输出目录。可以看到dist文件被放到了js文件夹。可以看到dist目录下多了个js目录。可以看到文件名变成10位了。但所有文件都在js目录中。
2024-03-14 09:30:33
758
原创 webpack5零基础入门-6webpack处理图片资源
劣势：图片体积会变大，图片越大体积增加越多，越小增加越少，所以大图片不能转成 base64，小图片可以。配置parser属性下的dataUrlCondition属性即可根据设置的规则将图片资源转换为base64格式。可以看到图片资源打包后都被放到了dist文件目录下。优势：base64格式能被浏览器直接识别，无需额外发起请求。可以发现图片资源都没了，都打包成了base64格式的字符串了。通过在加载器中配置rule即可激活。执行npx webpack。
2024-03-13 09:24:06
1007
原创 webpack5零基础入门-4使用webpack处理less文件
loader只能使用一个loader，use可以使用多个loader。less-loader 可以将less文件编译成css文件。这里指定一下版本不然会因为node版本过低报错。注意要最先使用less-loader进行处理，执行npx webpack。执行npx webpa打包。报错无法识别less文件。
2024-03-11 09:31:12
959
1
原创 webpack5零基础入门-3使用webpack处理样式资源
style-loader：将js中的css通过创建style标签的形式添加到html文件中。在main.js中引入(不进行引入不会进行打包，因为打包的入口是main.js)css-loader：将css资源编译成commonJs资源到JS中。报错无法识别file.css，需要loader来处理css文件类型。use的执行顺序是从右到左，在后面的loader先执行。use表示对检测到的文件使用哪些loader。可以看到css文件被创建成style标签了。rules数组中的每个对象表示一个规则。
2024-03-10 19:20:39
948
1
原创 webpack5零基础入门-1使用webpack打包
引入到html中使用在浏览器端打开浏览器会报错，因为无法发识别es的模块语法，此时就需要用到webpack进行打包，将es6语法转换成浏览器能识别的es5语法。
2024-03-08 12:29:14
897
1
原创 IOS开发0基础入门UIkit-3--实现一个高度自适应的UILabel和一个宽度自适应的UILabel
根据 label2.text.length*13/200计算出文字占几行然后乘以UILabel的高度加3pt，这里加3是为了确保文字能完全展示出来。一般情况下加3就足够了。思路：UILabel初始化之后，先不要设置他的宽度和高度，等到设置好text属性和font属性之后，根据text的长度以及font的大小来计算UILabel控件的高度。思路：UILabel初始化之后，先不要设置他的宽度和高度，等到设置好text属性和font属性之后，根据text的长度以及font的大小来计算UILabel控件的宽度。
2024-03-07 11:12:29
370
原创 IOS开发0基础入门UIkit-2--UILabel的基本使用
UILabel的常用属性有:- text:设置Label显示的文本内容- font:设置文本字体。可以通过font、textColor和textAlignment属性来设置UILabel的字体、文本颜色和文本对齐方式。通过UILabel的numberOfLines属性可以设置展示多少行文本，当文本的字数超过一行的长度后，会根据该属性来决定是否自动换行。通过设置numberOfLines属性可以控制文本显示的行数。通过设置UILabel的textAlignment属性即可设置UILabel的文字对齐方式。
2024-03-06 12:14:09
1165
原创 IOS开发0基础入门UIkit-1cocoapod安装、更新和使用 , 安装中出现的错误及解决方案 M1或者M2安装cocoapods
2、打开访达->应用->Xcode->右键点击Xcode->显示简介->勾选使用 Rosetta 打开，关闭Xcode，重新打开。1、打开访达->应用->实用工具->终端->右键点击终端->显示简介->勾选使用 Rosetta 打开，关闭终端，重新打开。pod install --verbose --no-repo-update（跳过更新进行安装）pod update --verbose --no-repo-update（跳过更新进行更新。过一段时间之后，你会在终端中看到跟上面同样的红色的错误信息。
2024-03-05 12:14:39
1341
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人