小程序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. Scrapy框架(一)

    Scrapy框架(一) 国内镜像源: 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.c ...

  2. 监听属性watch

    immediate.deep data() { return { firstName: "刘", lastName: "XX", fullName: " ...

  3. JavaEE初学笔记之Servlet与Tomcat

    JavaEE开发,本质上就是开发一个个Servlet,然后部署到Servlet容器(如Tomcat)里运行.   1. Servlet是什么? Servlet就是一个普通的接口(Interface), ...

  4. 【HNOI 2019】JOJO

    Problem Description JOJO 的奇幻冒险是一部非常火的漫画.漫画中的男主角经常喜欢连续喊很多的「欧拉」或者「木大」. 为了防止字太多挡住漫画内容,现在打算在新的漫画中用 \(x\) ...

  5. 关于MFC与OpenGL结合绘图区域用鼠标来控制图形的移动的坑

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11773171.html 之前开发的导入多个模型,旋转,分别移动什么什么的,都是在纯OpenGL ...

  6. DataGridView自动保存列的宽度和位置

    WinForm程序中表单的自动保存列的宽度和位置,是一种常见的功能,对于用户体验来说是非常好的.现记录一下实现过程: 1.新建一个类,命为为:DataGridViewColumnStyle. 这个类实 ...

  7. netcore 2.2 使用 Autofac 实现自动注入

    Autofac自动注入是通过名称约定来实现依赖注入 ps:本demo接口层都以“I”开头,以“Service”结尾.服务层实现都以“Service”结尾. 为什么要实现自动注入 大多时候,我们都是 以 ...

  8. 微店APP协议简要分析

    1.通过抓包软件charles进行抓包,点击微信收款后,抓包内容都是加密处理过  2.加载分析定位这些字段的加密函数. WDTNThorParameterProcessor HTTPBody:task ...

  9. 白话 MVC、MVP、MVVP

    白话 MVC.MVP.MVVP 注意这里单纯的通过例子来讲解 MVC MVP MVVP 这三种架构模式的起源和作用,不牵扯某种特定的语言.具体到各种语言各种软件系统上体现有所不同,但是原理都是这样的. ...

  10. 团队项目之Scrum5

    小组:BLACK PANDA 时间:2019.11.25   每天举行站立式会议 提供当天站立式会议照片一张 2 昨天已完成的工作 2 实现文章展示页面 完善后台的编辑功能接口 今天计划完成的工作 2 ...