BUG 汇总

百度小程序 不支持直接定义 page css

可以这么实现定义 page 样式

或着使用@uni-helper/vite-plugin-uni-layouts再加一个父元素统一设置样式，查看src/layouts/default.vue

page custom-component {
  width: 100%;
  /* 高度不要使用100%，部分小程序不支持 */
  height: 100vh;
  overflow: hidden;
}

百度 showModal 没有返回 cancel 参数，统一使用 confirm

或查看utils/fix.ts

const model = await uni.showModal({
  title: '注销账号',
  content: '确定要注销账号吗? ',
  confirmColor: '#ff0000',
  confirmText: '确定',
});
console.log('model: ', model);
// if (model.cancel) return;
if (!model.confirm) return;

百度小程序不支持 page-meta，导致无法设置全局 css 变量

使用 @uni-helper/vite-plugin-uni-layouts

查看 vite.config.ts

百度小程序支付宝小程序报错 globalThis is not defined

查看 vite.config.ts build.rollupOptions.banner

支付宝小程序 js 新语法报错

查看 vite.config.ts build.target

我的配置

src/global.scss

// 百度不支持直接定义page css
// 支付宝 input 背景是黑色
// page custom-component {
//   --uno: flex flex-col h100vh of-hidden bg-gray-1 c-dark-2;
// }
page {
  // --uno: flex flex-col h100vh of-hidden bg-gray-1 c-dark-2;
  --uno: bg-gray-1 c-dark-2;

  view,
  text,
  image,
  button,
  input,
  textarea,
  swiper,
  swiper-item {
    --uno: box-border b-0 b-solid m0 p0 bg-transparent;
  }

  button::after {
    position: unset;
    border: none;
    left: unset;
    top: unset;
    transform: unset;
    border-radius: unset;
    width: unset;
    height: unset;
    content: unset;
  }

  button {
    --uno: bg-transparent rd-0 fc;
  }

  image {
    --uno: block;
  }

  .wd-search.wd-search,
  .wd-tabs.wd-tabs,
  .wd-tabs__nav.wd-tabs__nav,
  .wd-drop-menu__list.wd-drop-menu__list {
    --uno: bg-transparent;
  }
}

:root,
page {
  --wot-color-theme: theme('colors.primary');
}

src/layouts/default.vue

<template>
  <view class="w100vw h100vh flex flex-col of-hidden" :style="pageStyle">
    <slot></slot>
  </view>
</template>

<script lang="ts" setup></script>

utils/fix.ts

export function fix() {
  // fix: 调用 showToast 后立刻调用 hideLoading 会导致 toast 不显示
  // 小程序路由变化后 toast 不显示，需在路由变化前加延时
  // 设置默认值 icon: 'non'
  uni.addInterceptor('showToast', {
    invoke(data: UniNamespace.ShowToastOptions & { __fixed?: boolean }) {
      if (data.__fixed) return true;
      setTimeout(() => uni.showToast({ icon: 'none', ...data, __fixed: true }), 100);
      return false;
    },
  });

  // 设置默认值
  uni.addInterceptor('showLoading', {
    invoke(data: UniNamespace.ShowLoadingOptions) {
      data.title ||= '加载中';
      data.mask ||= true;
    },
  });

  // fix: 获取本地图片异常
  uni.addInterceptor('getImageInfo', {
    success(res: UniApp.GetImageInfoSuccessData) {
      if (!/(^\w+:\/\/)|(^\/)/.test(res.path)) {
        res.path = `/${res.path}`;
      }
      return res;
    },
  });

  // fix: 百度不返回 cancel
  uni.addInterceptor('showModal', {
    success(res: UniApp.ShowModalRes) {
      const { confirm = false } = res;
      Object.assign(res, { confirm, cancel: !confirm });
    },
  });

  // fix:h5 不支持
  uni.getMenuButtonBoundingClientRect ||= () => {
    // fix: 其他小程序不支持
    // const { windowWidth, safeArea } = uni.getWindowInfo();
    const { windowWidth, safeArea } = uni.getSystemInfoSync();
    const width = 20;
    const right = (safeArea?.right ?? windowWidth) - 7;
    const top = (safeArea?.top ?? 0) + 4;
    const height = 32;
    return { bottom: top + height, height, left: right - width, right, top, width };
  };
}

vite.config.ts

import Unocss from 'unocss/vite';
import uni from '@dcloudio/vite-plugin-uni';
import { defineConfig, loadEnv } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import { uniuseAutoImports } from '@uni-helper/uni-use';
import UniPages from '@uni-helper/vite-plugin-uni-pages';
import Components from '@uni-helper/vite-plugin-uni-components';
import { WotResolver, UniUIResolver } from '@uni-helper/vite-plugin-uni-components/resolvers';
import UniLayouts from '@uni-helper/vite-plugin-uni-layouts';

// @ts-ignore
const Uni = (uni.default || uni) as typeof uni;

// https://vitejs.dev/config/
export default defineConfig(async ({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  return {
    base: env.VITE_BASE_URL || '/',
    server: {
      port: 5179,
    },
    build: {
      // fix: mp-alipay
      target: 'es2015',
      rollupOptions: {
        output: {
          // fix: mp-baidu
          banner: `
          if (typeof globalThis === 'undefined') {
            var globalThis =  window || global || this || {};
          }
          `,
        },
      },
    },

    plugins: [
      AutoImport({
        imports: [
          'vue',
          // '@vueuse/core',
          'uni-app',
          {
            radash: ['sleep', 'random', 'range'],
            'date-fns': ['format'],
            validator: [['default', 'validator']],
            '@uni-helper/uni-env': [['*', 'uniEnv']],
          },
          uniuseAutoImports(),
        ],
        dirs: ['src/store', 'src/utils', 'src/lib', 'src/apis/index.ts'],
        vueTemplate: true,
      }),
      Components({
        resolvers: [WotResolver(), UniUIResolver()],
      }),
      Unocss(),
      UniPages({}),
      UniLayouts(),
      Uni(),
    ],
  };
});