原生小程序引入vant weapp

原生小程序引入vant weapp

• 环境：原生微信小程序、vant weapp 1.9.0

本文代码基于微信小程序开发者工具1.05.21xxx下，支持ts、sass，所以不用编译成js、wxss

• vant weapp官网: https://vant-contrib.gitee.io/vant-weapp/#/quickstart

npm安装

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

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

修改 app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
    // 删除"style": "v2"
  "sitemapLocation": "sitemap.json"
}

修改 project.config.json

就是将npm下载的内容让微信小程序加载。

...
	// 手动配置, 我的构建失败原因是默认为关闭手动配置npm管理(false), 开启后就正常了
    "packNpmManually": true, 
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/" 
      }
    ],
...

微信开发者工具构建npm

[可选: 使用typing提示]

使用ts肯定要用, js直接跳过

# 通过 npm 安装
npm i -D miniprogram-api-typings

# 通过 yarn 安装
yarn add -D miniprogram-api-typings

{
  "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"], // 基于ES2020 肯定会向下兼容ES5 6 7...(创建项目默认)
    "typeRoots": ["./typings"],


	// 添加的内容
    "baseUrl": ".",
    "types": ["miniprogram-api-typings"],
    "paths": {"@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]},


  },
  "include": [
    "./**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

使用 or 测试

index.wxml中添加代码

  <van-button loading type="info" loading-text="加载中..." />

效果：