小程序现在支持直接通过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. Java基础-对象的内存分配与初始化(一定要明白的干货)

    首先,什么是类的加载?类的加载由类加载器执行.该步骤将查找字节码(classpath指定目录),并从这些字节码中创建一个Class对象.Java虚拟机为每种类型管理一个独一无二的Class对象.也就是 ...

  2. BZOJ4855 : [Jsoi2016]轻重路径

    首先用树状数组维护dfs序来快速支持一个点子树大小的询问. 每次删掉一个叶子时,从根开始往叶子走,显然只有$2size[x]\leq size[father]$的点的父亲才有可能换重儿子. 从根开始往 ...

  3. bzo1606: [Usaco2008 Dec]Hay For Sale 购买干草

    1606: [Usaco2008 Dec]Hay For Sale 购买干草 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1338  Solved: 9 ...

  4. Mac配置本地hadoop

    Mac配置本地hadoop 这学期要学习大数据,于是在自己的mac上配置了hadoop环境.由于Mac是OSX系统,所以配置方法跟Linux类似 一.下载hadoop 从官网下载压缩包. $ll to ...

  5. UVALive - 4885 Task 差分约束

    Task 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page ...

  6. 超级牛皮的oracle的分析函数over(Partition by...) 及开窗函数 (转)

    http://zonghl8006.blog.163.com/blog/static/4528311520083995931317/ over(Partition by...) 一个超级牛皮的ORAC ...

  7. python之面向对象的程序设计

    一.什么是面向对象的程序设计 面向过程的程序设计的核心是过程,过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西. 优点是:极大的降低了程序的复杂度 缺点是: ...

  8. JS_高程3.基本概念(5)语句

    1.if语句 2.do-while语句:后测循环语句,循环体内的代码至少执行一次. 3.while语句:前测循环语句. 4.for语句:前测循环语句. 注意:在ECMAScript中不存在块级作用域, ...

  9. JS膏集05

    JS膏集05 1.复习 闭包内的函数也可以使用参数 闭包的建议写法 ) 2.浅拷贝 相当于把一个对象中的所有的内容复制一份给另一个对象.直接复制. 或者说,就是把一个对象的地址给了另一个对象,它们指向 ...

  10. 8、jsのBOM对象与DOM对象

    javascript的Bom和Dom对象使我们学习的重点,这篇随笔可以重点阅读 本篇导航: BOM对象 DOM对象 DOM Event(事件) 实例练习 一.BOM对象 1.window对象 所有浏览 ...