unibest Documentation

unibest is compatible with the following platforms:

• Web: H5
• Mobile OS: iOS, Android
• Mini Programs: WeChat, ByteDance (Zhihu/Douyin), Kuaishou, Alipay, DingTalk, Baidu

Note: Support for specific UI frameworks may vary by platform. Check the official documentation for your chosen UI framework or unibest documentation for details.

The router supports two primary authentication strategies to control access across your application:

1. DEFAULT_NO_NEED_LOGIN (Blacklist Mode): Users can browse any page without logging in. Authentication is only triggered when accessing specific pages or performing actions defined in a blacklist.
2. DEFAULT_NEED_LOGIN (Whitelist Mode): Users must log in to access any page by default. Access is only granted to specific pages defined in a whitelist.

The EXCLUDE_LOGIN_PATH_LIST constant acts as the mechanism for these lists:

• In DEFAULT_NO_NEED_LOGIN, it functions as a blacklist (paths that require login).
• In DEFAULT_NEED_LOGIN, it functions as a whitelist (paths that do not require login).

unibest supports three different request implementations depending on your project complexity and preference:

1. Simple http: Located at src/http/http.ts. Best for most simple projects as it adds minimal package size.
2. alova: Located at src/http/alova.ts. Use this if you are already familiar with the Alova ecosystem.
3. vue-query: Located at src/http/vue-query.ts. Primarily used for automatic interface generation (see unibest documentation for generation details).

The tabbar implementation is organized into the following files:

• config.ts: The central location for defining nativeTabbarList and customTabbarList. Follow the comments in this file for correct configuration.
• store.ts: Provides state management specifically for the Custom tabbar. This file requires almost no modification.
• index.vue: Contains the rendering logic for the Custom tabbar. You may modify this file to suit your specific UI needs.

Note: If you are using the Native tabbar strategy, you do not need to worry about store.ts or index.vue.

The tabbar component supports three main strategies depending on your requirements for performance, caching, and customization:

1. No tabbar: A single page entry with no bottom navigation. Best for temporary activity pages.
2. Native tabbar: Uses the platform's native switchTab mechanism.
   • Pros: Fastest rendering and built-in page caching.
   • Cons: Limited to two images (selected/unselected) and color changes require new assets or iconfonts.
3. Custom tabbar with cache: Uses switchTab for page caching but hides the native tabbar to render a custom UI component (e.g., from a third-party UI library).
   • Pros: Full support for SVG icons, easy color/font changes, and complex animations.
   • Cons: May experience a brief flicker on the first click.

Ensure your development environment meets the following minimum versions:

• Node.js: >=18
• pnpm: >=7.30
• Vue Official: >=2.1.10
• TypeScript: >=5.0

After setting up the Vite plugin, you must also register your native plugins in manifest.config.ts under the app-plus section so UniApp recognizes them.

export default defineManifest({
  'app-plus': {
    nativePlugins: {
      'HL-HHWUHFController': {
        __plugin_info__: {
          name: 'HL-HHWUHFController',
          description: 'RFID UHF Controller Plugin',
          platforms: 'Android',
          url: '',
          android_package_name: '',
          ios_bundle_id: '',
          isCloud: false,
          bought: -1,
          pid: '',
          parameters: {}
        }
      }
    }
  }
})

To create and start a new unibest project, follow these steps in your terminal:

1. Create the project: Use the pnpm create command.
2. Install dependencies: Run pnpm i inside the project directory.
3. Run H5 development server: Use pnpm dev.
4. Run WeChat Mini Program development: Use pnpm dev:mp.

pnpm create unibest
pnpm i
pnpm dev
pnpm dev:mp

Use these commands to generate production builds for different platforms:

Web (H5)

• Command: pnpm build:h5
• Output: dist/build/h5
• Deployment: Can be hosted on web servers like Nginx. If not hosting at the root directory, update the h5.router.base property in manifest.config.ts.

WeChat Mini Program

• Command: pnpm build:mp
• Output: dist/build/mp-weixin
• Deployment: Import the output folder into WeChat DevTools and click the 'Upload' button.

App Platform

• Command: pnpm build:app
• Output: dist/build/app
• Deployment: Import the dist/build/app folder into HBuilderX and select '发行 - APP云打包' (Publish - APP Cloud Build).

Note: For Android and HarmonyOS, you can import the entire unibest project into HBuilderX and use its menu to publish to the corresponding platform directly.

If you are using standard page scrolling instead of a scroll-view component, you can configure the page behavior using definePage.

To enable pull-down refresh on the entire page, set enablePullDownRefresh: true. To control how close the user must be to the bottom before triggering a load-more event, use onReachBottomDistance.

Note: This applies to the global page scroll context rather than a local scroll-view container.

definePage({
  style: {
    navigationBarTitleText: '上拉刷新和下拉加载更多',
    enablePullDownRefresh: true,
    onReachBottomDistance: 100,
  },
})