微信小程序 使用npm包

news2024/11/28 18:42:17

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.coloradmin.cn/o/1432607.html

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

相关文章

怎样理解Vue单向数据流

在前端开发中&#xff0c;数据流是一个非常重要的概念。Vue.js作为一种流行的前端框架&#xff0c;采用了单向数据流的架构&#xff0c;旨在简化开发过程并提高应用的可维护性。本文将探讨Vue单向数据流的含义以及它的使用方法。 什么是单向数据流&#xff1f; 在Vue中&#…

靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用

靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用。 1|0介绍 xxe漏洞主要针对webservice危险的引用的外部实体并且未对外部实体进行敏感字符的过滤,从而可以造成命令执行,目录遍历等.首先存在漏洞的web服务一定是存在xml传输数据的,可以在http头的content-type中查…

动态颗粒背景,适合VUE、HTML前端显示

动态颗粒背景&#xff0c;适合做背景使用&#xff0c;VUE、HTML前端显示直接看效果 废话不多说直接上代码&#xff1b; 一、html 代码部分 <template><div id"login"><div class"container"><div class"login-form"&g…

golang开发window环境搭建

1.本人开发环境&#xff1a;window10,idea2020.1.3 2.Go语言环境版本1.5.1 2.1. go语言插件 下载地址 csdn - 安全中心 2.2下载安装 3.idea配置go环境 4.创建go项目 、5.运行

第二届 N1CTF Junior WEB方向 部分题解WP

zako 题目描述&#xff1a;很简单的rce哦 启动环境&#xff0c;源码直接给了。 execute.sh #!/bin/bashreject(){echo ${1}exit 1 }XXXCMD$1awk -v str"${XXXCMD}" \ BEGIN{deny";&$(){}[]!#$%^&*-";for(i 1; i < length(str); i){char su…

Unity引擎学习笔记之【混合动画操作】

混合动画Hybrid Animation Unity中的Blend Tree是一种动画混合技术&#xff0c;它允许开发者通过添加多个动画片段&#xff08;例如奔跑、行走、跳跃等&#xff09;来创建复杂的角色动画。Blend Tree允许在不同的状态下平滑地过渡并混合不同的动画。例如&#xff0c;在奔跑和行…

PyTorch 2.2 中文官方教程(九)

在生产环境中部署 PyTorch 模型 通过 Flask 在 Python 中部署 PyTorch 的 REST API 原文&#xff1a;pytorch.org/tutorials/intermediate/flask_rest_api_tutorial.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 注意 点击这里下载完整的示例代码 作者&#…

1997-2022年中央对各省份一般公共预算转移支付数据

1997-2022年中央对各省份一般公共预算转移支付数据 1、时间&#xff1a;1997-2022年 2、范围&#xff1a;31省 3、指标&#xff1a;一般公共预算转移支付 4、来源&#xff1a;wind 财政部 5、指标解释&#xff1a;一般性转移支付又称体制性转移支付&#xff0c;是指上级政…

机器学习本科课程 实验3 决策树处理分类任务

实验3.1 决策树处理分类任务 使用sklearn.tree.DecisionTreeClassifier完成肿瘤分类&#xff08;breast-cancer&#xff09;计算最大深度为10时&#xff0c;十折交叉验证的精度(accuracy)&#xff0c;查准率(precision)&#xff0c;查全率(recall)&#xff0c;F1值绘制最大深度…

前端学习第4天

一、复合选择器 1.后代选择器 2.子代选择器 3.并集选择器 4.交集选择器 5.伪类选择器 1.伪类-超链接&#xff08;拓展&#xff09; 二、CSS特性 1.继承性 body放在style中 2.层叠性 3.优先级 属性 !important;&#xff08;最高优先级&#xff09; 1.优先级-叠加计算规则 2.em…

枚举(Java)

一、概念 枚举是一种特殊的类。 格式&#xff1a; 修饰符 enum 枚举类名{ 对象名称1&#xff0c;对象名称2&#xff0c;....; 其他成员... } 二、枚举类的特点 1.枚举类的第一行只能罗列一些名称&#xff0c;并且这些名称都是常量&#xff0c;每个常量记住一个枚举类对象…

Quartus IP 之mif与hex文件创建与使用

一、mif与hex概述 ROM IP的数据需要满足断电不丢失的要求&#xff0c;ROM IP数据的文件格式一般有三种文件格式&#xff1a;.mif、.hex、.coe&#xff0c;Xilinx与Intel Altera支持的ROM IP数据文件格式如下&#xff1a; Xilinx与Altera支持的ROM文件格式 Alterahex、mifAM&am…

基于微信小程序的书籍阅读系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

ACPF UI 框架设计与基础实现

世态人情,比明月清风更饶有滋味;可作书读,可当戏看。书上的描摹,戏里的扮演,即使栩栩如生,究竟只是文艺作品;人情世态,都是天真自然的流露,往往超出情理之外,新奇得令人震惊,令人骇怪,给人以更深刻的效益,更奇妙的娱乐。惟有身处卑微的人,最有机缘看到世态人情的…

【python】python爱心代码【附源码】

一、实现效果&#xff1a; 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 二、完整代码&#xff1a; import math import random import threading import time from math import sin, cos, pi, log from tkinter import * import re# 烟花相关设置 Fireworks [] m…

离线下载安装postgresql12/13/14/15.

前言 参考此链接&#xff0c;但是有问题 1.下载离线rpm包 下载安装postgresql-devel 12以上版本&#xff0c;去postgresql下载官网&#xff0c;然后自己选择是pg12还是13、14、15等。&#xff08;我选的12&#xff09;。不想麻烦的直接去我这资源直接下载 下载这个五个文件&…

CHS_09.2.3.6_2+多生产者-多消费者

CHS_09.2.3.6_2多生产者-多消费者 问题描述问题分析如何实现如何实现假如我们把盘子的容量设为二知识回顾 在这个小节中 我们会学习一个多生产者 多消费者的这样一个问题模型 问题描述 先来看一下问题的描述 假设桌子上面有一个盘子 每次只能向这个盘子里放一个水果 有四个人…

SpringBoot 各种回滚骚操作实战

事务定义 事务&#xff0c;就是一组操作数据库的动作集合。事务是现代数据库理论中的核心概念之一。如果一组处理步骤或者全部发生或者一步也不执行&#xff0c;我们称该组处理步骤为一个事务。当所有的步骤像一个操作一样被完整地执行&#xff0c;我们称该事务被提交。由于其…

Leetcode高频题:198打家劫舍1

题目链接力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相…

力扣 121. 买卖股票的最佳时机

题目来源&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock/description/ 好久没写代码了&#xff0c;啥啥都忘了 C题解1&#xff1a;贪心算法。&#xff08;来源代码随想录&#xff09; 因为股票就买卖一次&#xff0c;那么贪心的想法很自然就是取…