微信小程序开发--vant
来源:     阅读:469
依创模板店
发布于 2020-11-08 03:51
查看主页

今天把小程序里面的一个库引用一下,顺便说下怎样使用,用的其实挺简单的,和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

    其余的组件的话,基本方法文档里面都有的,需要哪个引用哪个即可以了

免责声明:本文为用户发表,不代表网站立场,仅供参考,不构成引导等用途。 系统环境 windows
相关推荐
Esentire网络安全威胁情报:IIS的网络攻击量达到新峰值
聊聊rocketmq的PullConsumerImpl
IBM收购Red Hat 总价值约340亿美元
一道高级iOS面试题(runtime方向)
js跳转页面详解
首页
搜索
订单
购物车
我的