目录
前言
在做项目的过程中,使用一些现有的框架能极大地提升开发效率。笔者近期在做一个项目,需要开发一个微信小程序,借此机会学习一个新的框架Vant Weapp,顺便记录一下。由于本人才疏学浅,有错误之处恳请谅解,一起交流。
一、新建微信小程序目录
在桌面新建文件夹,我这里命名为wx,然后通过微信开发者工具导入新项目。
二、通过npm安装
1.打开命令行窗口,cd至上述目录
cd C:\Users\86135\Desktop\wx
2.输入以下命令
npm i vant-weapp -S --production
3.执行以下命令
npm init
然后会提示一些配置,我们初学者先不用管,一直回车就行
三、修改app.json
将 app.json 中的 "style": "v2"
去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
四、构建npm
打开微信开发者工具,依次点击工具->构建npm,等待提示完成构建后,点击详情->本地设置->使用npm模块,至此构建完成,即可引入组件。
五、引入组件示例
此处以button为例,在app.json或index.json中配置Button对应的路径即可。
在构建完npm后会生成miniprogram_npm目录,找到该目录下的button路径,按如下在app.json中配置
"usingComponents": {
"van-button": "miniprogram_npm/vant-weapp/button/index"
}
然后就可以在index.wxml中使用这些按钮了,效果如下。