uniapp 三端(小程序、H5、App)开发练习01

Vhen
203 阅读3分钟

创建uniapp项目fs-uniapp

npx degit dcloudio/uni-preset-vue#vite-ts fs-uniapp

配置unplugin-auto-import自动导入神器

npm i -D unplugin-auto-import
  • 配置
// vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default ({ command, mode }) => {
  return defineConfig({
    envDir: './env', // 自定义env目录
    plugins:[
      uni(),
      AutoImport({
        imports: ['vue', 'uni-app'],
        dts: 'src/types/auto-import.d.ts',
        dirs: ['src/hooks'], // 自动导入 hooks
        eslintrc: { enabled: true },
        vueTemplate: true,
      })
    ]
  })
}

@uni-helper/vite-plugin-uni-manifest插件

  • 动态编辑manifest.json
npm i -D @uni-helper/vite-plugin-uni-manifest
  • 配置
// vite.config.ts
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import UniManifest from '@uni-helper/vite-plugin-uni-manifest'

export default defineConfig({
  plugins: [UniManifest(), Uni()],
})
  • 项目根目录创建 manifest.config.(ts|mts|cts|js|cjs|mjs|json),在 这里，你可以找到 uni-app 默认的 Vite-TS 模版的 manifest.json 是如何用 TypeScript 编写的。
// manifest.config.ts
import { defineManifestConfig } from '@uni-helper/vite-plugin-uni-manifest'

export default defineManifestConfig({
  // code here...
})

unocss原子化css配置

npm i -D unocss@0.58.8 unocss-applet @unocss/eslint-plugin
  • 配置
// vite.config.ts
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [UnoCSS(), Uni()],
})
  • 项目根目录创建uno.config.ts,具体配置看官网
/*
 * @Author: vhen
 * @Date: 2024-07-18 19:39:18
 * @LastEditTime: 2024-07-19 01:38:11
 * @Description: 现在的努力是为了小时候吹过的牛逼！
 * @FilePath: \fs-uniapp\uno.config.ts
 * 
 */
import type { Preset, SourceCodeTransformer } from "unocss";
import {
    defineConfig, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup
} from 'unocss';

import { presetApplet, presetRemRpx, transformerAttributify as fsTransformerAttributify } from "unocss-applet";  // unocss-preset-weapp
// uni-app，mp-开头的平台为小程序
const isApplet = process.env?.UNI_PLATFORM?.startsWith("mp-") ?? false

const presets: Preset[] = []
const transformers: SourceCodeTransformer[] = []

if (isApplet) {
    presets.push(presetApplet())
    presets.push(presetRemRpx())
    transformers.push(fsTransformerAttributify({ ignoreAttributes: ["block"] }))
} else {
    presets.push(presetApplet())
    presets.push(presetAttributify())
    // h5模式，将rpx转换为rem
    presets.push(presetRemRpx({ mode: "rpx2rem" }))
}

export default defineConfig({
    presets: [
        ...presets,
        presetIcons({
            scale: 1.2,
            warn: true,
            extraProperties: {
                display: 'inline-block',
                'vertical-align': 'middle',
            },
        }),
    ],
    // 预设样式
    shortcuts: [{ 'fs-wh-full': 'w-full h-full' }, { 'fs-flex-center': 'flex justify-center items-center' }, { "fs-flex-between": "flex items-center justify-between" }],
    transformers: [
        // 启用 @apply 功能
        transformerDirectives(),
        // 启用 () 分组功能
        // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
        transformerVariantGroup(),
    ],
})
  • main.ts 文件中引入样式
import "uno.css";
  • 使用
<template>
  <view class="content flex justify-center items-center flex-col">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>

    <view class="unocss fs-flex-center"> unocss </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const title = ref("Hello");
</script>

<style>
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>

image.png

使用 eslint + prttier 约束代码风格

npm i -D eslint eslint-config-prettier eslint-config-standard eslint-plugin-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser
  • 这里不上代码了，自行看项目配置

pinia状态管理

npm i pinia pinia-plugin-persistedstate
  • 创建store/index文件
/*
 * @Author: vhen
 * @Date: 2024-07-18 19:49:17
 * @LastEditTime: 2024-07-19 16:14:19
 * @Description: 现在的努力是为了小时候吹过的牛逼！
 * @FilePath: \fs-uniapp\src\store\index.ts
 *
 */
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
  • 创建store/user文件
/*
 * @Author: vhen
 * @Date: 2024-07-18 19:49:45
 * @LastEditTime: 2024-07-19 15:57:19
 * @Description: 现在的努力是为了小时候吹过的牛逼！
 * @FilePath: \fs-uniapp\src\store\user.ts
 *
 */
import { defineStore } from 'pinia'

interface IUser {
  nickname?: string
  avatar?: string
}

const UserState = { nickname: '', avatar: '' }
export const useUserStore = defineStore(
  'user',
  () => {
    const userInfo = ref<IUser>({ ...UserState })

    const setUserInfo = (val: IUser) => {
      userInfo.value = val
    }

    return {
      userInfo,
      setUserInfo,
    }
  },
  {
    persist: true,
  },
)
  • main入口文件注入
import { createSSRApp } from 'vue'
import App from './App.vue'
import store from './store'

export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  return {
    app,
  }
}
  • 页面中使用
<script setup lang="ts">
import { useUserStore } from '@/store/user'
const { setUserInfo, userInfo } = useUserStore()
setUserInfo({
  nickname: 'vhen',
  avatar: ' https://avatars.githubusercontent.com/u/26346807?v=4',
})
console.log(userInfo)
const title = ref('Hello')
</script>

<template>
  <view class="content flex flex-col items-center justify-center">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">
        {{ title }}
      </text>
    </view>

    <view class="unocss fs-flex-center">unocss</view>
  </view>
</template>

<style>
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>

  • 打印数据 image.png

  • storage持久缓存数据

image.png

github

fs-uniapp

avatar
文章
阅读
粉丝