微信官方的npm文档 太模糊了,而且感觉把最重要的东西写在了最后面,我这里费了老大功夫才知道这个坑。

初次使用,首先要初始化  npm

初始化——>   找到 pages 这个文件夹,然后进入这个文件夹的上级目录  也就是项目的根目录  在这个根目录

        使用  npm init -f   初始化命令    -f  表示全部输入默认值,懒得一个个回车。

初始化之后——>  npm install -production docxtemplater 构建npm项目的配置文件,作用好像是按需加载 ——>这个命令生成了一个xxx.json文件

接着————>  在微信开发者工具中,设置 ——> 项目设置——> 勾选使用npm模块

再之后主题来了!这个后面的步骤是,一次新npm一个第三方npm组件,会用到的

假如我要使用recycle-view长列表npm组件

  首先 打开 微信官方文档 搜索   recycle-view

    从中我们找到了它的npm命令  

    npm install --save miniprogram-recycle-view

  找到 pages 这个文件夹,然后进入这个文件夹的上级目录  也就是项目的目录。

    在这个目录右键——>在终端中打开,然后使用这个命令 npm install --save miniprogram-recycle-view 才行

    

    npm完了之后!!!

  在微信开发者工具中, 工具——>构建npm——>当当当当!在pages同级目录中,你可以找到一个长得像  miniprogram_npm  的文件, 他的下面
  就有了官方文档中说的 那个东西  miniprogram-recycle-view/recycle-view  和  miniprogram-recycle-view/recycle-item

  使用。

    假如我在index页面使用,那

    index.json中 类似这样写:

      "usingComponents": {
        "recycle-view": "../../miniprogram_npm/miniprogram-recycle-view/recycle-view",
        "recycle-item": "../../miniprogram_npm/miniprogram-recycle-view/recycle-item"
      }
 
    index.wxml中
      <recycle-view  balabala的属性查看官方文档...... >
        <recycle-item>   盘它   </recycle-item>
      </recycle-view>
总结:——>勾选使用npm模块
    ——>根目录
    ——>npm install
     ——>工具  构建npm
    ——>usingComponents:{ /path }
    ——>wxml中使用
注意:这个是在wxml中使用第三方npm组件的大致步骤。
  在js中使用的步骤,嗯,我还没用到,用到了再写
 
  

微信小程序 npm 找不到npm包 没有找到可以构建的npm包 如何使用第三方npm组件的更多相关文章

  1. 迅速上手:使用taro构建微信小程序基础教程

    前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病:Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使 ...

  2. 转载:微信小程序源码提取反编译

    转载来源:www.51xuediannao.com/xiaochengxu/019c08cc.html 一.前言 微信小程序源码提取反编译,听起来很屌,其实还是简单的,基本是傻瓜式操作.要想拿到微信小 ...

  3. webstrom开发微信小程序说明

    在操作之前,需要对webstrom做一些设置,如下 如果未安装node.js的朋友,请到如下地址 https://nodejs.org/en/ 安装(相信大家都是会的),如果安装完了之后,就使用如下的 ...

  4. 个微信小程序云开发云函数

    1. project.config.json写上云函数所在目录"cloudfunctionRoot": "cloudfunctions/",如图 2. app. ...

  5. 记录使用微信小程序的NFC和蓝牙功能读取15693芯片的开发历程

    开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝 ...

  6. 「速成应用」实在可靠的 微信小程序第三方代理加盟平台公司

    小程序,是基于微信平台的一个划时代产品,也就是嵌入到微信里的一个功能丰富.操作简洁的轻应用,不需要下载安装即可使用.不同的小程序,能实现不同的功能.例如,买电影票.餐厅排号.餐馆点菜.查询公交.查询股 ...

  7. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 微信小程序 新手入门教程

    因为工作需要,最近学习了一下微信小程序,在此分享一下大概的流程. 强烈建议大家先去看微信小程序简易教程:点我进入 起步: 安装微信web开发软件者工具,需要破解的同学可以网上找破解教程,很简单的,这里 ...

  9. 如何反编译微信小程序👻

    如何反编译微信小程序 准备工具: 夜神模拟器(或者你可以自己准备一个安卓模拟器,有root权限.) RE文件管理器(下载地址:https://soft.ucbug.com/uploads/shouji ...

  10. 耗时一个月上架了一款微信小程序,赚了2022年的第一笔副收入

    今天不谈技术,只谈经历. 前戏 相信有很多的程序员都有一个产品梦,希望有一款属于自己产品.毕竟工作中遇到的有些"脑残"的产品经理不是一个两个,最后不得不因为"技术服务于业 ...

随机推荐

  1. 006一句话解决主机pc,Vmware虚拟机,开发板之间的ping问题

  2. 【题解】[HNOI2015]菜肴制作(贪心+topo序)

    [题解][HNOI2015]菜肴制作(贪心+topo序) 题意:请你构造一个排列\(p[i]\)使得对于数组\(arc[i]=p[i]\)的字典序最小,并且对于给定的有序数对\((u,v)\)保证你给 ...

  3. $[TJOI2017]$ 可乐 矩阵优化$dp$

    \(Sol\) 设\(f_i\)为到第\(i\)秒的方案数,显然\(f_i=\)在第\(i\)秒前爆炸的方案数+在第\(i\)秒爆炸的方案数+在第\(i\)秒停下的方案数+在第\(i\)秒走向下一个城 ...

  4. selenium自动化测试入门 定位frame和iframe中的元素对象

    < frame> <iframe> 标签,浏览器会在标签中打开一个特定的页面窗口(框架),它在本窗口中嵌套进入一个网页,当用selenium定位页面元素的时候会遇到定位不到fr ...

  5. LibreOJ 6277. 数列分块入门 1 题解

    题目链接:https://loj.ac/problem/6277 题目描述 给出一个长为 \(n\) 的数列,以及 \(n\) 个操作,操作涉及区间加法,单点查值. 输入格式 第一行输入一个数字 \( ...

  6. 钱包开发经验分享:ETH篇

    # 钱包开发经验分享:ETH篇 [TOC] ## 开发前的准备 > 工欲善其事,必先利其器 一路开发过来,积累了一些钱包的开发利器和网站,与大家分享一下.这些东西在这行开发过的人都知道,只是给行 ...

  7. docker-tmpfs挂载

    使用tmpfs挂载 卷和绑定装置允许在主机和容器之间共享文件,以便即使在容器停止后也可以保留数据. 如果你在Linux上运行Docker,你有第三个选择:tmpfs mounts.使用tmpfs装载创 ...

  8. Spring中的ApplicationListener扩展使用

    ApplicationListener是Spring事件机制的一部分,与抽象类ApplicationEvent类配合来完成ApplicationContext的事件机制. 如果容器中存在Applica ...

  9. 良心推荐,我珍藏的一些Chrome插件

    上次搬家的时候,发了一个朋友圈,附带的照片中不小心暴露了自己的 Chrome 浏览器插件之多,于是就有小伙伴评论说分享一下我觉得还不错的浏览器插件. 我下面就把我日常工作和学习中经常用到的一些 Chr ...

  10. Arrays.asList 返回值类型

    public static void main(String[] args) { Integer[] datas = {1,2,3,4,5}; List<Integer> list = A ...