手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

引入unplugin-auto-import无效

Submitted by gouki on 2022, November 15, 9:47 AM

 前段时间用React，这段时间用Vue3（用uniapp写小程序的时候也尝试切换到vue3了），本来觉得很累的，毕竟在每次使用都要import {vue} from 'vue'之类的，在使用了unplugin-auto-import插件后，真的少写了好多。但也要看unplugin-auto-import是不是支持。

 
比如我现在直接引用了vue，象现在onMounted/ref等都不再定义了。
 
然而刚开始的时候却是怎么都没法用，这时候才发现虽然我代码都是用JS写的，但auto-import插件是ts写的，必须要引入typescript组件，然后他才生成一个：auto-imports.d.ts的文件，这时候配合<script setup>这个所谓vue3的黑魔法，才是妥妥的。
 
没什么大东西，就是这么记录一下

Javascript | 评论:0 | 阅读:3501

之前没有注意过的tailwindcss的响应式设计

Submitted by gouki on 2022, October 30, 10:36 PM

 tailwindcss现在用的人越来越多了，大量的flex以及固定的text-[],w-[]等自定义的class，确实让人用起来非常方便，然后在页面上也可以用sm:/md:/等前缀符可以直接设置相应大小屏幕所对应的class。如果class太多太长，还可以用@apply来进行自定义的缩短等

 
之前一直没有注意，在写一些样式的时候就直接<div class="w-full lg:w-1/2 sm:w-1/2 md:w-1/2" >结果发现在更小的屏幕下无法设置，因为sm:是代表了640px，而象手机一般是320px/414px，这时候就没办法设置了。在想着自定义xs:前缀的时候，看了一下官方文档，结果发现上面有标明一个非常重要的话：【不要使用 sm: 来定位移动设备，而应该使用无前缀的功能类来定位移动设备，并在较大的断点处覆盖它们】参考（响应式设计 - Tailwind CSS 中文文档）。
官方提示：【因此，通常最好先为移动设备设计布局，接着在 sm 屏幕上进行更改，然后是 md 屏幕，以此类推。】
 
所以其实所有的样式理论上应该都是基于小屏幕写的，而比sm还大的屏幕，反而是需要加前缀进行自定义的。比如你需要小屏幕全屏，中屏幕1/2，大屏幕1/3，应该是这样写<div class="w-full sm:w-1/2 md:1/3" >因为lg比md还大，所以lg反而不需要设置了。
 
纯记录一下。这一个月我是从vue2写到react再返回vue3，快崩溃了。

Javascript | 评论:0 | 阅读:3033

uniapp backgroundImage 无法显示

Submitted by gouki on 2022, October 19, 9:43 AM

突然发现uniapp好象无法分类。

用uniapp的时候突然发现使用背景图的时候打包无法打进去。本来这也没多大事，毕竟所有的图片几乎都是从网上拉过来的。但只是一个背景色也要从网上下载就有点麻烦了。所以就看了一下
1、如果不是变量的，得用相对路径，比如 /static/background.png，要写成 ../../static，注意当前文件和static的相对路径
2、如果是变量的，得一一require进来。然后用变量与require的对量对应
3、或者你还是用image标签，但是这个image标签外用view做好对应，如果上面有堆叠其他内容，会相对比较麻烦一点
4、还是用网上的地址吧，尽量使用云存储，不然如果是小水管网站，这么一拉取，其他内容可能变被卡住了。
 
基本上就这么些方法。

Javascript | 评论:0 | 阅读:2741

vite项目中使用process.env

Submitted by gouki on 2022, September 24, 12:10 AM

 在Vite创建的项目中，如果直接使用process.env变量会报错，说是process未定义。查了下资料，原来这是vite3移除了这个变量：https://github.com/vitejs/vite/issues/1973

 
在项目的vite.config.ts的export default defineConfig中，增加节点：define{'process.env':{}}
如果要和你的env变量一致可以先loadEnv：
const root = process.cwd();
const env = loadEnv(mode,root);

 然后define节点就改成：define{'process.env':env}
 
此时，到项目里运行console.log(process.env)，可以看到所有的变量。同时你会发现，只有VITE_开头的变量才能显示，其他都被隐藏了
 
在vite.config.ts中，建议是使用loadEnv来处理变量。否则如果你直接使用process.env。你会发现项目中所有的变量都显示了，一些系统变量也显示了，太危险。
 

Javascript | 评论:0 | 阅读:4226

小程序跳转踩坑

Submitted by gouki on 2022, March 30, 11:20 PM

 为了方便开发，为navigatoTo和switchTab做了一个简单的封装，这样，其他开发人员就不用关心是跳到哪里去了。因为tab页只有5个（最大），所以优选用navigateTo，然后通过判断出错信息，再调用switchTab

然而就是在这个上面踩坑了。。。

开发者工具和IOS，在遇到tabbar页面的时候，出错信息是：{errMsg: "navigateTo:fail can not navigateTo a tabbar page"} ，毕竟，我是基于开发工具进行开发的，所以我直接偷懒。。。。。if (e.errMsg.includes('tabbar'))，然后处理。

结果，在安卓上死活不能运行，我开始以为是url带了参数，去掉后发现还是不正常，于是我把出错信息打出来看一下，结果 发现，在android下，出错信息居然不一样。。它的出错信息是：{errMsg: "navigateTo:fail:can not navigate to a tab bar page"}。

看到不同点了么？

{errMsg: "navigateTo:fail can not navigateTo a tabbar page"}

{errMsg: "navigateTo:fail:can not navigate to a tab bar page"}

短短一行字，不同点居然有三处。。。我也是崩溃了，既然知道问题，那就好办了。无非就是判断 tabbar和tab bar了呗。只是，这种出错信息会不一致，让我很意外。。。

Javascript | 评论:0 | 阅读:3941

Records:305‹12345678910›»