微信小程序使用vant-weapp的UI库
程序员文章站
2022-07-05 10:52:26
首先看一下目录结构在miniprogram中执行 首先要有nodejs环境npm init 执行完过后会有一系列的回车,在这里注意一下,在第二的回车的时候有一个版本的选择。这里默认是的1.0.0,官网的不是,根据官网的来选择,否则的话会缺少一些组件,我就遇到过这种问题。执行完npm initnpm i @vant/weapp -S --production生成如下目录节构然后在微信小程序中选择使用npm然后在app.json中引入,这里组件是按需引入 "usin....
首先看一下目录结构
在miniprogram中执行 首先要有nodejs环境
npm init
执行完过后会有一系列的回车,在这里注意一下,在第二的回车的时候有一个版本的选择。这里默认是的1.0.0,官网的不是,根据官网的来选择,否则的话会缺少一些组件,我就遇到过这种问题。
执行完
npm init
npm i @vant/weapp -S --production
生成如下目录节构
然后在微信小程序中选择使用npm
然后在app.json中引入,这里组件是按需引入
"usingComponents": {
"van-button": "../../miniprogram/miniprogram_npm/@vant/weapp/button/index",
"van-cell": "../../miniprogram/miniprogram_npm/@vant/weapp/cell/index",
"van-row": "../../miniprogram/miniprogram_npm/@vant/weapp/row/index",
"van-col": "../../miniprogram/miniprogram_npm/@vant/weapp/col/index",
"van-action-sheet": "../../miniprogram/miniprogram_npm/@vant/weapp/action-sheet/index",
"van-notice-bar": "../../miniprogram/miniprogram_npm/@vant/weapp/notice-bar/index",
"van-tree-select": "../../miniprogram/miniprogram_npm/@vant/weapp/tree-select/index",
"van-card": "../../miniprogram/miniprogram_npm/@vant/weapp/card/index",
"van-submit-bar": "../../miniprogram/miniprogram_npm/@vant/weapp/submit-bar/index",
"van-panel": " ../../miniprogram/miniprogram_npm/@vant/weapp/panel/index",
"van-field": " ../../miniprogram/miniprogram_npm/@vant/weapp/field/index",
"van-dropdown-menu": "../../miniprogram/miniprogram_npm/@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "../../miniprogram/miniprogram_npm/@vant/weapp/dropdown-item/index",
"van-icon": "../../miniprogram/miniprogram_npm/@vant/weapp/icon/index"
}
这样就可以在页面中使用了
<van-button type="info" wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
授权登录
</van-button>
本文地址:https://blog.csdn.net/qq_40183281/article/details/107198759