小程序npm

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

允许用户从NPM服务器下载别人编写的第三方包到本地使用。

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

使用npm

小程序从基础库版本2.2.1开始支持使用 npm 安装第三方包,因此也支持开发和使用第三方自定义组件包。

1.在小程序中执行命令安装npm包

npm install -- production

production是npm包名称

node_modules必须在小程序根目录下,也可以存在于小程序根目录下的各个子目录中。但是不允许 node_modules 在小程序根目录外

2.在开发者工具的菜单栏点击工具工具 --> 构建npm

构建npm生成miniprogram_npm目录,而且只有miniprogram_npm会被算入小程序包的占用空间

 

3.  [endif]构建完成后即可使用 npm 包。

发布、制作npm

为了方便开发者能够快速搭建好一个可用于开发、调试、测试的自定义组件包项目,官方提供了一个项目模板,下载使用模板的方式有三种:

直接从 github 上下载 zip 文件并解压。

直接将 github 上的仓库 clone 下来。

使用官方提供的命令行工具初始化项目,下面会进行介绍。

官方命令行工具npm install -g @wechat-miniprogram/miniprogram-cli

初始化项目miniprogram init --custom-component生成模板工程

1.npm install安装依赖

2.npm run dev会在根目录下生成miniprogram_dev目录。

1.src中的源代码会被构建饼生成到miniprogram_dev/componentm目录下。

2.Eslint是默认开启的,如果不想自己调整规则的话可以在tools/config.js中将其关闭

3.miniprogram_dev是一个小程序项目目录,可以在这里查看自定义组件的效果

4.miniprogram_dis是自己创建的文件夹,用来存放做好的自定义控件,在构建npm的时候会将这个目录下的文件放到miniprogram_npm中(注:如果不放到改目录下会报错,该问题有待研究)

 
 
 

 

小程序npm(初级篇)的更多相关文章

  1. 使用wepy开发微信小程序商城第二篇:路由配置和页面结构

    使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...

  2. 使用wepy开发微信小程序商城第一篇:项目初始化

    使用wepy开发微信小程序商城 第一篇:项目初始化 前言: wepy小程序项目初始化的操作,官方文档看了好几遍,感觉写得不是很清楚. 这篇写得挺好的:小程序开发之wepy 1.初始化项目 (1)全局安 ...

  3. python爬取微信小程序(实战篇)

    python爬取微信小程序(实战篇) 本文链接:https://blog.csdn.net/HeyShHeyou/article/details/90452656 展开 一.背景介绍 近期有需求需要抓 ...

  4. JDownload: 一款可以从网络上下载文件的小程序第四篇(整体架构描述)

    一 前言 时间过得真快,距离本系列博客第一篇的发布已经过去9个月了,本文是该系列的第四篇博客,将对JDownload做一个整体的描述与介绍.恩,先让笔者把记忆拉回到2017年年初,那会笔者在看Unix ...

  5. 我的微信小程序第三篇(app.json)

    前言 端午节回家了,所以好多天没有更新,只想说还是待在家里舒服呀,妈妈各种做好吃的,小侄子侄女各种粘着我在室外玩,导致我三天下来不仅胖了一圈,还黑了一圈,上班第一天有同事就说我晒黑了,哭~~~,为了防 ...

  6. 微信小程序开发——进阶篇

    由于项目的原因,最近的工作一直围绕着微信小程序.现在也算告一段落,是时候整理一下这段时间的收获了.我维护的小程序有两个,分别是官方小程序和一个游戏为主的小程序.两个都是用了wepy进行开发,就是这个: ...

  7. 微信小程序开发入门篇

    本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的& ...

  8. 小程序npm构建

    npm initnpm install --productionnpm i  第三方组件名称  -S --production //重要

  9. 微信小程序 npm 找不到npm包 没有找到可以构建的npm包 如何使用第三方npm组件

    微信官方的npm文档 太模糊了,而且感觉把最重要的东西写在了最后面,我这里费了老大功夫才知道这个坑. 初次使用,首先要初始化 npm 初始化——> 找到 pages 这个文件夹,然后进入这个文件 ...

随机推荐

  1. 如何使用TG Pro for Mac的自定义控制功能完全覆盖系统

    在某些情况下,可能需要完全覆盖系统风扇控制并使用自定义算法.通过将Auto Boost规则的强大功能与覆盖系统功能相结合,可以使用TG Pro.请记住,当风扇模式设置为Auto Boost时,这将完全 ...

  2. 【原创】你的Redis怎么持久化的

    引言 (本文改编自生活真实案例,如有类同,绝不是巧合!) 端午节,烟哥正在一边愉快的学习.... 突然,微信一阵抖动.原来是老刘呼唤烟哥!善良的烟哥本以为人家是要约我出去玩!然而,打开微信一看,出现下 ...

  3. 现代“十二要素应用”与 Kubernetes

    "十二要素应用"为开发SaaS应用提供了方法上的指导,而Docker能够提供打包依赖,解耦后端服务等特性,使得两者非常吻合.这篇文章介绍了Docker特性怎样满足了开发" ...

  4. pandas 过滤

    条件过滤 通过loc进行行过滤,也可对过滤后的行进行赋值 import pandas as pd df = pd.DataFrame({"name": ["yang&qu ...

  5. gradle下mybatis自动生成框架的使用

    自动生成框架的意义 主要为了解决人为添加mapper,模型等工作,减少错误,提交效率! 添加引用build.gradle configurations { mybatisGenerator } myb ...

  6. [转]UiPath Keyboard Shortcuts

    本文转自:https://docs.uipath.com/studio/docs/keyboard-shortcuts The complete list of keyboard shortcuts ...

  7. 【Java基础】接口和抽象类之间的对比

    Java 中的接口和抽象类之间的对比 一.接口 Interface,将其翻译成插座可能就更好理解了.我们通常利用接口来定义实现类的行为,当你将插座上连接笔记本的三角插头拔掉,换成微波炉插上去的时候,你 ...

  8. 第04组 Beta冲刺(4/4)

    队名:斗地组 组长博客:地址 作业博客:Beta冲刺(4/4) 各组员情况 林涛(组长) 过去两天完成了哪些任务: 1.分配展示任务 2.收集各个组员的进度 3.写博客 展示GitHub当日代码/文档 ...

  9. win7安装centos7虚拟机

    1. 场景描述 因测试中需要linux集群,目前的服务器不太方便部署,需要本机(windows7)启动多个linux虚拟机,记录下,希望能帮到需要的朋友. 2. 解决方案 2.1 软件准备 (1)使用 ...

  10. MongoDB自学------(4)MongoDB主从搭建

    MongoDB复制原理 mongodb的复制至少需要两个节点.其中一个是主节点,负责处理客户端请求,其余的都是从节点,负责复制主节点上的数据. mongodb各个节点常见的搭配方式为:一主一从.一主多 ...