微信公众号开发

1、小程序Vant_WebApp组件库的安装步骤和简单使用

本文主要是介绍1、小程序Vant_WebApp组件库的安装步骤和简单使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

Vant

1、小程序对于npm的支持

目前,小程序当中已经支持使用npm安装的第三方包,通过使用这些第三方包,我们可以提高对小程序开发的效率,但是在小程序当中使用所谓的npm包有如下的三个限制

  • 不能支持依赖于Node.js内置库的包
    • 因为小程序当中并没有Node.js的环境,例如有些npm的包,它依赖于某些npm的模块,依赖于fs,path模块,这些是不能在小程序当中进行使用的
  • 不支持依赖于浏览器内置对象的包
    • 例如像Jquery,咱们在小程序当中是无法进行使用的,为什么呢?因为Jquery依赖于浏览器当中的Window对象,而小程序当中是没有的
  • 不支持依赖于C++插件的包
    • 在npm的有些包当中,一些负责加密的包,他们会依赖与npm的C++插件,来提高他们加密的效率和性能,小程序也没有C++的环境,所以不能使用的
  • 虽然npm上的包千千万万,小程序能够使用的包是非常少的,为数不多
  • 在使用这些npm包的时候需要判断这些包是否含有上述的三种情况,如果有的话,小程序是不可以使用的

image-20220531001029875

2、Vant Weapp

2.1、概述

  • Vant Weapp有赞前端开发的一套开源的小程序UI组件库,助力小程序开发者快速搭建和开发小程序的UI界面,他所使用的是MIT开源许可协议,对商业使用非常的友好
  • 类似于我们的Vue当中的ElementUI,都是由一些牛逼的前端团队开源出来的UI组件库
  • 官方文档地址

2.2、安装Vant

  • 在小程序当中安装Vant组件库有如下三个步骤
    • 通过npm安装
    • 构建npm包
    • 修改app.json
  • 详细操作教程:
  • 我们接下来是根据npm进行安装的,需要在环境当中安装Node.js,这里推荐一篇博文
  • Node.js安装

image-20220531001847721

1、搭建项目

image-20220531005822745

2、初始化项目配置

  • 在这里首先我们需要初始化一下这个项目,为了方便我们组件库的使用

  • 在初始化之前我们要确保小程序当中是否存在包管理文件package.json),没有的话我们需要打开命令行窗口进行创建

    • image-20220531005859879
    • 输入=>npm init -y指令
    • image-20220531005921209
  • 创建完毕

    • image-20220531005932674

3、安装我们的Vant组件库

  1. image-20220531003015981

  2. 目前的最新版本是1.10.3

  3. image-20220531003036847

  4. 我这里出现了一个错误,网络上的解决教程是删除掉这个.npmrc的文件,为了防止误删我将这个文件保存在我的小程序文件夹当中(D:\VXdevelopment\防止误删npmrc)

    • image-20220531004046826
    • npm安装报错 解决方法
  5. 输入我们的指令=>(npm i @vant/weapp@1.10.3 -S --production)

  6. image-20220531010028541

4、小程序构建npm包

  • 官方文档
    • image-20220531004110872
  • 我们自己来试试
    1. image-20220531004133160
    2. image-20220531010046487
    3. image-20220531010101760
    4. 目前小程序当中的本地设置当中已经没有了使用npm模块这个选项,应该是小程序自动勾选了这个模块,并不影响我们的使用
      • image-20220531010344758
    5. 至此,VantWebApp组件库安装完毕,我们可以根据开发文档进行开发了

2.3、简单使用Vant组件库

  1. 在app.json文件当中去除 style:v2的选项

    • image-20220531010436833
    • 官方文档解释
    • image-20220531010505078
  2. 设置 usingComponents配置项,添加我们需要使用的组件样式,其实就和自定义组件类似

    • image-20220531010618859

    • "usingComponents": {
          "van-button": "@vant/weapp/button/index"
        },
      
  3. 我们这里设置的是全局样式,如果需要在特定页面引用组件的话在对应的页面添加相对参数即可

  4. 在我们的index页面使用这个组件

    • image-20220531011252860

    • <van-button type="default">默认按钮</van-button>
      <van-button type="primary">主要按钮</van-button>
      <van-button type="info">信息按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
      <van-button plain hairline type="primary">细边框按钮</van-button>
      <van-button plain hairline type="info">细边框按钮</van-button>
      
  5. 更多详细步骤参考官方文档即可

这篇关于1、小程序Vant_WebApp组件库的安装步骤和简单使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!