小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)

一、小程序对npm的支持与限制

3个限制:

1、不支持依赖Node.js内置库的包

2、不支持依赖浏览器内置对象的包

3、不支持依赖C++插件的包

二、Vant WeAPP

2.1 安装及使用

定义:Vant Weapp是有赞前端团队开源的一套小程序UI组件库;

作用:助力开发者快速搭建小程序应用;

使用的协议:MIT开源许可协议;

官方文档:Vant Weapp - 轻量、可靠的小程序 UI 组件库

搭建:Vant Weapp - 轻量、可靠的小程序 UI 组件库

2.2 定制全局主题样式

在app.wxss中定义page{},在page中定义全局主题颜色

参考:Vant Weapp - 轻量、可靠的小程序 UI 组件库 -->样式变量

https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

复制代码
page {
  --button-danger-background-color:#c00000;
  --button-danger-border-color:#D60000;
}

三、API Promise化

3.1 定义

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

3.2 实现API Promise化

回调地狱:存在异步任务的代码,不能保证能按照顺序执行,只能在异步函数中调用异步函数;

解决的问题:回调地狱的问题

3.2.1 安装promise

1、install --save miniprogram-api-promise

2、删除miniprogram_npm,重新构建

3、构建npm,工具-->构建npm

3.2.2 实现promise化步骤

复制代码
// 导入promise
import { promisifyAll } from 'miniprogram-api-promise'
// 定义变量
const wxp = wx.p = {}
// 将wx转存wxp
promisifyAll(wx,wxp)

3.2.3 调用promise化后的一步API

复制代码
// async/await 代替异步函数回调
async getInfo() {
      const {data:res} = await wx.p.request({
        method: 'GET',
        url: 'https://www.escook.cn/api/get',
        data:{
          name:'zs',
          age:20
        }
      })
      console.info(res)

  }
相关推荐
一点一木1 天前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api
还是大剑师兰特1 天前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
可触的未来,发芽的智生1 天前
触摸未来2025-10-25:蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户47949283569151 天前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
__WanG1 天前
如何编写标准StatefulWidget页面
前端·flutter
非凡ghost1 天前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端
非凡ghost1 天前
VisualBoyAdvance-M(GBA模拟器) 中文绿色版
前端·javascript·后端
非凡ghost1 天前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·javascript·后端
麦麦大数据1 天前
F034 vue+neo4j 体育知识图谱系统|体育文献知识图谱vue+flask知识图谱管理+d3.js可视化
javascript·vue.js·知识图谱·neo4j·文献·体育·知识图谱管理
LinXunFeng1 天前
Flutter 多仓库本地 Monorepo 方案与体验优化
前端·flutter·架构