微信小程序 第三方组件的运用 vant-weapp

小程序中使用别人开发的组件,需要借助node npm 等工具,从而让组件开发具备工程化和模块化。  以有赞的   vant-weapp 为例一下是具体步骤

vant-weapp 官方文档

1、桌面创建小程序项目   demo  在开发工具中打开

2、打开项目目录 在地址栏中输入 cmd 打开我们的命令行终端 (项目名称必须符合命名规则)

3、项目初始化 npm init -y 回车 在项目目录下会出现一个 package.json 的文件

4、下载 vant-weapp 框架 https://github.com/youzan/vant-weapp

  • npm i vant-weapp -S --production 这个是安装 0.x版本
  • npm i @vant/weapp -S --production 安装最新版本

5、构建小程序 npm

  • 打开小程序开发工具,找到工具选项,点击构建npm (等待)
  • 击开发工具中的详情-->本地设置----->勾选使用npm

6、项目根目录下会出现一个 miniprogram_npm 的文件夹

7、使用第三方组件

  • 打开miniprogram_npm文件夹----@vant-----weapp  文件夹下的所有组件都可使用

  •  在page-----index.json中注册   注意:两种路径都可以成功引入 "VantCheckbox" : "@vant/weapp/checkbox"  和  "VantCheckbox" : "../../miniprogram_npm/@vant/weapp/checkbox"    

  •  在 index.wxml中使用

多使用几个

猜你喜欢

转载自blog.csdn.net/weixin_41040445/article/details/114499598