微信小程序原生+vantweapp+ts+less搭建记录

岩苍美津未
1,169 阅读5分钟

一. 新建项目

  • 我这里选择的是ts+less模板 image.png

二. typings 文件夹

原文地址

  • 使用微信小程序开发者工具创建的 Typescript 模版项目有一个 typings 文件夹，里面放着微信小程序的类型声明文件，同时 .tsconfig.json 的 compilerOptions.typeRoots 字段被设置为 ./typings，即一律从 ./typings 读取类型声明。

  • 下方是小程序 ts 模版创建的 .tsconfig.json 文件中的内容，各配置项目的意义和作用可参考 Typescript 的官方文档

    {
  "compilerOptions": {
    "strictNullChecks": true,
    "noImplicitAny": true,
    "module": "CommonJS",
    "target": "ES2020",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strict": true,
    "strictPropertyInitialization": true,
    "lib": ["ES2020"],
    "typeRoots": [
      "./typings"
    ]
  },
  "include": [
    "./**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

  • ts 默认从 node_modules/@types 读取类型声明文件，当设置了 typeRoots 后就只有 typeRoots 指向的类型声明会被读取（即 ./typings 文件夹下的类型），其他会被忽略。

  • ./typings 目录下的小程序类型声明可以手动更新。

  • 令人困惑的是，用微信开发者工具创建的 Typescript 模版自动创建了一个 package.json 文件，里面有一个名为 miniprogram-api-typings 的 devDependencies，微信官方工作人员建议：

    如果你是从工具的 ts 相关模板创建的项目，可以不用执行 npm install，工具会自动处理好小程序相关的声明文件。

  • 换言之，如果你用 ./typings，就不需要用 miniprogram-api-typings，可以把 miniprogram-api-typings 从 package.json 删除。

    {
  "name": "miniprogram-ts-less-quickstart",
  "version": "1.0.0",
  "description": "",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "",
  "dependencies": {},
  "devDependencies": {
    "miniprogram-api-typings": "^2.8.3-1"
  }
}

三. miniprogram-api-typings

  • 如果你不想用 ./typings，而是选择 miniprogram-api-typings，又应该怎么做呢？

  • 首先要删除 typings 文件夹，并删除 .tsconfig.json 的 compilerOptions.typeRoots 字段，接着参考 miniprogram-api-typings 使用文档，有两种使用方法：

    • npm install @types/wechat-miniprogram@latest；
    • npm install miniprogram-api-typings@latest，然后在 compilerOptions.types 设置 ["miniprogram-api-typings"]

    miniprogram-api-typings 在 npm 的版本号比 @types/wechat-miniprogram 更高，最近更新日期也更接近现在，所以用第二种方法应该更好一些。

  • 使用微信开发者工具创建的 ts 模版在 app.ts 等处使用了一个叫 <IAppOption> 的类型，改用 npm 安装类型声明而不是使用 ./typings 下的声明后 <IAppOption> 会提示不存在，可把它删除。

  • 使用微信开发者工具创建的 ts 模版有一个 ESLint 配置文件 .eslintrc.js，但里面并没有针对 Typescript 相关的规则，关于如何在 Typescript 项目下配置 ESLint，请参考微信小程序开发者工具配置 ESLint 的方法。

    image.png

四. 引入vant-weapp

  1. 点击空白部分，按ctrl+a后，再右键选择在外部终端中打开（根目录），在开发者工具内部的终端执行好像无法构建npm包） image.png

  2. 安装@vant/weapp

    # 通过 npm 安装 
npm i @vant/weapp -S --production

  3. 修改miniprogram/app.json

    app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

  4. 修改project.config.json文件

    此时直接构建会报错:message： NPM packages not found. Please confirm npm packages which need to build are belong to miniprogramRoot directory. Or you may edit project.config.json's packNpmManually and packNpmRelationList appid: wxa1dec343634d1042 openid: o6zAJswaz4XneDw3ZSCUg4yoy3Ns ideVersion: 1.06.2407120 osType: win32-x64 time: 2025-02-11 10:36:02

    未找到 NPM 包。请确认需要构建的 npm 包属于 miniprogramRoot 目录。或者您可以编辑 project.config.json 的 packNpmManually 和 packNpmRelationList

    请阅读微信官方的自定义构建 npm 方式

    • 配置 project.config.json 的 setting.packNpmManually 为 true，开启自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式
    • 配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和 miniprogramNpmDistDir 的位置 
      "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],
}

      • packageJsonPath 表示 node_modules 源对应的 package.json

      • miniprogramNpmDistDir 表示 node_modules 的构建结果目标位置

  5. 构建npm

    • 执行项目-》重新打开此项目（不要忘了）
    • 然后再点击 工具 -> 构建 npm

注意： skyline渲染引擎不支持原生导航栏。微信官方链接

  1. 使用-引入组件

    以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

    // 通过 npm 安装 
// app.json 
"usingComponents": { 
    "van-button": "@vant/weapp/button/index" 
}

五. 解决引入vant后包太大

参考 小程序中使用npm安装vant组件实现按需引入减少代码包大小，避免触发用户隐私协议

//package.json
{
  "name": "miniprogram-ts-less-quickstart",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "vant": "vant-tree-shaking --vantPath=miniprogram/miniprogram_npm/@vant/weapp"
  },
  "keywords": [],
  "author": "",
  "license": "",
  "dependencies": {
    "@vant/weapp": "^1.11.7"
  },
  "devDependencies": {
    "vant-tree-shaking": "^1.0.4"
  }
}

  • 引入vant前

    image.png

  • 引入vant后

    image.png

  • 优化后

    image.png

六. 引入Unocss

参考

我这里使用 unocss-preset-weapp 预设

//注意文件目录package.json
  "scripts": {
    "unocss": "unocss miniprogram/pages/**/*.wxml -c unocss.config.js --watch -o miniprogram/unocss.less",
    "unocss:build": "unocss miniprogram/pages/**/*.wxml -c unocss.config.js -o  miniprogram/unocss.less"
  },

//app.less
@import './unocss.less';

结果 image.png

image.png

将unocss和vant合成一条命令"build": "npm run unocss:build && npm run vant"

//package.json
  "scripts": {
    "unocss": "unocss miniprogram/pages/**/*.wxml -c unocss.config.js --watch -o miniprogram/unocss.less",
    "unocss:build": "unocss miniprogram/pages/**/*.wxml -c unocss.config.js -o  miniprogram/unocss.less",
    "vant": "vant-tree-shaking --vantPath=miniprogram/miniprogram_npm/@vant/weapp",
    "build": "npm run unocss:build && npm run vant"
  },

七. 封装请求

八. 路径别名

1. tsconfig.json里有如下配置

{
    "compilerOptions": {
        "baseUrl": ".", // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
        "paths": {
          "@/*": ["miniprogram/*"]
        }
    }
}
  1. app.json里设置路径别名
{
  "resolveAlias": {
    "@/*": "/*"
  }
}
  1. 使用
import { $get } from '@/utils/request';

八. 新建页面

  1. 选中pages，点击上面新建文件夹按钮,新建index(输入文件夹名)文件夹

    image.png

  2. 右键刚才新建的文件夹index,选择新建page，输入index（页面名称），最好和index文件夹同名 image.png

  3. 此时在app.json文件里就会生成刚刚新建的页面

    image.png

avatar
文章
阅读
粉丝