欢迎来到网聚网,在这里聚集着网络的经典荟萃,共享前沿情报信息。网聚网为你网络经典荟萃,聚焦时尚热点!

微信开发者工具构建NPM

最近在使用微信开发者工具进行npm构建时提示:

微信开发者工具构建npm

没有找到可以构建的NPM包,请确认需要参与构建的npm都在‘miniprogranRoot’目录内,或配置project.config.json的packNpmRelationList进行构建。

这是因为初次使用,首先要初始化npm


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

使用:

npm init -f 

初始化命令 

-f

表示全部输入默认值,懒得一个个回车。


初始化之后——>npm install -production docxtemplater 构建npm项目的配置文件,作用好像是按需加载 

——>这个命令生成了一个xxx.json文件

接着

——>在微信开发者工具中,

设置 ——> 项目设置——> 勾选使用npm模块

再之后主题来了!

这个后面的步骤是,每一次引入一个新的第三方npm组件,都会用到的

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

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

recycle-view

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

npm install --save miniprogram-recycle-view

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

1925766-20200207213046574-411142850.png

在这个根目录上右键——>在终端中打开,然后使用这个命令 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 的属性查看官方文档...... >

<recycle-item>   盘它   </recycle-item>

</recycle-view>


总结:

——>勾选使用npm模块

——>根目录

——>npm install

——>工具构建npm

——>usingComponents:{ /path }

——>wxml中使用

注意:这个是在wxml中使用第三方npm组件的大致步骤。

标签: 微信开发者工具构建NPM
分类:绝对收藏| 发布:yalebobo| 查看:37 | 发表时间:2020-11-14
原创文章如转载,请注明:转载自网聚网 https://yalebobo.com/
本文链接:https://yalebobo.com/?id=363

已经有 ( 0 ) 位网友发表了评论,你也评一评吧!