坑.png

1. 安装前的准备:

需要nodejs环境,安装地址: nodejs
如果已经安装,检查版本,如果是正常的就可以

npm -v
node -v

错误:

cli npm v9.8.0 does not support Node.js v16.3.0. This version of npm supports the following node versions: ^14.17.0 || ^16.13.0 || >=18.0.0. You can find the latest version at https://nodejs.org/.

这里如果出现npm和node版本不匹配问题,解决办法:通过上面的官网重新下载,直接覆盖安装,网上一堆虚头巴脑的解决方案,我都尝试过,没搞定,直接覆盖安装解决;

下面是重建的TS 和 JS的小程序模板的安装方式.两种方式,安装是有所区别的.

2.TS模板安装Vant Weapp

步骤如下:

1. 创建工程;
2. cd到工程目录;
3. 终端 npm init;
4. 终端 npm install;
5. 终端 npm i @vant/weapp -S --production;
6. 关闭工程,重启;
7. 配置app.json ,将 app.json 中的 "style": "v2" 去除;
8. 找到project.config.json文件,删除如下代码

"useCompilerPlugins": [
   "typescript"
],

9. project.config.json文件中添加如下代码:

,
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]

10. 终端执行 npm i tdesign-miniprogram -S --production
11. 把上面第8步删除的project.config.json文件中useCompilerPlugins再补回来
12. 项目中工具 -->构建npm;

13. 确保你的代码的文件的层级关系和我的一致;如果你的miniprogram_npm和miniprogram是同级,直接把miniprogram_npm移动到miniprogram内.

    
    
    image.png
14. 按照官网进行引入测试,这里的路径,使用官网的@vant/weapp/button/index没生效,修改如下:

  "usingComponents": {
    "van-button": "../../miniprogram_npm/@vant/weapp/button/index"
  }


  <van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

image.png

到此,集成完毕!

相较于TS,JS的集成相对简单

3.JS模板安装Vant Weapp

步骤如下:

1. 创建工程;
2. cd到工程目录;
3. 终端 npm init;
4. 终端 npm install;
5. 终端 npm i @vant/weapp -S --production;
6. 关闭工程,重启(工程中要能加载出 node_modules 文件);
7. 配置app.json ,将 app.json 中的 "style": "v2" 去除;

8. 配置project.config.json

   
   
   image.png
9. 构建npm;

10. 引入button测试.

    
    
    image.png

完成!

问题1: 运行直接报错找不到@vant/weapp/button/index
解决办法:尝试自己定位@vant的路径
问题2: 引入button后可以正常显示,但是丢失了CSS样式
解决: 关闭工程重新打开,再次进行 上面步骤的 步骤3 ,步骤4 ,步骤5即可;
问题3: 构建是找不到 project.json文件
解决:请先执行 npm init 构建一个project.json,创建过程可以直接回车;