小程序开发提效: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)

  }
相关推荐
GISer_Jing2 小时前
得物前端二面潜在问题详解
前端·javascript·面试
飞天巨兽3 小时前
HTTP基础教程详解
前端·网络·网络协议·http
FIN66683 小时前
昂瑞微IPO前瞻:技术破局高端射频模组,国产替代第二波浪潮下的硬科技突围
前端·科技·搜索引擎·产品运营·创业创新·制造·射频工程
玉树临风江流儿4 小时前
Cmake使用CPack实现打包
java·服务器·前端
xier1234565 小时前
一个全新的react表格组件方案
前端
未来之窗软件服务5 小时前
从东方仙盟筑基期看 JavaScript 动态生成图片技术-东方仙盟
开发语言·javascript·仙盟创梦ide·东方仙盟·图片技术
不叫猫先生6 小时前
中秋连连看小游戏开发完整教程
javascript·css·小游戏·连连看
卷Java6 小时前
预约记录关联查询接口说明
java·开发语言·spring boot·python·微信小程序
IT_陈寒6 小时前
5种JavaScript性能优化技巧:从V8引擎原理到实战提速200%
前端·人工智能·后端
蒋星熠6 小时前
Maven项目管理与构建自动化完全指南
java·前端·python·自动化·maven