如何在微信小程序中如何使用外部组件

微信小程序中使用Vant组件

参考vant文档:https://youzan.github.io/vant-weapp/#/home

一、安装Vant

1. 初始化npm

   在项目的根目录打开终端

   npm init -y
   

2. 使用npm进行安装

   

二、配置json文件

• 首先要删除 app.js 文件中的 style

  

• 修改project.config.json 文件

  

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

三、构建npm包

• 安装完成后会有一个node_modules文件夹，你下载的组件就在这个目录中

• 但是，微信小程序默认不能直接使用node_modules里面的工具

  在 微信开发者工具中点击 详情->本地设置->使用npm模块

  

• 在从工具中构建npm

  

  构建完成之后会提示

  

四、使用

引入组件，以button按钮作为示范，其余的组件引入方法一致

如果许多页面都要用的话，就将组件引入到app.json中

在pages 和window字段同级写入

"usingComponents":{
    "vant-button":"path/to/@vant/weapp/lib/button/index"
}

如果只在单页面使用的话，只需在本页面的json文件中引入就可以