【unibest】uniapp + vue3 超实用模板（番外篇）1、UnoCSS 使用如果不记得，可以查 Tailw

1、UnoCSS 使用

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

常用的：

宽高内外边距： w-2, h-4, px-6, mt-8等
前景色背景色：text-green-400, bg-green-500
border: border-2, border-solid, border-green-600, b-r-2 (注意 border = border-1，就是说边框 1px 时，一般简写为 border )
border-radius: rounded-full, rounded-6, rounded-sm (不是 br-10, 也不是 b-r-10)
line-height: leading-10 (不是 l-10, 也不是 lh-10)
hover: hover:text-green-200, hover:bg-green-300, hover:border-dashed
flex: flex, items-center, justify-center, flex-1

2、UnoCSS Icons 使用

打开网址：icones.js.org/

在里面找到某个库，如 carbon
搜索想要的图表，如 avatar，出现的搜索结果，查看类名，也可以点击图标，会出现详情

如上图，拿到 carbon:user-avatar
代码里面 class 填写 i-carbon-user-avatar 并且支持改颜色

3、自动格式化：import 自动排序，css 属性自动排序

保存后自动格式化，自动排序，爽歪歪；大家的格式都是一样的。如下图

4、统一 `VSCode` 配置

.vscode/settings.json 在项目层面统一了开发者的配置， .vscode/extensions.json 贴心地给出了所有涉及到的扩展，可以快捷安装。

5、自动生成pages配置，支持模式过滤

自动生成page的gif如下

过滤的配置如下

UniPages({
    exclude: ['**/components/**/**.*'], // 过滤掉pages里面的components文件夹
}),

6、`VSCode Code Snippets` 加快 `vue` 文件生成

cmd + shifp + P 然后输入 Snippets，然后选择 Snippets: Configure User Snippets(别选错了)，然后出现下图

然后在 vue 文件里面可以通过 v3 触发这个代码段。如下图

最终源码地址：

github: github.com/codercup/un…

gitee: gitee.com/codercup/un…

全文完，撒花~

下面谈谈我的困惑和一些思考。

思考一：是否需要 `原生tabbar`，或者说是否应该用 `自定义tabbar`

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

对于大部分程序员来说，并不会PS、sketch等，不容易得到合适的图片，要去网上找。
要是能好用字体图标那该多好，比如上面的 UnoCSS Icons, iconfonts, UniUI Icons等，可以方便使用，还能随意设置颜色和大小，很方便。

所以我认为，对于非APP端来说完全可以不用 原生tabbar, 使用 自定义tabbar 即可。对于刚进入程序的时候 自定义tabbar 还没出现的顾虑，我觉得完全不用担心，把这个 自定义tabbar 组件写在 layout 里面，是仅次于 App.vue 就加载的。

另外，使用 自定义tabbar，还有一个好处是所有的节点都是自己能控制，可以实现很多原生tabbar无法实现的效果，如下图滴滴小程序和BOSS直聘小程序（重点关注tabbar区域）。

~~基于上面的考虑，我会把我的模板设置为 自定义Tabbar 的形式。利大于弊~（欢迎讨论，欢迎提供不同意见）~~

update on 2024-01-22：后来发现APP的需求也不少，那就保留原生Tabbar吧，但是也提供自定义Tabbar的模板，可以自由选择

思考二：uniCloud vs laf，用哪个?

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

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

这里我重点研究了下 uniCloud 和 laf 2个产品，对比用法如下：

uniCloud

云函数、云对象使用

module.exports = {
    addTodo: function(params) { 
        console.log(params)
        return {
            data: 'hello 菲鸽',
            errCode: 0
        }
    }
}

云数据库使用

const db = uniCloud.database()
function addUser() {
    // add user 
    const { id } = await db.collection("users").add({ 
        username: username, 
        password: createHash("sha256").update(password).digest("hex"),
        created_at: new Date(),
    });
    return { data: id }
}

云存储使用

// promise方式
const result = await uniCloud.uploadFile({
    filePath: 'your-filePath',
    cloudPath: 'a.jpg',
    onUploadProgress: function(progressEvent) {
      console.log(progressEvent);
      var percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
    }
});

laf

云函数使用

export default async function (ctx: FunctionContext) {
    // ctx 与 express的ctx 一致，可以访问 ctx.req, ctx.res, ctx.body 等
    return {data:'hello 菲鸽'}
}

云数据库使用

import cloud from "@lafjs/cloud";
const db = cloud.database();
export default async function (ctx: FunctionContext) {
    // add user 
    const { id } = await db.collection("users").add({ 
        username: username, 
        password: createHash("sha256").update(password).digest("hex"),
        created_at: new Date(),
    });
    return { data: id }
}

云存储使用

这里以上传文件为例

import cloud from '@lafjs/cloud'

export default async function (ctx: FunctionContext) {
  // 获取存储桶
  const bucket = cloud.storage.bucket('data')

  // 写文件
  const content = 'hello, 菲鸽'
  await bucket.writeFile('laf.html', content)
}