微信小程序 17:小程序使用 npm 包和组件应用

目前,小程序中已经支持实用 npm 安装第三方包,从而提高小程序的开发效率,但是在小程序中使用 npm 包有三个限制:

  1. 不支持 Node.js内置库的包
  2. 不支持依赖于浏览器内置对象的包
  3. 不支持依赖于 C++插件的包

Vant Weapp

Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用。它所使用的是 MIT开源许可协议,对商业使用比较友好。
项目地址:https://vant-ui.github.io/vant-weapp/#/home

安装

  1. 通过 npm 安装
  2. 构建 npm 包
  3. 修改 app.json

初始化 npm 包管理文件 packge.json

npm init -y

安装 Vant Wearpp 组件库

npm i @vant/weapp -S --production

构建 npm 包
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
image.png
注意:2024 年 5 月 12 日,已经不用手动勾选“使用 NPM 模块”了,只需要一步操作。
修改 app.json删掉下列代码

  "style": "v2",

将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

使用 Vant 组建

使用按钮组建

app.json 引用

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

wxml使用

<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="加载中..." />

其他的组建同理这就不一一展示了

小程序的 API Promise 化

默认情况下,小程序官方提供的异步APl都是基于回调函数实现的,例如,网络请求的API需要按照如下的方式调用:

wx.request({
method:“,
url:"",
data:{}success:()=>{}//请求成功的回调函数 fail: ()=>{}, //请求失败的回调函数 complete: ()=>{}//请求完成的回调函数 })

什么是 API Promise 化

API Promise 化是指,通过额外的配置,将官方提供的基于毁掉 API,升级为基于 Promise 的异步 API,从而代码的可读性、维护性、避免产生回调地狱的问题。

实现 API promise 化

在小程序实现 Promise 化主要依赖于miniProgram-api-promise这个三方的 npm 包。他的安装和实用步骤如下:
安装

npm install --save miniprogram-api-promise

构建 NPM
和安装 Vant 一样需要把“mini-npm 目录中原来的包清空”,然后从工具栏中重新进行构建,你就会看到会出现 minipromise 包

使用 mini Promise 包

app.json

import {promisifyAll} from "miniprogram-api-promise"const wxp = wx.p={}
promisifyAll(wx,wxp)// app.js
App({onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})},globalData: {userInfo: null}
})

调用 Promise 化之后的异步 API

wxml构建

<button type="default" bind:tap="getInfo">按钮</button>

js

async getInfo(){const {data:res} = await wx.p.request({method: 'get',url:'https://mock.apifox.com/m1/4376673-4020798-default/api/gridelist',data:{name:'zs',age:20}})console.log(res);},

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

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

相关文章

山东济南最出名的起名大师颜廷利教授:当代中国教育界的泰斗

山东济南最出名的起名大师颜廷利教授&#xff1a;当代中国教育界的泰斗。 四川成都、重庆、香港、台湾、辽宁沈阳、大连、湖南长沙、宁夏第一起名大师的老师颜廷利教授被誉为世界上思想境界最高的人之一。 北京、上海、天津、浙江杭州、江苏南京、宁夏银川最权威起名大师的老师…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《规模化屋顶光伏接入配电网的建设决策》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

Scratch四级:第08讲 排序算法

第08讲 排序算法 教练&#xff1a;老马的程序人生 微信&#xff1a;ProgrammingAssistant 博客&#xff1a;https://lsgogroup.blog.csdn.net/ 讲课目录 常考的排序算法项目制作&#xff1a;“三个数排序”项目制作&#xff1a;“成绩查询”项目制作&#xff1a;“排序”项目制…

【机器学习】LoFTR:革命性图像特征批评技术等领跑者

LoFTR&#xff1a;革命性图像特征匹配技术的领跑者 一、引言二、LoFTR技术的创新之处三、LoFTR技术的实现原理四、LoFTR技术的代码实例五、结语 一、引言 在3D计算机视觉领域&#xff0c;图像特征匹配技术一直是研究的热点和难点。随着技术的不断发展&#xff0c;传统的特征检…

语言:C#

一、VSCode生成exe 二、

java sql中 大于 小于 大于等于 小于等于 代替符号

在写java时sql会经常会忘记大于小于号的表示方法导致无法运行&#xff0c;总结一下 第一种方法&#xff1a; < &#xff1a;< < &#xff1a; < &#xff1a;> &#xff1a; > sql如下&#xff1a; create_at > #{startTime} and create_at < #{end…

鸿蒙布局Column/Row/Stack

鸿蒙布局Column/Row/Stack 简介我们以Column为例进行讲解1. Column({space: 10}) 这里的space: 10&#xff0c;表示Column里面每个元素之间的间距为102. width(100%)&#xff0c;height(100%) 表示宽高占比3. backgroundColor(0xffeeeeee) 设置背景颜色4. padding({top: 50}) 设…

《构建智能财务预算与管控技术架构:实现企业财务管理的高效运作》

在当今数字化时代&#xff0c;企业财务预算与管控技术的应用已成为企业管理的关键一环。通过构建智能化的财务预算与管控技术架构&#xff0c;企业能够实现财务管理的精细化、智能化和高效化&#xff0c;从而更好地应对市场竞争和风险挑战&#xff0c;提升企业的竞争力和盈利能…

JAVA多线程并发(一)-- JAVA线程简介

一、JAVA线程实现/创建方式 在Java中&#xff0c;线程的创建与实现主要有三种方式&#xff1a;继承Thread类、实现Runnable接口以及使用Callable接口配合FutureTask和ExecutorService。下面将分别介绍这三种方式&#xff0c;并通过实际案例代码进行演示。 1. 继承Thread类 T…

Oracle如何收缩减小表空间大小

比如我们发现一个表空间占用比较大&#xff0c;但是空闲空间很大&#xff0c;想要减小表空间占用大小。查看表空间的情况 发现BETEST表空间占用大&#xff0c;但是剩余大小比较大&#xff0c;可以减小存储占用。 如果我们想减小到100MB&#xff0c;那么就登录其用户执行&#…

回溯之组合总和II

上一篇文章使用回溯解决了组合总和I&#xff0c;这次使用回溯解决组合总和II&#xff0c;下面先给出回溯的模板代码。 private void backtracking(参数1,参数2,...){if(递归终止条件){收集结果;return;}for(遍历集合){处理;backtracking(参数1,参数2,...); // 递归;回溯;} }组…

进程的共享主存通信实验

进程的共享主存通信 【预备知识】 共享存储区为进程提供了直接通过主存进行通信的有效手段&#xff0c;不像消息缓冲机制那样需要系统提供缓冲&#xff0c;也不像pipe机制那样需要事先建立一个特殊文件&#xff0c;而是由通信双方直接访问某些共享虚拟储存空间。在Linux中&…

2024情感聊天赛道,al工具制做,视频一分钟一条,日入500+

在这个领域&#xff0c;我们可以利用AI技术快速制作情感文章和闲聊内容。基本原理是结合热门创意文案&#xff0c;通过AI生成情感聊天短视频&#xff0c;然后在各大网站进行独家代理&#xff0c;这个领域的竞争相对较小&#xff0c;可以说是一片蓝海。 项 目 地 址 &#xff…

ue5地编模块学习记录

ue5网站功能3d溜溜网下载模型https://anyconv.com/max-to-fbx-converter/3dmax转换fbx模型解决问题记录 一、光源 搜索光源搜索不到的时候可以点击 窗口> 对场景内的光照进行处理

【5月13日】YesPMP平台目前最新项目

YesPMP平台目前最新项目&#xff0c;有感兴趣的用户查看项目接单&#xff0c;与项目方沟通&#xff0c;双方直接对接。 1.查看项目&#xff1a;blender动画师 2查看项目&#xff1a;找宠友信息源码 3.查看项目&#xff1a;儿童…

基础ArkTS组件:帧动画,内置动画组件,跑马灯组件(HarmonyOS学习第三课【3.6】)

帧动画 帧动画也叫序列帧动画&#xff0c;其原理就是在时间轴的每帧上逐帧绘制不同的内容&#xff0c;使其连续播放而成动画。ArkUI开发框架提供了 ImageAnimator 组件实现帧动画能力&#xff0c;本节笔者介绍一下 ImageAnimator 组件的简单使用。 官方文献 说明 该组件从A…

创建Chrome插件:自动刷新网页

创建Chrome插件&#xff1a;自动刷新网页 前言 在日常工作和生活中&#xff0c;我们经常需要频繁刷新网页以获取最新的数据和信息。无论是开发人员进行网站测试&#xff0c;还是用户关注实时股市动态&#xff0c;手动刷新网页既耗时又低效。因此&#xff0c;本文将介绍如何创…

WPF使用ItemsControl显示Object的所有属性值

对于上位机开发&#xff0c;我们有时候有这样的需求&#xff1a;如何显示所有的IO点位&#xff1f;比如有10个IO点位&#xff0c;那我们要写10个TextBlock去绑定这10个点位的属性&#xff08;本文暂时不考虑显示的样式&#xff0c;当然也可以考虑&#xff09;&#xff0c;当点位…

快手短剧,和爱优腾踏入同一条河流

文丨黄小艺 “我们定制短剧的重心排序分别是抖音、淘宝、快手。”MCN机构从业者周明&#xff08;化名&#xff09;说道&#xff0c;“无论是单条还是品牌冠名剧&#xff0c;我们在快手短剧拿到的收益都相对偏低。” 近期&#xff0c;商业数据派和多家机构创作者沟通后发现&am…

基于springboot实现高校教师电子名片系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现高校教师电子名片系统演示 摘要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;名片信息因为其管理内容繁杂&#xff…