微信小程序npm构建小程序及vant weapp组件使用方法

来源:互联网项目开发 作者:微信小程序开发 浏览:1641 发布日期:2019-11-13 10:33:49
[导读]:Vant Weapp是移动端Vue组件库Vant的小程序版本,两者基于相同的视觉规范,提供一致的API接口助力开发者快速搭建小程序应用,我们使用npm来安装Vant Weapp小程序组件


Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。


首先vant-weapp官网

https://github.com/youzan/vant-weapp


具体vant小程序使用说明步骤如下:


第一步,我们右键进入小程序根目录


第二步,在命令窗口输入以下命令下载小程序 vant weapp组件

npm i vant-weapp -S --production


第三步,执行一下命令初始化npm 生成 package.json

npm init


第四步,使用小程序开发者工具构建NPM包(如果不执行第四步将提示错误大意是找不到package.json),操作如下


接下来就可以正常使用vant weapp组件来开发了


使用组件

以按钮组件为例,只需要在对应 json 文件中引入按钮对应的自定义组件即可

{  "usingComponents": {    "van-button": "/path/to/vant-weapp/dist/button/index"
  }
}

接着就可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>




声明:本文由互联网项目开发 心电算法智能心电解决方案 归纳整理请尊重我们的版权,一般未得本站授权不允许转栽如转载请务必注明来源 https://www.jeecn.com/news/view-11.html