codercup / unibest

unibest - 最好用的 uniapp 开发框架。unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板，使用 VS Code 开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件，开箱即用，让你编写 uniapp 拥有 best 体验。

unibest - 最好的 uniapp 开发框架

unibest —— 最好的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + wot-ui + z-paging 构成，使用了最新的前端技术栈，无需依靠 HBuilderX，通过命令行方式运行 web、小程序 和 App（编辑器推荐 VSCode，可选 webstorm）。

unibest 内置了 约定式路由、layout布局、请求封装、请求拦截、登录拦截、UnoCSS、i18n多语言 等基础功能，提供了 代码提示、自动格式化、统一配置、代码片段 等辅助功能，让你编写 uniapp 拥有 best 体验 （ unibest 的由来）。

📖 文档地址 | 📱 DEMO 地址

⚙️ 环境

• node>=18
• pnpm>=7.30

📂 快速开始

执行 pnpm create unibest 创建项目

执行 pnpm i 安装依赖

执行 pnpm dev 运行 H5

📦 运行（支持热更新）

• web平台： pnpm dev:h5, 然后打开 http://localhost:9000/。
• weixin平台：pnpm dev:mp-weixin 然后打开微信开发者工具，导入本地文件夹，选择本项目的dist/dev/mp-weixin 文件。
• APP平台：pnpm dev:app, 然后打开 HBuilderX，导入刚刚生成的dist/dev/app 文件夹，选择运行到模拟器(开发时优先使用)，或者运行的安卓/ios基座。

🔗 发布

• web平台： pnpm build:h5，打包后的文件在 dist/build/h5，可以放到web服务器，如nginx运行。如果最终不是放在根目录，可以在 manifest.config.ts 文件的 h5.router.base 属性进行修改。
• weixin平台：pnpm build:mp-weixin, 打包后的文件在 dist/build/mp-weixin，然后通过微信开发者工具导入，并点击右上角的“上传”按钮进行上传。
• APP平台：pnpm build:app, 然后打开 HBuilderX，导入刚刚生成的dist/build/app 文件夹，选择发行 - APP云打包。

📄 License

MIT

Copyright (c) 2024 菲鸽

捐赠

unibest's Issues

fix: 运行到 app 代码更新后页面白屏

Bug report（问题描述）

同时运行 h5 和 app (pnpm dev:app)，修改代码后，h5正常更新，但 app 内页面白屏了，重新 pnpm dev:app ，再重新运行时可以看到更新。然后再修改，再白屏。

疑似自动导入功能相关问题。

Steps to reproduce（问题复现步骤）

env (环境)

使用的当前仓库的 demo 分支 3bf4ea2 。

• node v18.19.0
• pnpm 8.12.1
• vscode 1.87.2
• os win10
• hbx 4.08

模板编译失败【“路径有空格或中文”导致】

使用官网的pnpm create unibest my-project创建显示模板编译失败！

Android白屏问题

目前测试，是http的问题导致白屏问题
能力有限，还不清楚怎么改

请问组件支持用tsx写吗？

Feature request（新功能建议）

如题

开发app，每次保存后，都会白屏，必须重启应用。

Bug report（问题描述）

开发app，每次保存后，都会白屏，必须重启应用。
因为用了插件，所以pages.json和那个manifest.js都是动态生成，无法直接再hbx里引入
而直接dev:app 每次修改都需要重启应用。

请问后期考虑出一个没有ts的版本吗

建议命令行使用npm

一直用npm，没用过pnpm，各种官方文档也是用npm命令的多，建议兼容npm安装依赖、启动项目、打包等

在微信小程序下，wd-swiper 不显示，且报错。【重启解决】

在微信小程序下，wd-swiper 不显示，且报错：

Component is not found in path "node-modules/wot-design-uni/components/wd-swiper/wd-swiper" (using by "pages/index/index")(env: macOS,mp,1.06.2402040; lib: 3.4.1)

h5是可以的。

在安卓5.1的pad上真机运行提示webview版本过低，【需要vue2版本】

使用项目@climblee/uv-ui": "^1.1.20",
"@dcloudio/uni-app": "3.0.0-4000720240327002",
"@dcloudio/uni-app-plus": "3.0.0-4000720240327002",
"@dcloudio/uni-components": "3.0.0-4000720240327002",
android: {
minSdkVersion: 21,
targetSdkVersion: 32,
abiFilters: ['armeabi-v7a', 'arm64-v8a','x64'],
请问这个要如何兼容的

layouts 中获取节点，小程序环境无法获取

Bug report（问题描述）

layouts 中获取节点，小程序环境无法获取

h5 可以。

Steps to reproduce（问题复现步骤）

代码

/**
 * 获取节点信息
 * @param selector 节点选择器 #id,.class
 * @param all 是否返回所有 selector 对应的节点
 * @param scope 作用域（支付宝小程序无效）
 * @returns 节点信息或节点信息数组
 */
export function getRect<T extends boolean>(selector: string, all: T, scope?: any): Promise<RectResultType<T>> {
  return new Promise<RectResultType<T>>((resolve, reject) => {
    let query: UniNamespace.SelectorQuery | null = null
    if (scope) {
      query = uni.createSelectorQuery().in(scope)
    } else {
      query = uni.createSelectorQuery()
    }
    query[all ? 'selectAll' : 'select'](selector)
      .boundingClientRect((rect) => {
        if (all && isArray(rect) && rect.length > 0) {
          resolve(rect as RectResultType<T>)
        } else if (!all && rect) {
          resolve(rect as RectResultType<T>)
        } else {
          reject(new Error('No nodes found'))
        }
      })
      .exec()
  })
}

h5 输出

小程序输出

env (环境)

使用的当前仓库的 demo 分支 3bf4ea2 。

• node v18.19.0
• pnpm 8.12.1
• vscode 1.87.2
• os win10
• hbx 4.08

48080端口，h5编译报错，使用的是主分支的package

pnpm dev

升级到最新版本也报错

微信小程序启动后缺失相关依赖包，【未能复现】

Bug report（问题描述）

微信小程序启动后缺失相关依赖包，如果使用pnpm重新安装缺失依赖包后还是缺失更多依赖包

Steps to reproduce（问题复现步骤）

1. pnpm i 安装完依赖包后
2. pnpm dev:mp-weixin 生成的dist/mp-weixin文件夹
3. 小程序开发者工具打开项目生成的dist/mp-weixin文件夹

Screenshot or Gif（截图或动态图）

pnpm dev:mp-weixin启动后提示为外部依赖

小程序打开后报错

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 3.07 GB / 15.83 GB
Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.0.4 - ~\AppData\Local\pnpm\pnpm.EXE
Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.3636
小程序开发者工具版本：
    wechat_devtools_1.06.2401020_win32_x64

增加主题色功能

Feature request（新功能建议）

字节开发者工具，使用的所有ui库，uview，piui，uni-ui 安装全部报错或者不显示。

Bug report（问题描述）

please write your issue description here

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

minimal reproduction（最小可还原代码）

System Info

npx envinfo --system --npmPackages vue --binaries --browsers

执行上面命令，将结果贴下面

有 tailwindcss 版本吗

请问有 tailwindcss 版本吗

XD 😰 实在无法理解国内盲目崇拜 antfu 的 unocss 是为何

在组件中使用enum枚举会报错：xxx is defined but never used. eslintno-unused-vars

解决方案之一是在.eslintrc.cjs中的rules字段添加 'no-unused-vars': 'off',
暂时未发现会影响其他功能

微信小程序开发时，总是跑着跑着莫名中断退出

问题描述

在 Windows 系统下使用 VScode 开发项目，pnpm run dev:mp-weixin 运行，打开微信开发者工具后，开发进程总是跑着跑着莫名中断退出，需要重新运行才可以。

报错截图：

环境：

System:
OS: Windows 10 10.0.19045
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 2.43 GB / 15.71 GB
Binaries:
Node: 18.19.1 - E:\nodeJs\18.19.1\node.EXE
npm: 10.2.4 - E:\nodeJs\18.19.1\npm.CMD
pnpm: 8.15.4 - E:\nodeJs\18.19.1\pnpm.CMD
Browsers:
Edge: Chromium (122.0.2365.92)
npmPackages:
vue: 3.2.47 => 3.2.47

vue版本问题，vue3.3.11，not vue 3.4

看到使用的vue版本是vue3.4 就兴冲冲的升级了，并使用了 defineModel 但是并未支持，报错。建议vue版本跟着官方走，官方现在使用的是vue3.3。 或者研究下如何可以在3.3中配置使用defineModel。辛苦了，点赞。非常完美

uni.addInterceptor拦截request的问题

项目有可能出现需要请求2个不同的后端，请求参数结构和响应参数结构完全不一样的，这时候就需要创建2个http实例来分别对应2个后端，但现在使用了uni.addInterceptor把所有的请求都拦截了，都在一个http实例处理了
我只在以前的公司碰到过类似的情况，不止要请求后端接口，部分数据还要额外请求ERP的接口，因为请求的根路径和响应的数据结构与我们公司的后端都不一样，这个时候我一般都是再创建一个http实例，请求公司后端使用实例A，请求ERP使用实例B，2者互不干扰

有js版本吗？ts不习惯用，各种类型限制太麻烦，并且各种提示报错

如何关联云函数空间？

打包后的app文件貌似没法创建云函数？原代码也没找到入口...

路由守卫功能

手动新建页面文件，编译后route下自动生成分号导致编译失败，【插件问题】

Bug report（问题描述）

Screenshot or Gif（截图或动态图）

如上图，当前vue文件为手动创建，代码由v3自动创建，修改页面代码后保存，会稳定产生额外;导致编译失败

System Info

System:
OS: Windows 11 10.0.22621
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 1.79 GB / 15.67 GB
Binaries:
Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.21 - ~\AppData\Roaming\nvm\yarn.CMD
npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.14.0 - ~\AppData\Roaming\nvm\pnpm.CMD
Browsers:
Edge: Chromium (123.0.2420.97)
Internet Explorer: 11.0.22621.1
npmPackages:
vue: ^3.4.21 => 3.4.21

动态加载@iconify-json/icon-park-outline 图标无法显示，【写法不正确导致】

问题描述

按照文档安装@iconify-json/icon-park-outline图标，正常引入可以回显，改为动态加载重新运行pnpm dev:mp图标无法加载图标

• 版本 "@iconify-json/icon-park-outline": "^1.1.15",

Steps to reproduce（问题复现步骤）

• 正常代码

   <view class="i-icon-park-outline-home"></view> 

• 异常代码
  ！！！注意重新运行 pnpm dev:mp

 <view class="icon-wrap">
    <view class="icon-item" v-for="(item, index) in iconList" :key="index">
      <view class="icon-btn">
        <view :class="`i-icon-park-outline-${item.name}`"></view>
      </view>
      <text class="icon-text">{{ item.title }}</text>
    </view>
  </view>

<script lang="ts" setup>
const iconList = ref([
  {
    name: 'subway',
    title: '交通',
  },
  {
    name: 'knife-fork',
    title: '餐饮',
  },
  {
    name: 'water-rate-two',
    title: '水电',
  },
  {
    name: 'three-d-glasses',
    title: '眼镜',
  },
  {
    name: 'protect',
    title: '保险',
  },
  {
    name: 'cat',
    title: '宠物',
  },
  {
    name: 'tool',
    title: '维修',
  },
  {
    name: 'hammer-and-anvil',
    title: '工具',
  },
  {
    name: 'vip',
    title: '会员',
  },
  {
    name: 'children-pyramid',
    title: '玩具',
  },
  {
    name: 'hospital',
    title: '医疗',
  },
  {
    name: 'camera',
    title: '数码',
  },
])
</script>

Screenshot or Gif（截图或动态图）

使用vscode编辑，更改代码后安卓热更新内容不显示

在vscode编辑代码，保存，显示差量编译，hbuilder提示当前文件刷新成功。可是手机页面内容白屏了，tabbar还可以显示，可以点击，首页白屏关于页面内容显示正常。重新运行才可以正常显示



另外，群码过期了，麻烦更新一下

http拦截器建议改为插件方式初始化

unibest/src/utils/http.ts

Lines 46 to 49 in fbf2214

	// 拦截 request 请求
	uni.addInterceptor('request', httpInterceptor)
	// 拦截 uploadFile 文件上传
	uni.addInterceptor('uploadFile', httpInterceptor)

当前的初始化方式会导致开发过程中热加载的时候重复注册，这会导致一些接口请求效果不一致或者失败。

建议改为：

export const xxx = {
  install() {
    // 拦截 request 请求
    uni.addInterceptor('request', httpInterceptor)

    // 拦截 uploadFile 文件上传
    uni.addInterceptor('uploadFile', httpInterceptor)
  },
}

// main.ts
app.use(xxx)

使用 unocss 中的 @apply ，在h5端会把rem转换为rpx

uview-ui

Feature request（新功能建议）

什么时候能支持uview-ui 组件库

不支持支付宝小程序吗？打开即报错 -_-!

Node版本: v20.9.0
pnpm版本: 8.15.4
运行设备: MacbookPro M1
系统版本: MacOS Sonoma 14.2.1
支付宝小程序开发者工具 3.8.11

引入组件需要重启

Bug report（问题描述）

每次引入组件，不论是组件库的还是自己封装的，都需要关闭微信开发者工具，项目重新执行一次dev才行，不然就会报错找不到组件

启动后报找不到 ​Sourcemap 以及 couldn't be loaded by vite-svg-loader

npm run dev, 报错如下：

Sourcemap for "D:/Sites/kailu/unibest-main/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/client/client.mjs" points to missing source files​
​Sourcemap for "D:/Sites/kailu/unibest-main/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/client/env.mjs" points to missing source files​
​
​ ​/static/logo.svg couldn't be loaded by vite-svg-loader, fallback to default loader​

环境：
window10
node v18
uniapp h5

牛牪犇 B

运行时会崩掉

Bug report（问题描述）

运行pnpm run时会崩掉

Steps to reproduce（问题复现步骤）

1. 当我本地终端运行项目pnpm dev:mp-weixin，此时没有问题
2. 如果我修改了项目文件保存后则会有几率项目停止运行，如下

node:events:497
      throw er; // Unhandled 'error' event
      ^

Error: EBUSY: resource busy or locked, lstat 'D:\DumpStack.log.tmp'
Emitted 'error' event on FSWatcher instance at:
    at FSWatcher._handleError (file:///D:/GXG/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/watch.js:4246:10)
    at NodeFsHandler._boundHandleError (file:///D:/GXG/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/watch.js:2720:43)
    at ReaddirpStream.emit (node:events:519:28)
    at emitErrorNT (node:internal/streams/destroy:169:8)
    at emitErrorCloseNT (node:internal/streams/destroy:128:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4082,
  code: 'EBUSY',
  syscall: 'lstat',
  path: 'D:\\DumpStack.log.tmp'
}

System Info

System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
Memory: 3.93 GB / 15.83 GB
Binaries:
Node: 21.2.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.11.0 - C:\Program Files\nodejs\pnpm.CMD
Browsers:
Edge: Chromium (122.0.2365.92)
Internet Explorer: 11.0.19041.3636
npmPackages:
vue: 3.2.47 => 3.2.47

是否有计划支持uniapp x

Feature request（新功能建议）

页面级的拦截，权限拦截

Feature request（新功能建议）

现在已经有了登录的拦截，是否有考虑添加界面级别的拦截，比如按照后台返回的功能进行拦截。

使用uni-ui库中的uni-popup, 代码使用的官方提供的demo，报错

<route lang="json5">
{
  layout: 'demo',
  style: { navigationBarTitleText: 'UniUI 使用' },
}
</route>

<template>
  <view>
    <button @click="open">打开弹窗</button>
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0"
      >底部弹出 Popup 自定义圆角</uni-popup
    >
  </view>
</template>
<script>
export default {
  methods: {
    open() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open('top')
    },
  },
}
</script>

问题2：
http://localhost:9000/#/pages/demo/route-interceptor/login-model?name=feige&age=30
这个页面也报错，

上面代码都是执行 pnpm create unibest my-project -t demo后得到的代码，无修改

'NodeJS' is not defined.eslint no-undef

在.eslintrc.cjs的globals字段添加NodeJS: true,

main分支有几个细节问题

环境：nodev18.18.2 pnpm dev:h5 main分支
在调研的时候发现3个小问题：

1. 示例tab下的基本功能列表页面下拉到底显示不全
   
2. 基本功能列表页面增加onReachBottom钩子滚动到底无法触发，发现将layout下default.vue中overflow: auto;去掉能正常触发，不确定会不会影响其他地方
3. 滚动tab页面的滚动条到某个位置，来回切换回来，会重置页面的滚动条，影响体验

另外，希望能支持自定义tab功能，感谢开源作者的辛苦付出~

pnpm dev:app 报错

Bug report（问题描述）

pnpm dev:app 报错

Steps to reproduce（问题复现步骤）

System Info

使用的是vscode的base的模版

vscode 新建页面报错【最新版vscode+volar已经不会了】

Bug report（问题描述）

创建 page 时报错 找不到模块“@/utils”或其相应的类型声明 。

疑似自动导入功能相关问题。

Steps to reproduce（问题复现步骤）

1. 已有的 login 目录打开 index.vue 不报错
2. 直接复制 login 目录，编辑器中存在文件 /login copy/index.vue
3. 打开 /login copy/index.vue 文件，报错找不到相关类型声明

重启 vscode 后可解决。但再创建一个页面时依然报错。

env (环境)

使用的当前仓库的 demo 分支 3bf4ea2 。

• node v18.19.0
• pnpm 8.12.1
• vscode 1.87.2
• os win10

本地图片在安卓平台打包后不显示

Bug report（问题描述）

Steps to reproduce（问题复现步骤）

env (环境)

使用的当前仓库的 demo 分支 3bf4ea2 。

• node v18.19.0
• pnpm 8.12.1
• vscode 1.87.2
• os win10
• hbx 4.08

使用defineOptions替代vite-plugin-vue-setup-extend【已经集成到base分支了】

Feature request（新功能建议）

使用defineOptions替代vite-plugin-vue-setup-extend
现在

<script setup name="xxx"></script>

变为

defineOptions({
    name:"xxx"
})

编译到微信小程序源代码的压缩转译的代码对调试很不友好，请问这个需要怎么处理

Bug report（问题描述）

please write your issue description here

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

minimal reproduction（最小可还原代码）

System Info

npx envinfo --system --npmPackages vue --binaries --browsers

执行上面命令，将结果贴下面

能否添加response拦截，当访问后台返回401，403之类后，前端跳转到登陆页面

能否添加response拦截，当访问后台返回401，403之类后，前端跳转到登陆页面

Unbalanced delimiter found in string

// #ifdef VUE3
// #ifdef APP-PLUS
global = {}
// #endif
// #endif
// #ifndef APP-NVUE
import {Canvas, setCanvasCreator, dispatch} from './canvas';
import {wrapTouch, convertTouchesToArray, devicePixelRatio ,sleep, canIUseCanvas2d, getRect} from './utils';
// #endif
// #ifdef APP-NVUE
import { base64ToPath, sleep } from './utils';
import {Echarts} from './nvue'
// #endif
const charts = {}
const echartsObj = {}

uniapp条件编译表达式和格式化冲突了，编译就会报错 Unbalanced delimiter found in string
这其中一部分是我在插件市场下载的echarts组件的多端兼容的代码，新建个vue文件，粘贴这段代码，保存格式化之后条件编译语句就会发现错乱了。
目前我是一个一个手动改正的，有什么好的解决方案吗。

使用 uv-parse 组件后报错 [unocss]​ ​failed to load icon "-"​

Bug report（问题描述）

使用了此组件后，运行 pnpm build:h5 会出现 [unocss]​ ​failed to load icon "-"​

Steps to reproduce（问题复现步骤）

env (环境)

使用的当前仓库的 demo 分支 3bf4ea2 。

• node v18.19.0
• pnpm 8.12.1
• vscode 1.87.2
• os win10
• hbx 4.08
• @climblee/uv-ui 1.1.20

添加迁移指南，比如把现有手机webapp转为这个项目的方法、实践

Feature request（新功能建议）

有没有规划添加迁移指南，比如把现有手机webapp转为这个项目的方法、实践

有钉钉小程序适配的方案计划吗

Feature request（新功能建议）

控制台提示Sourcemap for。。。。。。points to missing source files​

工程创建方式：pnpm create unibest my-project -t i18n
node版本：20.11.1
pnpm版本：8.15.5

使用 Webstorm 打开项目，各种配置文件飘红问题

Bug report（问题描述）

使用webstorm打开，查看各配置文件，代码一直飘红

Steps to reproduce（问题复现步骤）

1.项目install后使用webstorm打开，查看各配置文件时一直飘红，但是是可以追踪到该文件的，好奇是什么原因导致的

2.查看 tsconfig.json, 里面的配置项为 "moduleResolution": "bundler"，经多方查找后发现是这个 "moduleResolution": "bundler", 导致的代码飘红，这个选项是 5.x 版本的 typescript 新增的功能，但是本项目中 typescript 用的是 v4.9.4，因此将 typescript 升级为 5.x 后，飘红问题解决

3.项目组可以根据需要衡量是否需要在主版本中升级 typescript 版本，本人暂时先升级使用。
以下是解决代码飘红问题后截图