在微信小程序中引入第三方组件,需要在项目根目录下的 project.config.json
文件中添加 usingComponents
字段,将需要引入的组件路径注册进去。例如:
{
"miniprogramRoot": "./",
"usingComponents": {
"van-button": "/miniprogram_npm/vant-weapp/button/index"
}
}
其中,van-button
是注册的组件名称,/miniprogram_npm/vant-weapp/button/index
是组件在 node_modules
中的路径。
然后,在需要使用该组件的页面的 json
文件中,同样需要将组件路径引入:
{
"usingComponents": {
"van-button": "miniprogram_npm/vant-weapp/button/index"
}
}
在页面的 wxml
文件中,即可使用该组件:
<van-button type="primary">按钮</van-button>
其中,van-button
就是之前注册的组件名称。
需要注意的是,引入第三方组件时,需要先通过 npm
安装该组件,并将其添加到 dependencies
或 devDependencies
中。同时,还需要在小程序开发工具的菜单栏中选择「工具」 -> 「构建 npm」,将第三方组件构建到小程序目录中。