小程序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. 关于使用DB2数据库的项目后台报-420错误码的问题

    ###  Error querying database.  Cause: com.ibm.db2.jcc.am.SqlDataException: DB2 SQL Error: SQLCODE=-4 ...

  2. 极客时间-vue开发实战学习(ant-design vue作者)

    vue基础 属性 事件 插槽 指令(Directives) 生命周期 底层原理 vue生态 路由管理器vue Router 状态管理器vuex 同构Nuxt vue实战 实战项目-ant-desing ...

  3. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  4. PWA 学习笔记(五)

    离线与缓存 资源请求的拦截代理: 1.资源请求的判断: (1)fetch 事件会拦截页面上所有的网络资源请求,但我们通常只对部分资源请求进行处理, 其余的请求会继续走浏览器默认的资源请求流程 (2)f ...

  5. Registering current configuration as safe fallback point

    14:28:23,255 |-INFO in ch.qos.logback.core.joran.spi.ConfigurationWatchList@f5f2bb7 - URL [jar:file: ...

  6. SpringMVC 简单限流方案设计

    一.概念 限流的目的是通过对并发访问/请求进行限速,或者对一个时间窗口内的请求进行限速来保护系统,一旦达到限制速率则可以拒绝服务.排队或等待.降级等处理. 常用的限流算法有两种:漏桶算法和令牌桶算法: ...

  7. 如何用node.js中的ejs写入页面_以6.19京东秒杀的商品为例

    用erpress搭建好基本框架后,在自己新建的express文件夹下将会生成;bin,public,routes,views,app.js,package.json,node_modules目录哟!, ...

  8. 原生js实现on和emit

    let obj = {}; const $on = (name,fn)=>{ if(!obj[name]){ obj[name] = []; } obj[name].push(fn); } co ...

  9. 隐藏Nginx软件版本号信息

    为了提高我们web服务器的安全性,我们应当尽可能的隐藏服务器的信息以防止他人通过这些信息找到漏洞侵入我们的服务器,对于Nginx而言,我们安装好Nginx后最好隐藏Nginx的版本号,以防止通过该版本 ...

  10. 移动端触发touchend后阻止click事件

    // vue里面简单的处理方式,可以同时兼容PC和移动端 <div @touchend.stop.prevent="doSomething" @click.stop.prev ...