微信小程序 使用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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据库管理-第145期 最强Oracle监控EMCC深入使用-02(20240205)

数据库管理145期 2024-02-05 数据库管理-第145期 最强Oracle监控EMCC深入使用-02&#xff08;20240205&#xff09;1 监控方式2 度量配置3 阻塞4 DG监控总结 数据库管理-第145期 最强Oracle监控EMCC深入使用-02&#xff08;20240205&#xff09; 作者&#xff1a;胖头鱼的鱼缸&…

C++学习Day03之类对象作为类成员

目录 一、程序及输出二、分析与总结 一、程序及输出 #include<iostream> using namespace std; #include <string>class Phone { public:Phone(string pName){cout << "phone 的有参构造调用" << endl;m_PhoneName pName;}~Phone(){cout &…

【已解决】Oracle 12541 TNS 无监听程序

目录 1、找到Oracle监听服务&#xff08;OracleOraDb10g_homeTNLListener&#xff09;&#xff0c;停止运行 2、首先查看监听文件是否超过4G 3、修改配置文件 连接oracle突然报错&#xff0c;提示Oracle 12541 TNS 无监听程序&#xff0c;可以按照以下步骤解决 1、找到Ora…

(2)(2.13) Rockblock Satellite Modem

文章目录 前言 1 支持的MAVLink命令信息 2 设置 3 使用方法 4 数据成本 5 参数 前言 &#xff01;Note 该功能仅适用于 ArduPilot 4.4 或更高版本&#xff0c;并且要求飞行控制器支持 LUA 脚本(LUA Scripts)。 RockBLOCK 卫星调制解调器可实现与 ArduPilot 飞行器的全球…

C++一维数组

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 铁汁们大家好呀&#xff0c;我是PingdiGuo_guo&#xff0c;今天我们来学习一下数组&#xff08;一维&#xff09;。 文章目录 1.数组的概念与思想 2.为什么要使用数组 3.数组的特性 4.数组的操作 1.定义…

Spark SQL调优实战

1、新添参数说明 // Driver和Executor内存和CPU资源相关配置 --是否开启executor动态分配&#xff0c;开启时spark.executor.instances不生效 spark.dynamicAllocation.enabledfalse --配置Driver内存 spark.dirver.memory5g --driver最大结果大小&#xff0c;设置为0代…

python中的web框架介绍

目录 一&#xff1a;框架介绍 二&#xff1a;框架安装 Python中有许多流行的Web框架,以下是一些最受欢迎的框架&#xff1a; 一&#xff1a;框架介绍 1: Django Django是一个高级Python Web框架&#xff0c;它鼓励快速开发和干净的设计。Django的主要特点是其强大的ORM&am…

【C++历练之路】二叉搜索树的学习应用及其实现

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#x1f354;&#xff1a; 我们之前学过一些查找关键数据的办法&#xff0c;排序二分查找。但是这种方法的插入的时间复杂的太高&#xff0c;今天我们来学习一个更好的办法来应对数据查找——二叉搜索树。 目录…

【图论】基环树

基环树其实并不是树&#xff0c;是指有n个点n条边的图&#xff0c;我们知道n个点n-1条边的连通图是树&#xff0c;再加一条边就会形成一个环&#xff0c;所以基环树中一定有一个环&#xff0c;长下面这样&#xff1a; 由基环树可以引申出基环内向树和基环外向树 基环内向树如…

ADC详解

一、ADC 简介 ADC 即模拟数字转换器&#xff0c;英文详称 Analog-to-digital converter&#xff0c;可以将外部的模拟信号转换为数字信号。 STM32F4xx 系列芯片拥有 3 个 ADC&#xff0c;这些 ADC 可以独立使用&#xff0c;其中 ADC1 和 ADC2 还可以组成双重模式&…

HarmonyOS ArkTS修改App的默认加载的界面(二十)

前言&#xff1a;在Android开发中想要修改默认启动页&#xff0c;只需要在AndroidManifest.xml中设置即可 只需要在启动的activity种添加如下属性即可 <intent-filter><action android:name"android.intent.action.MAIN" /><category android:name&qu…

相同的树[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你两棵二叉树的根节点p和q&#xff0c;编写一个函数来检验这两棵树是否相同。如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&#xff1a; 输入&#xff1a;p [1,2,3], q [1,…

Debezium发布历史109

原文地址&#xff1a; https://debezium.io/blog/2021/09/16/debezium-1-7-cr1-released/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Debezium 1.7.0.CR1 Released September 16, 2021 by Gunnar Morling r…

【AIGC核心技术剖析】DreamCraft3D一种层次化的3D内容生成方法

DreamCraft3D是一种用于生成高保真、连贯3D对象的层次化3D内容生成方法。它利用2D参考图像引导几何塑造和纹理增强阶段&#xff0c;通过视角相关扩散模型执行得分蒸馏采样&#xff0c;解决了现有方法中存在的一致性问题。使用Bootstrapped Score Distillation来提高纹理&#x…

喜报!麒麟信安操作系统通过GB18030-2022国家标准

《信息技术 中文编码字符集》强制性国家标准GB 18030-2022将于2023年8月1日起全面实施。麒麟信安积极推动电子信息产业标准化工作&#xff0c;快速完成标准适配&#xff0c;近日&#xff0c;麒麟信安服务器操作系统V3、麒麟信安桌面操作系统V3顺利通过GB18030-2022《信息技术 中…

通过dockerfile 生成自定义nginx镜像

通过dockerfile生成自定义nginx镜像 &#xff01;&#xff01;&#xff01;docker 必须在linux环境下才能进行如果你是window则需要装虚拟机 新建一个文件名字为Dockerfile&#xff0c;无需后缀 文件完整名就是Dockerfile 编写dockerfile FROM nginx RUN echo hello nginx!…

基于ADAU1777 DSP有源降噪(主动降噪)耳机设计

加我微信hezkz17可以申请加入数字音频系统研究开发交流答疑群&#xff0c;加群附加赠送DSP音频项目核心开发资料&#xff0c;TWS降噪蓝牙耳机项目资料 1 ADU1777芯片介绍 2 DSP 三种主动降噪方式 3 sigma开发方式

9-树-从前序与中序遍历序列构造二叉树

这是树的第9篇算法&#xff0c;力扣链接。 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例 1: 输入: preorder [3,9,20,15,7], inorder [9,3,…

06 - python操作xml

认识XML 与HTML很像&#xff0c;是一种将数据存储在标记之间的标记语言&#xff0c;用户可以自定义自己的标记。 XML文件可以表示称为&#xff1a;XML树。这个XML树从根元素开始&#xff0c;根元素进一步分支到子元素。XML文件的每个元素都是XML树的一个节点&#xff0c;没有…

雷达DoA估计的跨行业应用--麦克风阵列声源定位(Matlab仿真)

一、概述 麦克风阵列&#xff1a; 麦克风阵列是由一定数目的声学传感器&#xff08;麦克风&#xff09;按照一定规则排列的多麦克风系统&#xff0c;而基于麦克风阵列的声源定位是指用麦克风拾取声音信号&#xff0c;通过对麦克风阵列的各路输出信号进行分析和处理&#xff0c;…