uniapp+vue3+vite+t架构下开发小程序-小程序配置

小q同学
2,739 阅读4分钟

背景

说说为啥会有这篇文章，4月初的时候写了一篇《uniapp+vue3+vite+typescript架构搭建小程序》，大家问的最多的还是用这套架构怎么去开发小程序。这给了我不小的启发，让我明白了一个好的架构设计一定是要让开发者开发体验更加舒服的，而不是一味的去堆一些技术，这样设计的架构设计只能存在于技术博客里面。但查找了一番类似文章发现更多的(包括我)确实是只分享完如何搭建项目，真正如何开发却只言片语，所以我打算写一篇这样的文章，去记录这个架构下如何去开发项目。

好啦，说完感受以后咱们这系列文章的整体设计吧。我将在这篇文章中去记录

  1. 如何配置小程序

  2. 如何在项目中使用TS和vue开发

  3. 如何在这项目中使用uniapp框架

  4. 如何在项目中使用第三方组件与工具

  5. 如何做代码检查。

系列文章

uniapp+vue3+vite+typescript架构搭建小程序

uniapp+vue3+vite+typescript架构下开发小程序

环境记录

这篇文章的开发环境先会在微信小程序环境下开发，会涉及一些小程序平台差异化的处理，但不会展开详述。以下文章中环境就默认未微信小程序啦。

名称版本
uniapp3.0.0
vite4.0.4
vue3.2.45
typescript4.9.4

如何做小程序中的配置

  1. 页面配置 2. 基础配置（vite，config，package.json , ） 3. 分包&预加载配置

全局配置与页面配置

全局配置

如何需要一些全局配置，最常关注的应该就是pages.json，manifest.json，package.json这三个文件了。

pages.json

有关pages.json的作用大多是对整体页面的一个配置，包含路由，全局样式，tabbar，分包，预加载等等，api这里不一一展开介绍，如不懂的地方可以查阅文档pages.json页面路由。

说一下分包和预加载。分包使用subPackages字段，分包举个实例，在与pages文件夹同级创建一个pageA文件夹，名字可以随便取，这里为了方便取了pageA，在pageA中添加index文件夹，里面放index.vue文件。如下所示：

创建完成后配置pages.json:

{
  "pages": [{ "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } }],
  "subPackages": [
    {
      "root": "pageA",
      "pages": [
        {
          "path": "index/index",
          "style": { "navigationBarTitleText": "uni-app" }
        }
      ]
    }
  ],
	...
}

这样分包配置就完成了，如有不懂得地方请参考官方文档：传送门。

分包预加载的话使用preloadRule字段配置，作用就是进入小程序时，自动预下载需要的分包，提升进入后续分包的加载速度。一起来看配置

{
   "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["pageA"]
    }
  },
	...
}

我创建页面时首先需要创建文件夹和文件，接着还需要去pages.json中配置路由，很麻烦，我就简单写了一个自动化脚本来做自动增加文件。命令行执行pnpm run news，详见github：传送门。

manifest.json配置

这个文件是应用的配置文件。配置像小程序名称，不同平台appid等。详见：传送门

这里已微信小程序为例配置：

{
 "name": "uniapp_vue3_ts_demo",
  "appid": "",
  "description": "这是一个uniapp+vue3+ts的小程序demo项目",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,

  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true,
    "optimization": {
        "subPackages": true
      }	
    }
	....
}

"optimization":{"subPackages":true}开启分包优化

package.json

这个和一般项目中的package.json一样的，uniapp加了一个"uni-app"的扩展配置，也不太过多介绍，详情见文档：传送门

vite.config.ts

vite的话说实话我玩的页不是特熟，就是常用的server，路径别名配置。server，build小程序好像也不太需要配置的样子。所以就配了一个路径别名

export default defineConfig({
  plugins: [uni()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src") // 路径别名配置
    }
  }
})

这里遇到一个坑，如果package.json里面设置了"type": "module"，运行的时候vite.config.ts会报错uni is not a function。需要去掉这个配置。

以上基本就是这个demo中涉及到配置相关的内容记录。下一篇记录如何在项目中使用TS和vue开发。

github地址

这个是这个demo的git地址uniapp_vue3_demo，分支是features/dev,有兴趣可以看一下完整的demo。

下期介绍

下期记录在这个架构下如何使用vue3语法开发，如何使用ts，如何使用uniapp的组件和api，引用第三方工具（引用了pinia做状态管理）。敬请期待，如有问题欢迎大家给我留言。

avatar
文章
阅读
粉丝