zoukankan      html  css  js  c++  java
  • 微信小程序如何使用Vant

    写在前面


    看了Vue之后,发现了Vant这个移动端的组件库很不错。然后,就想在小程序引用这个组件。

    看了微信小程序的官网介绍可以引用第三方的组件库。但是,要求微信开发工具的版本必须要在2.2.10 以上的版本才可以

    通过 npm 的方式引用Vant 移动端的组件库。

    环境


    操作系统:win7 旗舰版

    微信开发者工具版本:v1.02.1911180

    创建小程序


    首先,我们需要打开微信开发者工作。创建一个新的空的项目。如下图所示:

    然后,新建一个目录用于存放引用的组件库。如下图所示:

    初始化npm


    选中新建文件,鼠标右键选择在终端打开。此刻,会打开一个命令面板。如下图所示:

    然后,在控制面板中输入 npm init 。如下图所示:

    输入名字,默认是自己创建的文件夹。如果你命名的文件夹的名字不长度的话。它会有提示:Sorry.name can no longer contain capital letters

    此时,你只需重新输入一个长一点的名字即可。然后,后面的都默认回车就可以了。如下图所示:

    我们会发现在小程序的文件夹中自动创建了package.json。如图所示:

    安装Vant依赖包


    输入命令npm i vant-weapp -S --production 回车。如下图所示:

    在小程序的项目中,创建了node_modules包。

    构建npm


    我们回到微信小程序的开发者工具中。选择右上角 工具-> 构建npm。如下图所示:

    构建成功后,会在文件夹多一个miniprogram_npm文件夹。如下图所示:

    最后,需要在详情中勾选使用npm模块的选项。如图所示:

    至此,已经完成了对vant组件的引用。

    使用组件库


    首先,我们需要在json文件夹中,引用组件。如下图所示:

    然后,在wxml页面引用。如下图所示:

    最后,成功引用组件。如下图示:

  • 相关阅读:
    html之长文本框置顶
    Red Hat Enterprise Linux Server 6.5安装GCC 4.9.2
    精通正则表达式
    解决UNION ALL合并两个结果集后排序的问题
    ELK搭建日志管理系统记录
    Spring Boot使用@ConfigurationProperties 读取自定义的properties的方法
    maven配置profile,按指定环境打包
    java自定义标签,tld文件,获取数据字典的值
    JAVA实现RSA签名、验签
    jquery.validate.js中的remote用法
  • 原文地址:https://www.cnblogs.com/ZengJiaLin/p/12218676.html
Copyright © 2011-2022 走看看