微信小程序 使用npm包

1. 微信小程序 使用npm包

1.1. npm初始化

  如果你的小程序项目没有安装过npm包的话,你需要先初始化npm

npm init

在这里插入图片描述

1.2. 安装npm包

  这里以vant-weapp(小程序UI组件库)为例:

npm i vant-weapp -S --production

在这里插入图片描述

1.3. npm包构建

1.3.1. 点击微信开发者工具右上角详情——>本地设置,选中使用npm模块

  新版开发工具忽略此步骤,没有“使用npm模块”,默认可用npm下载)
在这里插入图片描述

1.3.2. 点击微信开发者工具菜单栏的工具,选择构建npm

在这里插入图片描述### 1.3.3. ### 1.3.3. 当显示如下表示npm构建成功,构建完成就可以使用npm包了
在这里插入图片描述

1.3.4. npm包构建完成之后项目的结构如下:

在这里插入图片描述

1.4. 使用npm

1.4.1. js中引入npm包

const myPackage = require('packageName')
const packageOther = require('packageName/other')

1.4.2. 使用 npm 包中的自定义组件

  在json文件的usingComponents参数加上:

{"usingComponents": {"myPackage": "packageName","package-other": "packageName/other"}
}

1.5. 使用npm实例:

1.5.1. js中引入npm包:

  此例使用js-base64包实现,在你需要使用此包的js文件中引入npm包

const jsBase64 = require('js-base64');

1.5.2. 使用:

console.log(jsBase64.Base64.encode("haha"));//编码
console.log(jsBase64.Base64.decode("aGFoYQ=="));//解码

1.6. 使用 npm 包中的自定义组件

  此例使用vant-weapp包实现,在app.json文件或者在指定页面的json文件中:

"usingComponents": {
"van-button": "vant-weapp/button/index"
}

  在wxml文件中使用:

<van-button type="primary">按钮</van-button>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/453984.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OfficeWeb365 Readfile 任意文件读取漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

[Angular 基础] - 数据绑定(databinding)

[Angular 基础] - 数据绑定(databinding) 上篇笔记&#xff0c;关于 Angular 的渲染过程及组件的创建&简单学习&#xff1a;[Angular 基础] - Angular 渲染过程 & 组件的创建 Angular 之中的 databinding 是一个相对而言更加复杂&#xff0c;以及我个人觉得相对而言比…

MySQL 小技巧:xtrabackup 软件包的下载及安装

案例&#xff1a;xtrabackup 软件包的下载及安装 软件包下载&#xff1a;Index of /percona/centos/7/RPMS/x86_64/ CentOS7 默认的数据库版本比较老,因此建议使用 xtrabackup 2.4 版本 // CentOS7 默认的数据库版本比较老,因此建议使用 xtrabackup 2.4 版本 // 安装 CentOS7 默…

MacOS系统电脑远程桌面控制windows系统电脑【内网穿透】

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 1. 测试本地局域网内远程控制1.1 Windows打开远程桌面1…

办公室宝藏利器

今天我要向大家推荐的是五款超级实用的工作软件&#xff0c;它们能让你的工作变得如丝般顺滑&#xff0c;如行云流水般高效&#xff01;让我们来一起揭开神秘的软件世界的面纱吧&#xff01; 1、亿可达 他是一款自动化工具&#xff0c;相当于国内版免费的zaiper。它让任何人都…

【目标跟踪】相机运动补偿

文章目录 一、前言二、简介三、改进思路3.1、状态定义3.2、相机运动补偿3.3、iou和ReID融合3.4、改进总结 四、相机运动补偿 一、前言 目前 MOT (Multiple Object Tracking) 最有效的方法仍然是 Tracking-by-detection。今天给大家分享一篇论文 BoT-SORT。论文地址 &#xff0…

idea 快捷键ctrl+shift+f失效的解决方案

文章目录 搜狗输入法快捷键冲突微软输入法快捷键冲突 idea的快捷键ctrlshiftf按了没反应&#xff0c;理论上是快捷键冲突了&#xff0c;检查搜狗输入法和微软输入法快捷键。 搜狗输入法快捷键冲突 不需要简繁切换的快捷键&#xff0c;可以关闭它&#xff0c;或修改快捷键。 微…

MQTT在linux下服务端和客户端的应用

MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级、开放标准的消息传输协议&#xff0c;设计用于受限设备和低带宽、不稳定网络的通信。 MQTT的一些关键特点和概念&#xff1a; 发布/订阅模型&#xff1a; MQTT采用发布/订阅&#xff08;Publ…

88.网游逆向分析与插件开发-物品使用-物品使用策略管理UI的设计

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;物品交换的逆向分析与C封装-CSDN博客 码云地址&#xff08;ui显示角色数据 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;f1b9b1a69ac3e2c3…

从零开始手写mmo游戏从框架到爆炸(三)— 服务启动接口与网络事件监听器

上一章我们完成了netty服务启动的相关抽象&#xff08;https://blog.csdn.net/money9sun/article/details/136025471&#xff09;&#xff0c;这一章我们再新增一个全局的服务启动类&#xff0c;方便后续扩展。 服务启动 新增的两个类如下&#xff1a; 定义一个接口IServer …

ubuntu22.04@laptop OpenCV Get Started: 001_reading_displaying_write_image

ubuntu22.04laptop OpenCV Get Started: 001_reading_displaying_write_image 1. 源由2. Read/Display/Write应用Demo2.1 C应用Demo2.2 Python应用Demo 3. 过程分析3.1 导入OpenCV库3.2 读取图像文件3.3 显示图像3.4 保存图像文件 4. 总结5. 参考资料 1. 源由 读、写、显示图像…

基于SpringBoot的后端导出Excel文件

后端导出Excel&#xff0c;前端下载。 系列文章指路&#x1f449; 系列文章-基于SpringBoot3创建项目并配置常用的工具和一些常用的类 文章目录 后端导出Excel引入依赖写入响应 前端下载后端导出失败和成功返回的内容类型不同&#xff0c;因此需要分别判断。 工具类ServletUti…