小程序现在支持直接通过npm安装包了,点击这里了解更多。

记录一下我自己的安装步骤及安装过程中遇到的一些问题。希望能够帮助到正在阅读此篇文章的你~

我就直接通过在项目根目录安装miniprogram-datepicker做演示了。

1.在项目根目录下面新建文件夹:node_modules。

2.终端进入到node_modules文件夹所在的目录

(注意不是node_modules文件夹里面),在此例中就是根目录了。

执行:

cnpm i miniprogram-datepicker -S --production

我这里做了淘宝镜像映射,所以用的cnpm,如果没有做该映射,你就用npm。

3.安装好之后,勾选 “使用npm模块”

4.点击开发者工具中的菜单栏:工具 --> 构建 npm

这一步完成之后你会看到跟node_modules同级多了一个文件夹 miniporgram_npm

5.直接引用该模块了

因为这个是自定义组件,所以我们在需要使用 datepicker 的页面page.json中添加 datepicker 自定义组件配置:

{
"usingComponents": {
"datepicker": "miniprogram-datepicker"
}
}

我们还可以通过js引入npm包:

const myPackage = require('packageName') //方法一
import { myPackage} from 'packageName' //方法二

然而。。。。。

我发现我引用的时候报错。。。。

这个问题我还未解决。。。如果有知道解决方案的,望告知。不甚感激~

官方有文档如下:

所以我觉得它应该会自己找这个模块,一直到根目录。但是事实没有,我不知道是不是我理解错了。。。

-----12.26补充-----

出现上面这个问题是因为我用的cnpm安装包,不能用cnpm,只能用npm。

详情可查看:npm安装包引用提示找不到该模块

-----//12.26补充-----

接下来说下遇到的问题:

1.node_modules文件夹需要自己创建。

2.执行上面第4步,也就是 构建npm 的时候一直提示 找不到node_modules模块。

原因:

没有package.json文件。

解决方法:

在安装npm包的时候,需要用到 -S,完整的命令语句是 npm install 安装包名字 -S --production。

经测试发现,如果没有添加-S就不会生成package.json文件。官方有文档如下:

微信小程序使用npm安装包的更多相关文章

  1. 微信小程序使用npm安装第三方库

    微信小程序在 2.2.1 版本后增加了对 npm 包加载的支持,使得小程序支持使用 npm 安装第三方包. 之前在微信开发者工具选择“构建npm”会报错“没找到node_modules”目录”,这是因 ...

  2. 微信小程序 - 使用npm(第三方包)

    使用示例: 1. 开启“使用npm模块” 2. 新建 node_modules 文件夹 3. cd到新建 node_modules 所在的目录(非node_modules文件夹内) npm insta ...

  3. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

  4. 原生微信小程序脚手架(支持npm)

    微信小程序支持npm 为了支持生态扩展,社区贡献者可以提供更加丰富的功能,已经支持了第三方小程序开发功能,见如下地址. 微信小程序支持npm https://developers.weixin.qq. ...

  5. 使用gulp构建微信小程序工作流

    前言 刚入门微信小程序的时候,一切都基于微信web开发者工具,没有使用其他框架,也没有工程化的概念.当时做的项目都比较简单,单单用微信web开发者工具倒也得心应手.学了些东西后,就按捺不住地想跳出原生 ...

  6. 微信小程序导入Vant报错

    作者:如也_d1c0链接:https://www.jianshu.com/p/0d2332984f8c来源:简书简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处. 先放出来Vant ...

  7. 微信小程序没找到构建npm或者没找到node_modules目录以及如何在小程序中引入vant weapp组件

    微信小程序没找到构建npm或者没找到node_modules目录解决方法如下: 按照微信小程序提供的文档npm install是不行的,直接提示没找到可构建的npm包. 1.直接安装:npm init ...

  8. 微信小程序没有找到可以构建的npm包

    如果是云开发小程序 ,cmd窗口进入到小程序根目录下的miniprogram目录, 输入npm init 输入包的相关属性,随便输入即可. 完成后会出现一个package.json文件. 如果是其他类 ...

  9. 微信小程序中使用 npm包管理 (保姆式教程)

    打开自己的微信小程序项目,在勾选这个选项 然后在第一次应该是失败的提示"没有找到可以构建的npm包". 在 小程序的根目录下比如我的项目如图: 右击鼠标在终端中打开. 然后输入:n ...

随机推荐

  1. Android编译环境配置(Ubuntu 14.04)

    常识:编译Android源代码需要在Linux系统环境下进行... 在Linux中,开发Android环境包括以下需求:Git.repo.JDK(现在一般使用OpenJDK)等:其中,Git用于下载源 ...

  2. STM32——TIM2定时器定时

    STM32 中一共有11 个定时器,其中2 个高级控制定时器,4 个普通定时器和2 个基本定时器,以及2 个看门狗定时器和1 个系统嘀嗒定时器.其中系统嘀嗒定时器是前文中所描述的SysTick,看门狗 ...

  3. 利用select检索数据

    没错这就是DQL,数据查询语言.来看看怎么用. select语句按照复杂程度来说分为简单查询.where查询.多表查询.子查询等. 先来看看select的语法 1.select 2.[distince ...

  4. redis(六)

    安装包 到中文官网查找客户端代码 联网安装 sudo pip install redis 使用源码安装 unzip redis-py-master.zip cd redis-py-master sud ...

  5. jquery中遍历

    1.jQuery--Dom遍历 1)jquery遍历---祖先元素 parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>).也可以使用可选参数来过 ...

  6. redis 连接池 hiredis

    对Hiredis进行了简单封装 1.API进行统一,对外只提供一个接口: 2.屏蔽上层应用对连接的细节处理: 3.底层采用队列的方式保持连接池,保存连接会话: 4.重连时采用时间戳进行控制,每隔一定时 ...

  7. react-native 报错 RawText "" must be wrapped in an explicit <Text> component

    刚才又遇到了一个坑,找了好久,问题如下: 开始以为是Text标签怎么有问题了,结果是下面的原因影响的: 上图第二行,标签和注释中间多了一个空格,就会报这个错误. 解决办法 1.将空格删掉 <Re ...

  8. java内存配置举例

    常见配置举例  堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~ ...

  9. google 地址

    http://ec2-54-250-200-50.ap-northeast-1.compute.amazonaws.com/ http://www.joesauve.com/async-dapper- ...

  10. Deepin 15.4 个性化设置

    2017.10.03,开始使用 Deepin 15.4.1 桌面系统 Chrome 版本 60.0.3112.78(正式版本) (64 位) 1.开启 ls 别名: vim .bashrc 去掉以下代 ...