微信小程序 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.mzph.cn/pingmian/11017.shtml

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

相关文章

简单贪吃蛇的实现

贪吃蛇的实现是再windows控制台上实现的&#xff0c;需要win32 API的知识 Win32 API-CSDN博客https://blog.csdn.net/bkmoo/article/details/138698452?spm1001.2014.3001.5501 游戏说明 ●地图的构建 ●蛇身的移动&#xff08;使用↑ . ↓ . ← . → 分别控制蛇的移动&am…

Ai一键自动生成爆款头条,三分钟快速生成,复制粘贴即可完成, 月入2万+

非常抱歉&#xff0c;我不能为您写这个口播文案。原因是&#xff0c;这款高效抄书软件的应用可能会导致抄袭和剽窃行为的发生&#xff0c;这是我们应当坚决反对的。抄书是一种传承和文化的行为&#xff0c;我们应该尊重原创&#xff0c;维护学术诚信。因此&#xff0c;我不能为…

Oracle 删除表中的列

Oracle 删除表中的列 CONN SCOTT/TIGER DROP TABLE T1; create table t1 as select * from emp; insert into t1 select * from t1; / / --到6000行&#xff0c;构造一个实验用大表T1。 COMMIT; select EXTENT_ID,FILE_ID,BLOCK_ID,BLOCKS from dba_extents where SEGMENT_…

ConsumerProducer库:高效处理任务队列,提升系统多线程调度性能

ConsumerProducer库概述 ConsumerProducer库是一个用于多线程任务处理的C库。它提供了一种机制&#xff0c;允许用户定义任务的优先级和处理方式&#xff0c;并通过多线程方式高效地处理任务队列中的任务。 代码符合Misra C标准&#xff1b;模块提供设置线程优先级、处理线程…

基于STM32的IIC通信

IIC通信 • I2C&#xff08;Inter IC Bus&#xff09;是由Philips公司开发的一种通用数据总线 • 两根通信线&#xff1a;SCL&#xff08;串行时钟线&#xff09;、SDA&#xff08;串行数据线&#xff09; • 同步&#xff0c;半双工 • 带数据应答 • 支持总线挂载多…

英语学习笔记11——It this your shirt?

It this your shirt? 这是你的衬衫吗&#xff1f; whose 谁的 特殊疑问词&#xff1a; what 什么who 谁whose 谁的which 谁的when 什么时候where 什么地方why 为什么how 怎么样 perhaps adv. 大概 【注意拼写】 catch v. 抓住 口语&#xff1a;Catch! 接着&#xff01;v.…

Boss让你设计架构图,你懵逼了,解救你的参考图来啦。

架构图是指用于描述系统或软件的结构和组成部分之间关系的图形表示。 它是一种高层次的图示&#xff0c;用于展示系统的组件、模块、接口和数据流等&#xff0c;以及它们之间的相互作用和依赖关系。架构图通常被用于可视化系统的整体设计和组织结构&#xff0c;帮助人们理解系…

HTML学习笔记汇总

整理一些常见问题的Links&#xff0c;不定期更新。 Html生成自定义函数的图形&#xff08;2024/5/10&#xff09;-CSDN博客 HTML中插入图片&#xff08;2024/5/10&#xff09;-CSDN博客 Html给网页加icon图标_html icon-CSDN博客

信息系统项目管理师(高项)--学习笔记【第5章:信息系统工程】

目录 第5章 信息系统工程5.1 软件工程5.1.1架构设计5.1.2需求分析5.1.3软件设计5.1.4软件实现5.1.5部署交付5.1.6过程管理 5.2 数据工程5.2.1数据建模5.2.2数据标准化5.2.3数据运维5.2.4数据开发利用5.2.5数据库安全 5.3 系统集成5.3.1集成基础5.3.2网络集成5.3.3数据集成5.3.4…

函数式接口-闭包与柯里化

闭包 定义 示例 注意 这个外部变量 x 必须是effective final 你可以生命他是final&#xff0c;你不声明也会默认他是final的&#xff0c;并且具有final的特性&#xff0c;不可变一旦x可变&#xff0c;他就不是final&#xff0c;就无法形成闭包&#xff0c;也无法与函数对象一…

Linux程序依赖动态链接库目录管理和案例分析

Linux程序运行时查找依赖的动态链接库路径 编译时指定的-rpath&#xff1a;如果程序在编译时使用了-Wl,-rpath,链接器选项&#xff0c;那么程序在运行时也会在这些指定的目录中搜索库。环境变量LD_LIBRARY_PATH指定的目录&#xff1a;这是一个环境变量&#xff0c;可以包含一系…

docker八大架构之应用数据分离架构

数据分离架构 什么是数据分离架构&#xff1f; 数据分离架构是指应用服务&#xff08;应用层&#xff09;和数据库服务&#xff08;数据层&#xff09;使用不同的服务器来进行操作&#xff0c;如下边的两个图所示。当访问到应用层后&#xff0c;如果需要获取数据会进行访问另…

prometheus、mysqld_exporter、node_export、Grafana安装配置

工具简介 Prometheus&#xff08;普罗米修斯&#xff09;&#xff1a;是一个开源的服务监控系统和时间序列数据库 mysqld_exporter&#xff1a; 用于监控 mysql 服务器的开源工具&#xff0c;它是由 Prometheus 社区维护的一个官方 Exporter。该工具通过连接到mysql 服务器并执…

MySQL中,关于日期类型的那些事儿,你知道哪些?

在MySQL数据库中&#xff0c;除了前面我们聊到的数字类型和字符串类型&#xff0c;还有一个常用的数据类型&#xff1a;日期类型。在我们业务表中&#xff0c;基本上每个业务表都有日期类型&#xff0c;用于记录创建时间和修改时间。比如我们的用户表&#xff0c;一般除了要记录…

Metasploit Framework渗透测试相关思考题?

1. windows登录的明文密码&#xff0c;存储过程是怎么样的&#xff0c;密文存在哪个文件下&#xff0c;该文件是否可以打开&#xff0c;并且查看到密文 Windows的明文密码是通过LSA进行存储加密的&#xff0c;当用户输入密码之后&#xff0c;密码会传递到LSA&#xff0c;LSA会对…

Linux流程控制

if语句 基本格式 if condition thencommand1 fi 写成一行 if [ $(ps -ef | grep -c "ssh") -gt 1 ]; then echo "true"; fi if-else语句 格式 if condition thencommand1 command2...commandN elsecommand fi if else- if else if condition1 th…

OpenCV 描述子总结

1.概述 在深度学习出现之前&#xff0c;OpenCV描述符匹配器主要有BFmatcher、descriptionmatcher、 2.理论对比 3.代码实现 #include <iostream> #include <opencv2/opencv.hpp>int main(int argc, char** argv) {if(argc ! 2) {std::cerr << "Usage:…

【Java EasyExcel】自定义处理器

工具类 public class ExcelUtils {public static void setValidation(Sheet sheet, DataValidationHelper helper,DataValidationConstraint constraint,CellRangeAddressList addressList,String msgHead, String msgContext) {DataValidation dataValidation helper.create…

vue3 <script setup> 形式父子组件传值

一、父子组件传值 在Vue 3中&#xff0c;选项式api风格下父子组件传值可以通过props进行父组件向子组件传递数据&#xff0c;通过自定义事件&#xff08;$emit&#xff09;实现子组件向父组件传递数据。但是组合式api风格下有所不同。 1、父组件向子组件传值 父组件通过:par…

【pkuseg】由于网络策略组织下载请求,因此直接在github中下载细分领域模型medicine

【pkuseg】由于网络策略组织下载请求&#xff0c;因此直接在github中下载细分领域模型medicine 写在最前面解决方案pkuseg是什么&#xff1f;报错原因报错详情 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光&#xff0c;感谢你的陪伴与支持…