微信小程序 使用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.mzph.cn/news/668083.shtml

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

相关文章

2024/2/4学习记录

微信小程序 网络数据请求 出于安全性方面的考虑&#xff0c;小程序官方对数据接口得请求做出了俩个限制 只能对 https 类型的接口必须将接口的域名添加到信任列表中 需要去这里设置 域名只支持 https 协议域名不能使用 ip 地址 或者localhost域名必须经过 ICP 备案 服务器域…

自然语言处理中所有任务的概括

简介&#xff1a; 自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是人工智能领域中的一个重要分支&#xff0c;致力于让计算机能够理解、解释、处理人类语言。NLP的发展为我们提供了许多强大的工具和技术&#xff0c;使得计算机能够执行各种…

风险管理和采购管理核心考点梳理

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 PMP - 风险管理和采购管理核心考点梳理 风险管理 风险是一个中性词&#xff0c;包括机会和威胁。风险管理的子过程非常多&#xff0c;但是相对来说子过程之间的逻辑非常清晰&#xff0c;整个风险管理的过程都是在维…

Android BitmapShader setLocalMatrix缩放Bitmap高度重新onMeasure,Kotlin

Android BitmapShader setLocalMatrix缩放Bitmap高度重新onMeasure&#xff0c;Kotlin <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://sc…

go-基于逃逸分析来提升性能程序

go-基于逃逸分析来提升性能程序 为什么要学习逃逸分析&#xff1a; 为了提高程序的性能&#xff0c;通过逃逸分析我们能知道指标是分配到堆上还是栈上&#xff0c;如何是 分配到栈上&#xff0c;内存的分配和释放都是由编译器进行管理的&#xff0c;分配和释放的速度都非常的…

OpenResty 安装

安装OpenResty 1.安装 首先你的Linux虚拟机必须联网 1&#xff09;安装开发库 首先要安装OpenResty的依赖开发库&#xff0c;执行命令&#xff1a; yum install -y pcre-devel openssl-devel gcc --skip-broken2&#xff09;安装OpenResty仓库 你可以在你的 CentOS 系统中…

20240204金融读报1分钟小得

1、金融监督管理总局2024目标&#xff1a;全力推进中小金融机构改革化险、积极稳妥防控重点领域风险、全面强化“五大监管”、跨前一步强化央地监管协同。 重点领域风险&#xff1a;一是强化信用风险管理&#xff0c;加大不良资产处置力度&#xff1b;二是加快推进城市房地产融…

docker常见操作

一、查看docker版本 docker version 二、查找docker镜像 docker search centos name&#xff1a;相关镜像的名称 description&#xff1a;镜像描述-尽量下载官方镜像 stars&#xff1a;星数 三、查看镜像 docker images 四、拉取镜像 docker pull 【image】 五、删除镜…

使用Nginx,后端服务器获取客户端IP地址

项目背景 多个客户端通过一个路由器访问在外部搭建的服务器&#xff1b;类似下图 目的 服务器获取客户端真实IP Nginx配置文件 location /api {proxy_pass http://198.1.1.127:8099/mark;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $pro…

软件价值6-扫雷游戏

扫雷是一种经典的单人电脑游戏&#xff0c;通常在矩形方格区域内进行。游戏规则简单明了&#xff1a; 1. 地雷布局 游戏开始时&#xff0c;玩家面对一个由未知格子组成的矩形区域。其中&#xff0c;一些格子下埋有地雷&#xff0c;而其他格子是安全的。 2. 目标 玩家的目标是…

【Android Gradle 插件】自定义 Gradle 插件模块 ⑤ ( 完整总结 )

一、创建自定义插件类型模块 ( Java or Kotlin Library ) 选择 " 菜单栏 / New / New Module… " 选项 , 在 " Create New Module " 对话框中 , 选择 创建 " Java or Kotlin Library " 类型的依赖库 ; 二、手动导入相关依赖 ( Java | Groovy | …

2 月 3 日算法练习-数论

简单数论 思路&#xff1a;各个相邻数的差值求最大公约数得到 d&#xff0c;然后就能求出最少项数。 c17用gcd&#xff0c;c11 用_gcd #include<bits/stdc.h> using namespace std; using ll long long; const int N 1e5 10; ll a[N]; int n; int main( ){cin>>…

vivado 综合、时序分析

以下综合 运行完成后&#xff0c;将打开Synthesis Completed对话框&#xff0c;如下所示图形 选择其中一个选项&#xff1a; •运行实施&#xff1a;启动当前实施项目的实施设置。 •打开综合设计&#xff1a;打开综合网表、活动约束集和将目标设备集成到综合设计环境中&…

ncc匹配(三,opencv相关性匹配ncc与数学相关性匹配对比解惑)

opencv关于ncc说&#xff0c;&#xff0c;完全匹配p1&#xff0c;完全不匹配p-1&#xff0c;p0表示无关联。 数学书概率论中说&#xff0c;|p|1&#xff0c;是线性相关&#xff0c;p0&#xff0c;不相关。 我在程序中验证后&#xff0c;发现&#xff0c;数学书更准确。 第一…

Liunx网络设置

目录 1. 配置网卡的文件位置 2. 如果后续需要重启网卡 3. 配置快捷方式 4. 如果想关闭/打开某个网卡 1. 配置网卡的文件位置 cd /etc/sysconfig/network-scripts ONBOOT是否开机启动BOOTPROTOip地址分配,DHCP表示动态主机分配协议HWADDR硬件地址,MAC地址 2. 如果后续需要重…

PHP://filter过滤器

今天刷题遇到了php://filter过滤器的知识点考察&#xff1b;不会&#xff0c;看了几篇写的不错的文章&#xff0c;本来想转载的&#xff0c;但是代码复制过来后发现格式很乱&#xff0c;和原文格式差太多了&#xff1b;算了&#xff0c;直接把文章连接拿过来吧&#xff0c;在这…

spring boot3x登录开发-上(整合jwt)

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《spring boot实战》 &#x1f30a;山高路远&#xff0c;行路漫漫&#xff0c;终有归途。 目录 前置条件 jwt简介 导依赖 编写jwt工具类 1.配置项直接嵌入代码&#xff0c;通过类名.静态方法使用 2.配置项写到…

最短编辑距离问题与动态规划----LeetCode 72.编辑距离

动态规划&#xff08;Dynamic Programming, DP&#xff09;是解决复杂问题的一个强大工具&#xff0c;它将问题分解成更小的子问题&#xff0c;并使用这些子问题的解决方案来构建整体问题的解决方案。在深入探讨最短编辑距离问题之前&#xff0c;让我们先理解什么是动态规划&am…

让cgteamwork自动为Houdini载入相机,角色道具的abc文件

一 需求 最近接到个需求&#xff1a;在创建EFX文件时&#xff0c;自动加载动画出的缓存abc文件相机&#xff0c; 不用手动一个个的载入&#xff0c;还容易出错 ABC文件自动导入到Houndini里 二 过程/效果 在CGTeamwork里打开对应的镜头&#xff0c;下面的文件列表显示相机和角…

C# 更改系统的屏保设置

C# 更改系统的屏保设置 一、如果你想更改系统的屏保设置&#xff0c;可以使用P/Invoke调用SystemParametersInfo函数。 以下演示如何设置屏幕保护程序的等待时间&#xff08;也就是启动屏保前无操作的时间间隔&#xff09;&#xff0c; 示例代码&#xff1a; using System;…