使用uniapp开发微信小程序-框架搭建

YUJIAN 2025-06-03
78 阅读 0 评论 0 点赞
使用uniapp开发微信小程序-框架搭建

最近要开发一个小程序，为了降低学习成本，最后还是选择使用uniapp来开发，但是由于电脑性能不行，实在不想多跑一个应用程序，就简单搭建了一个可以用vscode跑的uniapp项目。

项目整体技术栈：vue3 + pinia + typescript + sass + unocss + vite5

基础框架

1、使用 uniapp官网中的Vue3/Vite版:

bash
 体验AI代码助手
 代码解读
复制代码
npx degit dcloudio/uni-preset-vue#vite-ts uni-preset-vue-vite-ts

如果创建失败，可以直接下载模板

基础项目下载/安装完以后，目录如下：

New Image

我们可以看一下package.json文件中，有很多默认的依赖包： New Image

由于我们仅需要发布微信小程序端，所以将其他没用的包都删掉：

New Image

在项目根目录下安装依赖包：

 体验AI代码助手
 代码解读
复制代码
npm install

2、其他依赖包安装

另外安装了其他需要的依赖包，例如pinia、sass、unocss等等。

1）pinia —— 全局状态管理

项目一些数据需要持久化，配套安装pinia-plugin-persistedstate，不需要可以不安装。

 体验AI代码助手
 代码解读
复制代码
npm install pinia pinia-plugin-persistedstate

安装完以后在项目src文件夹下新建文件夹store,store文件夹下新建文件index.ts和 user.ts：

New Image

然后按官网使用即可：

ts
 体验AI代码助手
 代码解读
复制代码
// 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

// 模块统一导出
export * from ''./user''



ts
 体验AI代码助手
 代码解读
复制代码
// user.ts
import { defineStore } from ''pinia''
import { ref } from ''vue''

const initState = {
  account: '''',
  name: '''',
  phone: '''',
  token: '''',
}

export const useUserStore = defineStore(
  ''user'',
  () => {
    // 初始化
    const userInfo = ref<IUserInfo>({ ...initState })
    // 设值
    const setUserInfo = (val: IAccountInfo) => {
      userInfo.value = val
    }
    
    return {
      userInfo,
      setUserInfo,
    }
  },
  {
    persist: true,
  },
)

2）、sass —— css预编译

css
 体验AI代码助手
 代码解读
复制代码
npm install sass --save-d

3）、postcss —— CSS转换

配套安装postcss-html 可以将html文件中的样式块中的CSS代码提取出来进行处理，还有postcss-scss可以将sass代码转换成CSS代码

css
 体验AI代码助手
 代码解读
复制代码
npm install postcss postcss-html postcss-scss --save-d

在manifest.json中配置：

New Image

本项目和stylelint配套食用，其他具体配置见👇

4）、stylelint —— CSS代码检查工具

包名作用
stylelintCSS代码检查工具
stylelint-config-htmlhtml文件-样式代码检查
stylelint-config-recommended样式代码检查配置插件(比stylelint-config-standard更加宽松)
stylelint-config-recommended-scssSCSS语法检查
stylelint-config-recommended-vuevue文件-样式代码检查
stylelint-prettier样式代码检查和格式化工具
lua
 体验AI代码助手
 代码解读
复制代码
npm install stylelint stylelint-config-html stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-prettier --save-d

在项目根目录下新建文件.stylelintrc.cjs

cjs
 体验AI代码助手
 代码解读
复制代码
module.exports = {
  root: true,
  extends: [
    ''stylelint-config-recommended'',
    ''stylelint-config-recommended-scss'',
    ''stylelint-config-recommended-vue/scss'',
    ''stylelint-config-html/vue'',
    ''stylelint-config-recess-order'',
  ],
  plugins: [''stylelint-prettier''],
  overrides: [
    // 扫描 .vue/html 文件中的<style>标签内的样式
    {
      files: [''**/*.{vue,html}''],
      customSyntax: ''postcss-html'',
    },
    {
      files: [''**/*.{css,scss}''],
      customSyntax: ''postcss-scss'',
    },
  ],
  // 自定义规则
  rules: {
    ''prettier/prettier'': true,
    // 允许 global 、export 、v-deep等伪类
    ''selector-pseudo-class-no-unknown'': [
      true,
      {
        ignorePseudoClasses: [''global'', ''export'', ''v-deep'', ''deep''],
      },
    ],
    ''unit-no-unknown'': [
      true,
      {
        ignoreUnits: [''rpx''],
      },
    ],
    // 小程序不能识别page标签
    ''selector-type-no-unknown'': [
      true,
      {
        ignoreTypes: [''page''],
      },
    ],
    // never|always|always-multi-line|never-multi-line
    ''comment-empty-line-before'': ''never'', 
    ''custom-property-empty-line-before'': ''never'',
    ''no-empty-source'': null,
    ''comment-no-empty'': null,
    ''no-duplicate-selectors'': null,
    ''scss/comment-no-empty'': null,
    ''selector-class-pattern'': null,
    ''font-family-no-missing-generic-family-keyword'': null,
  },
}

在项目根目录下新建文件.stylelintignore，忽略一些不用检查的文件

bash
 体验AI代码助手
 代码解读
复制代码
src/uni_modules/

5）、unocss —— css原子化

配套安装unocss-applet使用小程序预设

css
 体验AI代码助手
 代码解读
复制代码
npm install unocss unocss-applet --save-d

在项目根目录下新建文件uno.config.ts

ts
 体验AI代码助手
 代码解读
复制代码
// uno.config.ts
import {
  type Preset,
  defineConfig,
  presetUno,
  presetAttributify,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
} from ''unocss''

import { presetApplet, presetRemRpx } from ''unocss-applet''

const isMp = process.env?.UNI_PLATFORM?.startsWith(''mp'') ?? false

const presets: Preset[] = []
if (isMp) {
  // 使用小程序预设
  presets.push(presetApplet(), presetRemRpx())
} else {
  presets.push(
    // 非小程序用官方预设
    presetUno(),
    // 支持css class属性化
    presetAttributify(),
  )
}
export default defineConfig({
  presets: [
    ...presets,
    // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button  />`
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        display: ''inline-block'',
        ''vertical-align'': ''middle'',
      },
    }),
  ],
  /**
   * 自定义快捷语句
   * @see https://github.com/unocss/unocss#shortcuts
   */
  shortcuts: [
    [''center'', ''flex justify-center items-center''],
    [''x-between'', ''flex justify-between items-center''],
    [''b-b-s-1'', ''b-b-1 b-b-solid b-b-#e5e5e5''],
    [''column'', ''flex flex-col''],
    [''p-page'', ''p-20rpx pb-40rpx''],
  ],
  transformers: [
    // 启用 @apply 功能
    transformerDirectives(),
    // 支持变体组功能，例如<div ></div>
    transformerVariantGroup()
  ],
  rules: [
    [''pt-safe'', { ''padding-top'': ''env(safe-area-inset-top)'' }],
    [''pb-safe'', { ''padding-bottom'': ''env(safe-area-inset-bottom)'' }],
  ],
})

6)、unplugin-auto-import —— 自动引入

arduino
 体验AI代码助手
 代码解读
复制代码
npm install unplugin-auto-import --save-d

在vite.config.ts中配置：

php
 体验AI代码助手
 代码解读
复制代码

import AutoImport from ''unplugin-auto-import/vite''
// 其他配置省略，在plugins中配置自动引入
defineConfig({
    plugins:[
        AutoImport({
            imports: [''vue'', ''uni-app''],
            // 自动引入生成文件的位置
            dts: ''src/types/auto-import.d.ts'',
            // 可以自动导入 hooks
            // dirs: [''src/hooks''], 
            // 如果配置了eslintrc
            // eslintrc: { enabled: true },
            vueTemplate: true, // default false
          }),
    ]
})

7)、其他

包名作用
@uni-helper/uni-typesuniapp中的类型定义
@uni-helper/vite-plugin-uni-manifest使用 TypeScript 编写 uni-app 的 manifest.json
@uni-helper/vite-plugin-uni-pages使用 TypeScript 编写 uni-app 的 pages.json
sql
 体验AI代码助手
 代码解读
复制代码
npm install @uni-helper/uni-types @uni-helper/vite-plugin-uni-manifest @uni-helper/vite-plugin-uni-pages --save-d

按装以后，在项目根目录下新建manifest.config.ts和pages.config.ts

php
 体验AI代码助手
 代码解读
复制代码
// manifest.config.ts
import { defineManifestConfig } from ''@uni-helper/vite-plugin-uni-manifest''
import path from ''node:path''
import { loadEnv } from ''vite''

// 获取环境变量的范例
const env = loadEnv(process.env.NODE_ENV!, path.resolve(process.cwd(), ''env''))
const {
  VITE_APP_TITLE,
  VITE_UNI_APPID,
  VITE_WX_APPID,
  VITE_APP_PUBLIC_BASE,
  VITE_FALLBACK_LOCALE,
} = env

export default defineManifestConfig({
  name: VITE_APP_TITLE,
  appid: VITE_UNI_APPID,
  description: '''',
  versionName: ''1.0.0'',
  versionCode: ''100'',
  transformPx: false,
  locale: VITE_FALLBACK_LOCALE, // ''zh-Hans''
  h5: {
    router: {
      base: VITE_APP_PUBLIC_BASE,
    },
  },
  /* 小程序特有相关 */
  ''mp-weixin'': {
    appid: VITE_WX_APPID,
    setting: {
      urlCheck: false,
      postcss: true,
      es6: true,
      minified: true,
    },
    usingComponents: true,
    optimization: {
      subPackages: true,
    },
    lazyCodeLoading: ''requiredComponents'',
    scopedSlotsCompiler: ''augmented'',
  },
  uniStatistics: {
    enable: false,
  },
  vueVersion: ''3'',
})


php
 体验AI代码助手
 代码解读
复制代码
import { defineUniPages } from ''@uni-helper/vite-plugin-uni-pages''
import path from ''node:path''
import { loadEnv } from ''vite''

// 获取环境变量的范例
const env = loadEnv(process.env.NODE_ENV!, path.resolve(process.cwd(), ''env''))
const { VITE_APP_TITLE } = env

export default defineUniPages({
  easycom: {
    autoscan: true,
    custom: {
      ''^Cus(.*)'': ''@/components/Cus$1.vue'',
      ''^u-(.*)'': ''uview-ui/components/u-$1/u-$1.vue'',
    },
  },
  pages: [
    {
      path: ''pages/home/Index'',
      type: ''home'',
      style: {
        navigationStyle: ''custom'',
        enablePullDownRefresh: false, //当前页
        disableScroll: true,
        navigationBarTitleText: VITE_APP_TITLE,
      },
    },
    {
      path: ''pages/sign/Index'',
      style: {
        navigationStyle: ''custom'',
        enablePullDownRefresh: false, //当前页
        disableScroll: true,
        navigationBarTitleText: '''',
      },
    },
  ],
  subPackages: [
    {
      root: ''pages-sub'',
      pages: [
        {
          path: ''order/Index'',
          style: {
            navigationStyle: ''custom'',
            enablePullDownRefresh: false, //当前页
            disableScroll: true,
          },
        }
      ],
    },
  ],
  preloadRule: {
    ''pages/home/Index'': {
      network: ''all'',
      packages: [''pages-sub''],
    },
  },
})

tsconfig.json中增加@uni-helper/uni-types配置:

json
 体验AI代码助手
 代码解读
复制代码
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "noImplicitThis": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "outDir": "dist",
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@uni-helper/uni-types",
    ]
  },
  "vueCompilerOptions": {
    "target": 3,
    "plugins": ["@uni-helper/uni-types/volar-plugin"]
  },
  "exclude": ["node_modules"],
  "include": [
    "src/*.ts",
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.jsx",
    "src/**/*.vue",
    "src/**/*.json"
  ]
}

这里有一个常见错误，如果项目在vscode中提示类型“IntrinsicElements”上不存在属性“template”错误，那么需要将vueCompilerOptions.target设置成"auto"。

除此之外还可以安装eslint，老生常谈就不赘述了，源代码中默认安装了，不需要可以删除。

环境变量配置

在项目根目录下创建文件夹env：

New Image

每个文件中定义各自环境变量，公共不需要区分环境的放到.env中。 然后在vite.config.ts中配置：

New Image

好啦，这样基础框架就搭建好了，总体来说分为三步：

  1. 从官网安装基础模版
  2. 将package.json中不需要的依赖删除
  3. 安装其他依赖，例如pinia、sass、unocss以及开发规范和格式化等插件，然后根据不同的插件进行配置。
标签： 技术社区

相关文章