技术文档

Appearance

UNIBEST 使用 ​

修改配置文件 ​

找到 env>.env 文件

js
VITE_APP_TITLE = 'unibest' // title
VITE_APP_PORT = 9000 // 端口号

VITE_UNI_APPID = 'H57F2ACE4' // uni-app appid
VITE_WX_APPID = 'xxxxx' // 微信小程序appid

# h5部署网站的base，配置到 manifest.config.ts 里的 h5.router.base
VITE_APP_PUBLIC_BASE=/          // 路径前缀

VITE_SERVER_BASEURL = 'https://ukw0y1.laf.run'  // 数据请求地址
VITE_UPLOAD_BASEURL = 'https://ukw0y1.laf.run/upload'  // 数据上传地址

# h5是否需要配置代理
VITE_APP_PROXY=false
VITE_APP_PROXY_PREFIX = '/api'  // 代理前缀

增加分包配置 ​

  • 找到 vite.config.ts 文件

修改里面的 subPackages 目录

js
UniPages({
  exclude: ['**/components/**/**.*'],
  routeBlockLang: 'json5', // 虽然设了默认值，但是vue文件还是要加上 lang="json5", 这样才能很好地格式化
  // homePage 通过 vue 文件的 route-block 的type="home"来设定
  // pages 目录为 src/pages，分包目录不能配置在pages目录下
  subPackages: ['src/pages-sub', 'src/pages-sub2'], // 是个数组，可以配置多个，但是不能为pages里面的目录
  dts: 'src/types/uni-pages.d.ts',
}),
  • 在 pages 目录下创建 pages-sub 和 pages-sub2 目录

里面新建文件夹然后在新建 index.vue 文件

页面里面 ​

  • 组件部分要是组件名同文件名.可以不用引入直接使用(自动引入)

  • 钩子函数可以直接用

  • 默认支持 scss 插件

路由配置 ​

routeblock ​

  • 每个页面的开头都要加上 route-block
js
<route lang="json5" type="page">
  {
  layout: 'demo',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText:'首页',
    },
    needLogin: true,
    others: '哈哈哈哈',
   }
</route>
<template>
  xxxxxxxx
</template>

  • layout: 'demo' 是指使用哪个 layout，在 layouts 目录下

  • style: 是指当前页面的样式，可以配置 navigationBarTitleText，navigationStyle，backgroundColor 等

  • needLogin: 是否需要登录(写了这个属性路由验证那里就需要 token 验证)

  • others: 其他配置(随意)

路由拦截 ​

  • 找到 src 目录下 interceptors 目录下面的 route.ts

  • 找到 src>utils 下面的 index.ts 文件.修改规则

  • 一般是通过在页面里面的 route-block 里面配置 needLogin 属性来控制是否需要登录,或者依据业务其他的属性来判断

在这里修改内容

js
const navigateToInterceptor = {
  // 注意，这里的url是 '/' 开头的，如 '/pages/index/index'，跟 'pages.json' 里面的 path 不同
  invoke({ url }: { url: string }) {
    // console.log(url) // /pages/route-interceptor/index?name=feige&age=30
    const path = url.split("?")[0];
    let needLoginPages: string[] = [];
    // 为了防止开发时出现BUG，这里每次都获取一下。生产环境可以移到函数外，性能更好
    if (isDev) {
      needLoginPages = getNeedLoginPages();
      console.log(needLoginPages);
    } else {
      needLoginPages = _needLoginPages;
    }
    const isNeedLogin = needLoginPages.includes(path);

    if (!isNeedLogin) {
      return true;
    }
    const hasLogin = isLogined();
    if (hasLogin) {
      return true;
    }
    const redirectRoute = `${loginRoute}?redirect=${encodeURIComponent(url)}`;
    console.log(redirectRoute);
    uni.navigateTo({ url: redirectRoute });
    return false;
  },
};

Store ​

举例 在 store 文件夹下面 ​

  • 新增一个 count.ts
js
import { defineStore } from "pinia";
import { ref } from "vue";

export const useCountStore = defineStore(
  "countnum",
  () => {
    const countnumInfo = ref(0);

    const setCountnumInfo = (val: number) => {
      countnumInfo.value = val;
    };

    const clearCountnumInfo = () => {
      countnumInfo.value = 0;
    };
    return {
      countnumInfo,
      setCountnumInfo,
      clearCountnumInfo,
    };
  },
  {
    persist: true,
  }
);
  • 在 store 里面引入模块
js
import { createPinia } from "pinia";
import { createPersistedState } from "pinia-plugin-persistedstate"; // 数据持久化

const store = createPinia();
store.use(
  createPersistedState({
    storage: {
      getItem: uni.getStorageSync,
      setItem: uni.setStorageSync,
    },
  })
);

export default store;

// 模块统一导出
export * from "./user";
export * from "./count";
  • 使用
js
<route lang="json5" type="page">
{
  layout: 'demo',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
  needLogin: true,
  others: '哈哈哈哈',
}
</route>
<template>
  <view>我自己的页面</view>
  <wd-icon name="add-circle" class="text-green" color="red" size="32"></wd-icon>
  <view class="text-green">{{ store.countnumInfo }}</view>
  <wd-button type="success" @click="createadd">点击改变</wd-button>
  <wd-button type="success" @click="delall">点击删除</wd-button>
  <button @click="gotourl">点击跳转</button>
</template>

<script setup lang="ts">
import { useCountStore } from '@/store'
const store = useCountStore()
onLoad((option) => {
  console.log(option)
  uni.hideTabBar({
    animation: false,
  })
})
const createadd = () => {
  store.setCountnumInfo(15)
}
const delall = () => {
  store.clearCountnumInfo()
}
const gotourl = () => {
  uni.switchTab({
    url: '/pages/index/index?id=16',
  })
}
</script>

<style lang="scss" scoped></style>

自定义 tabbar ​

找到 src>pages.config.ts 文件 ​

  • list 里面写你自己的要定义的 tabbar
js
  tabBar: {
    custon: true,
    color: '#999999',
    selectedColor: '#018d71',
    backgroundColor: '#F8F8F8',
    borderStyle: 'black',
    height: '50px',
    fontSize: '10px',
    iconWidth: '24px',
    spacing: '3px',
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页',
      },
      {
        pagePath: 'pages/about/about',
        text: '关于',
      },
      {
        pagePath: 'pages/me/index',
        text: '听风',
      },
    ],
  },
  • 自己在 components>新建一个 CustomTabBar.vue 文件
js
<template>
  <wd-tabbar v-model="tabbar" @change="changeItem" fixed>
    <wd-tabbar-item title="首页" icon="home" :value="1"></wd-tabbar-item>
    <wd-tabbar-item title="关于" icon="cart" :value="2"></wd-tabbar-item>
    <wd-tabbar-item title="我的" icon="user" :value="3"></wd-tabbar-item>
  </wd-tabbar>
</template>

<script setup>
const tabbar = ref(0)

const changeItem = (index) => {
  tabbar.value = index.value
  console.log('点击了', index)
  if (index.value == 0) {
    uni.switchTab({
      url: '/pages/index/index',
    })
  }
  if (index.value == 1) {
    uni.switchTab({
      url: '/pages/about/about',
    })
  }
  if (index.value == 2) {
    uni.switchTab({
      url: '/pages/me/index',
    })
  }
}
</script>

<style lang="scss" scoped></style>
  • 在 list 那几个路径的页面里面引用,并且把原生隐藏
js
onLoad((options) => {
  uni.hideTabBar({
    animation: false,
  });
});

网站备案号:津ICP备15001525号-2