小程序中使用npm引入扩展组件库(举例:使用微信开发工具来加载扩展组件recycle-view)
发布于 3 年前 作者 lianglei 4957 次浏览 来自 分享

微信小程序平台提供了一些扩展组件库,可以有效地解决一些特定问题。但是,对于没怎么接触过npm和微信开发者工具的同学来说,可能想通过npm来引用一个扩展组件库的过程并不是看上去那么容易,这里我把主要操作要点梳理一下。

注:1、以下操作仅在微信开发工具以及电脑命令窗口中进行;

2、本文主要解决用npm引入recycle-view的问题,至于如何使用recycle-view,还需参照官方文档。

1、在微信开发者工具中,点击详情-本地设置,勾选使用npm模块:

2、使用电脑的命令窗口打开miniprogram目录(小程序根目录,不包含云函数目录哈):

1)初始化npm:输入命令 npm init (如果该项目之前没用过npm,此步骤不可省略),然后在命令窗口中一路回车即可。

2)安装recycle-view:输入命令 npm install --save miniprogram-recycle-view

3、在微信开发者工具中,点击 工具-构建npm

4、在要引入页面的 .json文件中引用recycle-view和recycle-item:

 “usingComponents”: {

    “recycle-view”: “miniprogram-recycle-view/recycle-view”,

    “recycle-item”: “miniprogram-recycle-view/recycle-item”

  }

5、在要引入页面的 .wxml文件中就可以正常使用recycle-view了:

具体使用方式参考官方文档:https://github.com/wechat-miniprogram/recycle-view

回到顶部