微信小程序使用npm安装包

小程序现在支持直接通过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‘ //方法二

然而。。。。。

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

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

官方有文档如下:

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

接下来说下遇到的问题:

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

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

原因:

没有package.json文件。

解决方法:

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

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

原文地址:https://www.cnblogs.com/sese/p/10157399.html

时间: 2024-10-09 14:52:34

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

微信小程序使用npm包步骤

这里以npm引入小程序官方UI组件库weui-miniprogram为例 1.在小程序根目录内,初始化npm(官方文档上是没写出这一步,这里做个补充) npm init 2.在小程序中执行命令安装 npm 包(这里使用了weui-miniprogram): npm install --save weui-miniprogram 3.在微信开发者工具中的菜单栏:工具 --> 构建 npm (这里记得先安装 npm 包,即步骤2): 完成构建后可以在目录树里看到了miniprogram_npm以及里

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

微信小程序支持npm 为了支持生态扩展,社区贡献者可以提供更加丰富的功能,已经支持了第三方小程序开发功能,见如下地址. 微信小程序支持npm https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包. 此文档要求开发者们对 npm 有一定的了解,因此不会再去介绍 npm 的基本功能.如若之前未

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

前言 刚入门微信小程序的时候,一切都基于微信web开发者工具,没有使用其他框架,也没有工程化的概念.当时做的项目都比较简单,单单用微信web开发者工具倒也得心应手.学了些东西后,就按捺不住地想跳出原生工具的条条框框,把近些日子学的东西都拿出来熬一熬. 已有的一个小程序项目使用了github上一个使用webpack.babel.sass开发的小程序脚手架(wxapp-boilerplate),我需要在不变动原有项目代码的基础上,使用gulp来重构项目的工作流. 使用体验:使用vscode配合各种插

记录如何发布微信小程序npm包

1.初始化项目 在项目根目录下使用一下命令 npm init 这时终端会提示你输入诸如包名,版本号等信息,如下: 2.新建src文件夹 新建src文件夹之后,把微信小程序自定义组件的index.js.index.wxss.index.json.index.wxml四个文件都拉到src文件夹里面即可.文件目录如下图: 3.修改package.json文件 在 package.json 文件中新增一个 miniprogram 字段,指向src文件即可.这是官方文档发布npm的约束条件.npm支持 微

反编译微信小程序

最近看了个微信小程序古诗词全集,想知道他的前后端是怎么实现的,所以就想到了反编译.小程序安装后会有个wxapkg格式的文件存在/data/data/com.tencent.mm/MicroMsg/*****/appbrand/pkg/目录下,拿到这个文件后在电脑上使用大神写的反编译脚本就可以得到完整的程序目录了,可以直接在微信开发者工具里打开. 获取安装包 1.安装mumu模拟器.微信.小程序.RE文件管理器 测试过夜神.51等模拟器,最后发现网易的mumu模拟器最好用. 找到wxapkg文件后

微信小程序 --01

微信小程序开发基础 -- 开发前的准备 缘由 1月9日张小龙微信小程序正式上线,因为微信,所以小程序从诞生开始就头戴巨大的光环,很多的团队,公司以及开发的个体都眼巴巴的盯着这个小程序.而那个时候我却在全力以赴的研究node,所以也没有仔细的研究这个风风火火的小程序.本以为此生无甚交集,但是最近公司却准备开发小程序,而我也"幸运"的被选中...... 小程序上线有有一段时间了,虽然还是在不断的更新,但是却大体趋于稳定,网上也积累了一定的教程和帖子,所以在研究了一下之后也就决定将自己学习小

微信小程序购物商城系统开发系列-工具篇

微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址https://mp.weixi

微信小程序的认识和开发适用性

来源:三节课课堂笔记 小程序认知 初识小程序. ? 目前微信小程序包括各类公众号接口的情况: ? 那么微信拥有的功能产品和对应的互联网产品有哪些: ? 小程序相当于AppStore应用分发市场: ? ? 张小龙对小程序的定义:用完即走.触手可及. 小程序有以下特点:安装包只有1024K大小,用户即用即搜(新的应用场景:直达服务). ???? 结合小程序的特点和新的应用场景,小程序会有哪些机会? 从APP照搬复制:各种开发门槛较低的查询类产品可能会大量复制过来,但照搬不是最好的思路. 别硬拼渠道:

微信小程序开发感受

研究了大概有一个多星期的小程序了,说一下感受,之后会随时更新,一边学习,一边加上一部分学习代码和心得.我是一个前端厂里的新手,搬砖的时间不是很长,所以到一部分知识的理解浅之又浅,所以只能说自己的理解,有出错的地方欢迎批评指正. 微信小程序目前处于公测阶段,邀请了多少家企业测试,不知道~,这些都不重要,appID没有的话,可以选择无ID进去,下载官方的开发工具 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=14