今天把小程序里面的一个库引用一下,顺便说下怎么使用,用的其实挺简单的,和vue的组件用法差不多,只是有些参数或引用方法不同而已
1.引用vant
1.1首先需要先把小程序创建一个,然后进去之后把nodejs环境需要安装好,其实有nodejs的话,直接npm init -y就可以了
1.2然后安装vant,因为这里使用的小程序所以需要安装的是@vant/weapp
1.3然后安装好之后,就需要在开发者工具里面点击工具栏里‘工具’=> ‘构建npm’然后就需要等待个几秒吧,我这里弄一下,需要2000左右
1.4弄好之后就可以在页面里面引用了
这里面的index.json,里面添加下需要用到的组件
{
"navigationBarTitleText":"首页",
"usingComponents": {
"van-field": "@vant/weapp/field/index"
}
}
就像这样,使用到input,然后就看到文档里面引用需要用van-field,然后页面里面使用的时候就可以直接这样写了
2.使用vant组件
组件引用过来之后就可以使用了,下面是代码
<view class='main'>
<van-field
value="{{ value }}"
placeholder="请输入用户名"
border="{{ false }}"
bind:input="onChange"
/>
</view>
里面绑定的一些参数什么的,直接可以在js里面给他们变量就可以了
data: {
value:''
},
onChange(event) {
// event.detail 为当前输入的值
console.log(event.detail);
},
vant-weapp官网文档地址
https://youzan.github.io/vant-weapp/#/field
其他的组件的话,基本方法文档里面都有的,需要哪个引用哪个就可以了