跳到主要内容

常见问题

修改 pages.json、manifest.json 被覆盖问题​

pages.json

本项目引入了 @uni-helper/vite-plugin-uni-pages，pages.json 文件将会自动生成，手动修改 pages.json 将会被覆盖。

全局的东西请在 pages.config.ts 里面配置，页面的东西请在 vue 文件的 route-block 配置。

src/pages 目录下的每个文件都代表着一个路由。要创建新页面，只需要在这个目录里新增 .vue 文件，插件会自动生成对应的 pages.json 文件。

route 代码块则可以配置页面相关信息，这些信息会自动同步到 pages.json，无需切换到 pages.json 进行配置。

<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <div>
    <h1>欢迎使用 JeecgUniapp</h1>
  </div>
</template>

<!-- 使用 type="page" 属性设置常规页，其他页面不需要设置，默认为page -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '个人页',
  },
}
</route>
<template>
  <view>
    <view>通过 `/pages/user` 来访问这个页面</view>
  </view>
</template>

manifest.json

与上面类似。本项目引入了 @uni-helper/vite-plugin-uni-manifest，manifest.json 文件将会自动生成，手动修改 manifest.json 将会被覆盖。

得益于 @uni-helper/vite-plugin-uni-manifest，你可以使用 TypeScript 来编写 manifest.json。

manifest.json 文件是自动生成的，请不要手动修改，需要配置的内容请在 manifest.config.ts 里面配置。

为什么在组件中无法覆盖组件库样式？​

1.在自定义组件中使用引用组件时，需开启styleIsolation选项​

Vue 3.2及以下版本可以使用如下配置开启 styleIsolation: 'shared'选项：

// isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
// apply-shared 表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面；
// shared 表示页面样式将影响到自定义组件，自定义组件中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<script lang="ts" setup>
</script>

Vue 3.3+可以通过 defineOptions 开启 styleIsolation: 'shared'选项：

<script lang="ts" setup>
defineOptions({
  options: {
    styleIsolation: 'shared'
  }
})
</script>

2.有scoped必须加穿透​

<template>
  <wd-tabs :customClass="getClass()" v-model="tabActive">
    <template v-for="(item, index) in tabList" :key="index">
      <wd-tab :title="item.title" :name="item.key"></wd-tab>
    </template>
  </wd-tabs>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'message',
  options: {
    // apply-shared‌：当前页面样式会影响到子组件样式.(小程序)
    // shared‌：当前页面样式影响到子组件，子组件样式也会影响到当前页面.(小程序)
    styleIsolation: '‌shared‌',
  },
})
</script>
<style lang="scss" scoped>
:deep(.wd-tabs) {
  height: 100%;
  .wd-tabs__nav {
    background: linear-gradient(45deg, #0081ff, #1cbbb4);
  }
  .wd-tabs__container {
    flex: 1;
  }
  .wd-tabs__body {
    position: relative;
  }
  .wd-tabs__line {
    background-color: #fff;
  }
}
</style>

alt text

Sass 抛出大量错误和警告​

Dart Sass 3.0.0 废弃了一批 API，而组件库目前还未兼容，因此请确保你的 sass 版本为 1.78.0 及之前的版本。可以通过以下命令安装指定版本：

pnpm add sass@1.77.6 -D

nocss或者自定义类名要定义在第三方组件上，必须定义在 custom-class 上。否则小程序不兼容​

alt text

css变量不可使用驼峰，否则小程序不兼容​

alt text

当发现小程序模拟器清除缓存你的更改也没生效时，需要重新 npm run dev:mp 或者 HBuildx右键--重新运行​

uniapp 内置组件必须加 class 控制样式，不可使用标签名。​

例如：swiper-item 在 h5 段生成的是 uni-swiper-item 在小程序生成的是 swiper-item

alt text

Toast 和 MessageBox 组件调用无效果？​

首先要检查一下用法是否正确，uni-app 平台不支持全局挂载组件，所以 Message、Toast 等组件仍需在 SFC 中显式使用，例如:

<wd-toast></wd-toast>