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

摘要:
初始化后->该功能类似于按需加载-->此命令生成xxx。json文件。然后-->设置->项目设置->右键单击根目录-->工具-&gt!{/path}->这是在wxml中使用第三方npm组件的一般步骤;
微信官方的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 找不到npm包 没有找到可以构建的npm包 如何使用第三方npm组件第1张

    在这个目录右键——>在终端中打开,然后使用这个命令 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组件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【oracle】触发器简单实现各种流媒体服务器性能测试下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【Maven】CentOS7使用Nexus3搭建maven私服

一、简介   Maven是一个采用纯Java编写的开源项目管理工具, Maven采用了一种被称之为Project Object Model(POM)概念来管理项目,所有的项目配置信息都被定义在一个叫做POM.xml的文件中, 通过该文件Maven可以管理项目的整个生命周期,包括清除、编译,测试,报告、打包、部署等等。目前Apache下绝大多数项目都已经采用...

如何掌握C#的核心技术

如何掌握C#的核心技术 原图链接 引子 前不久看到一个段子,某年宁波交警引进人脸识别技术抓拍行人闯红灯,结果一天下来被发现闯红灯次数最多的是珠海女子董小姐,日闯红灯3000多次。宁波交警连夜研究抓捕方案,最后分析发现,原来是大巴车上的某掌握核心的产品广告被错误识别了。 这家自称掌握了核心的制造企业,虽然并非每个产品都卖座,但这样的广告词确实也牢牢抓住了观众...

Freeswitch配置之sofia

   SIP模块 - mod_sofia SIP 模块是 FreeSWITCH的主要模块。 在 FreeSWITCH中,实现一些互联协议接口的模块称为 Endpoint。FreeSWITH支持很多的 Endpoint,如 SIP、H232等。那么实现 SIP 的模块为什么不支持叫 mod_sip呢?这是由于 FreeSWITCH的 Endpoint 是一个...

vscode 对于 C 源文件,IntelliSenseMode 已根据编译器参数和探测 compilerPath 从“clang-x64”更改为“gcc-x64”

vscode 不知道从什么时候开始出现 对于 C 源文件,IntelliSenseMode 已根据编译器参数和探测 compilerPath 从“clang-x64”更改为“gcc-x64” 的信息 解决方案 .vscode 文件夹 -> c_cpp_properties.json 文件 -> 将 "intelliSenseMode": "cl...

Qt5学习笔记(5)——列表框QListWidget类

QListWidget可以显示一个清单,清单中的每个项目是QListWidgetItem的一个实例,每个项目可以通过QListWidgetItem来操作。可以通过QListWidgetItem来设置每个项目的图像与文字。 常用方法和属性: (1)addItem void addItem ( const QString & label ) void...

nuxt基础一

nuxt项目的文件夹目录 1.nuxt-link组件和router-link组件一样 2.pages文件夹中文件名就是路由路径名(无需配置路由路径),是页面组件。   laouts文件夹,是公共的模板的内容组件,公共的组件<Nuxt />,必须要加 不过在 Nuxt.js 框架中,我们有了新的变化,layouts对应目录中的layouts文件...