【2024】uniapp+vue3超实用模板(最佳食用+一些思考)

1、UnoCSS 使用

如果不记得,可以查 Tailwind CSS传送门 https://tailwindcss.com/docs/display

2、UnoCSS Icons 使用

  • 在里面找到某个库,如 carbon
  • 搜索想要的图表,如 avatar,出现的搜索结果,查看类名,也可以点击图标,会出现详情
  • 如上图,拿到 carbon:user-avatar
  • 代码里面 class 填写 i-carbon-user-avatar 并且支持改颜色

3、自动格式化:import 自动排序,css 属性自动排序

4、自动生成pages配置,支持模式过滤

  • 自动生成page的gif如下
  • 过滤的配置如下
js 复制代码
UniPages({
    exclude: ['**/components/**/**.*'], // 过滤掉pages里面的components文件夹
}),

全文完,撒花~
果真如此吗? 真正的文章正式开始

思考一:是否需要 原生tabbar,或者说是否应该用 自定义tabbar

我发现原生tabbar的图标必须用图片,一个是未选中的,一个是选中的,颜色要跟激活的文字颜色一致。这有几个问题:

  • 对于大部分程序员来说,并不会找图或者切图,手上没有合适的图片。
  • 要是能好用字体图标那该多好,比如上面的 UnoCSS Icons, iconfonts, UniUI Icons等,可以随意使用,还能随意设置颜色和大小,很方便。

对于非APP端来说我觉得完全可以不用 原生tabbar, 使用 自定义Tabbar 即可。对于说一进去 自定义tabbar 还没出现,我觉得不会。我们把这个组件写在 layout 里面,是先加载的,仅次于 App.vue

另外,使用 自定义Tabbar,还有一个好处是所有的节点都是自己能控制,可以实现很多原生tabbar无法实现的效果。

基于上面的考虑,我会把我的模板设置为 自定义Tabbar 的形式。利大于弊~(欢迎讨论,欢迎battle)

思考二:个人开发者的出路,该不该投身小程序,web才是未来?

现在微信小程序对个人开发者来说太不友好了,或者说红利不再了,很多类目都需要注册公司才能用,个人开发者能选的不多。(TODO1:后续我整理一个在线表格出来,所有的类目分别适用于什么类型的开发者)

既然不搞微信小程序那搞啥?搞别的平台的小程序吗?抖音小程序,支付宝小程序,百度小程序?还是说直接web网页端。网页的话需要域名申请、备案等,也是有国家管控的,走海外吗?海外的域名服务器。

难道 web3 才是未来?

没说到点子上,我觉得有个好的点子最重要,开发都是小事。

思考三:uniCloud vs laf,用哪个?

我们开发一个产品,大概率是需要后台的,功能不用多么强大,够用就行,最好不用自己买服务器,搭建数据库等。SpringBoot, NestJS 这类就不搞了(虽然我也很喜欢 NestJS),有啥可以快速实现我想要的后台呢?

uniCloudlaf 进入了我的视野,在我研究了一番之后,发现还是 laf 比较合适,强烈安利给大家。如果大家真的打算用 laf 即可填写我的推广码,我的推广链接 https://laf.run/signup?code=ohaOgIX

TODO2:后续我专门写一篇文章说明 uniCloudlaf 的对比,注意这里说的 uniCloud 是指 云函数URL化 功能。

传送门:laf.run/ uniCloud 云函数URL化

思考四:我想做一个web产品,如果想借用微信的能力来登录,需要什么条件?

  • 没有小程序,没有公众号,可以扫码登录吗?怎么实现?
  • 只有公众号,可以扫码登录吗?怎么实现?
  • 只有小程序,可以扫码登录吗?怎么实现?

上面我只知道有公众号是可以扫码登录,但是其他2种情况要怎么办。

为什么专门替微信扫码登录,因为我发现当网页登录有微信扫码登录和短信验证码登录的时候,我有60%的概率会直接用微信扫码来登录,40%用短信验证码。

就是说如果只有微信登录,我是可以接受的,估计大部分用户也是可以的。

如果微信扫码无法登录,那我用短信验证码的方式登录,接入阿里云(或其他厂商)短信服务也是OK的,看起来也很正规。

这样就是2个不同的问题了。我只想快速让用户可以登录我的网站。(填账号密码过时了,狗都不用,😁)

思考五:uniapp模板的出路

根据用户的多种情况,需要出多种模板。

首先 APP 与小程序、h5很大不同(而且我的这个模板是不能打包成APP的,官方的 vitesse也不行,我试过了。),所以有app开发得需求的,必须重新写一个模板,但是前端6件套是可以复用的( prettier + eslint + stylelint + husky + lint-staged + commitlint)。这个模板是HbuilderX的模板,但是HbuildX是不支持上述6件套的前3件的(我去HBuilder的插件市场找了一圈,没有合适的,偶尔有一两个也是大面积的吐槽,根本不能用),我的策略就是 HBuildX 只是生成项目用的,开发还是 VS Code来,除非涉及到云开发。

其次对于非APP端,应该大部分都是有小程序的需求,顺便有h5的需求,应该不存在只有h5没有小程序的需求,如果那样为什么不直接写 wap 呢?既然主要是小程序,而且又主要是微信小程序,那微信登录那一块是要默认集成进去的。

在登录这一块,微信小程序对个人开发者和非个人开发者提供的功能有很大不同,对于个人开发者,获取openid和头像+昵称就完事了,对于非个人开发者,是可以直接通过手机号快速登录的,如下图boss直聘的登录。

最终形态如下图:

md 复制代码
if needDevlopApp then:
    模板A: HuilderX + VS Code
else 
    if pensonalDeveloper then:
        模板B:个人开发者的登录
    else
        模板B:非个人开发者的登录(跟上面同属一个模板,只是部分功能有差异)
    endif
endif

思考六:人为财死鸟为食亡,我要怎么才能赚到钱?

估计很多人都在想,要怎么才能赚到钱,我比同龄人晚熟得多,总是后知后觉,路上踩了很多坑,35岁前未能进大厂,现在35了,不知道未来的路在哪里,积蓄也不多,没车又没房,只希望公司不要裁员,让我安心待几年。

我们终其一生,都是在为自己的认知买单。

想太多会累,还是躺平吧。尽量贡献一下自己,发光发热,存世留名。

回家睡觉去,眼睛干涉受不了了,晚安各位~~

最后截个图,我的电脑桌面,给大家看看我每天看的美女,哈哈

相关推荐
一 乐4 小时前
学籍管理平台|在线学籍管理平台系统|基于Springboot+VUE的在线学籍管理平台系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习
小御姐@stella4 小时前
Vue 之组件插槽Slot用法(组件间通信一种方式)
前端·javascript·vue.js
小雨cc5566ru7 小时前
uniapp+Android面向网络学习的时间管理工具软件 微信小程序
android·微信小程序·uni-app
万叶学编程7 小时前
Day02-JavaScript-Vue
前端·javascript·vue.js
积水成江10 小时前
关于Generator,async 和 await的介绍
前端·javascript·vue.js
计算机学姐10 小时前
基于SpringBoot+Vue的高校运动会管理系统
java·vue.js·spring boot·后端·mysql·intellij-idea·mybatis
老华带你飞11 小时前
公寓管理系统|SprinBoot+vue夕阳红公寓管理系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot·课程设计
qbbmnnnnnn11 小时前
【WebGis开发 - Cesium】如何确保Cesium场景加载完毕
前端·javascript·vue.js·gis·cesium·webgis·三维可视化开发
杨荧12 小时前
【JAVA开源】基于Vue和SpringBoot的水果购物网站
java·开发语言·vue.js·spring boot·spring cloud·开源
二十雨辰13 小时前
[uni-app]小兔鲜-04推荐+分类+详情
前端·javascript·uni-app