ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

【微信小程序】 使用NPM包与VantWeapp

2022-05-05 11:02:35  阅读:193  来源: 互联网

标签:NPM npm 包与 微信 程序 miniprogram json API Promise


 

小程序对npm的支持与限制

目前,小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率。

但是,在小程序中使用npm包有如下3个限制:

① 不支持依赖于Node.js内置库的包
② 不支持依赖于浏览器内置对象的包
③ 不支持依赖于C++插件的包

总结:虽然npm_上的包有千千万,但是能供小程序使用的包却"为数不多”

 

1.什么是Vant Weapp

Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用。

它所使用的是MIT开源许可协议,对商业使用比较友好。

官方文档地址:

https://youzan.github.io/vant-weapp/#/home

  

2.安装Vant组件库

在小程序项目中,安装Vant组件库主要分为如下3步:

①通过ηpm安装(建议指定版本为@1.3.3)
②构建npm包
③修改app.json

https://youzan.github.io/vant-weapp/#/quickstart

使用CMD打开微信小程序根目录

首先使用NPM初始化项目

npm init -y

执行NPM安装Vant / Weapp命令

λ npm i @vant/weapp@1.3.3 -S --production
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Administrator\Desktop\戴知舟的目录\frontend-note\Stage7 微信小程序\miniprogram-stud
y-test\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Administrator\Desktop\戴知舟的目录\frontend-note\Stage7 微信小程序\miniprogram-study-t
est\package.json'
npm WARN miniprogram-study-test No description
npm WARN miniprogram-study-test No repository field.
npm WARN miniprogram-study-test No README data
npm WARN miniprogram-study-test No license field.

+ @vant/weapp@1.3.3
added 1 package from 1 contributor in 16.105s

 

构建NPM包:

构建完成提示信息:

 

之前的版本是需要勾选【使用NPM模块】

但是我这个版本已经没有了

看了Vant文档得知,还需要配置,project.config.json文件

修改app.json

將app,json中的"style": "v2” 去除, 小程序的新版基础组件强行加上了许多样式,

难以去除,不关闭将造成部分组件样式混乱。

3.使用Vant组件

安装完Vant组件库之后,可以在app.json的usingComponents节点中引入需要的组件,

即可在wxml中直接使用组件。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

使用Button组件:

<van-button type="primary">按钮</van-button>

 

VantWeapp样式定制:

CSS变量基本用法:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

 

小程序页面的根节点是page标签,

局部页面样式,定义在页面的.wxss文件中

如果要全局配置,定义在app.wxss文件中

page {
    --but ton-danger-background-color:■#C00000;
    --button-danger-border-color:■ #D60000;  
}

关于VantWeapp主题的配置:

https://youzan.github.io/vant-weapp/#/theme

VantWeapp默认使用Less插件编写

CSS的变量前缀是@开头,实现自定义配置只要改成--前缀即可

 

 

小程序API的Promise化

1.基于回调函数的异步API的缺点

默认情况下,小程序官方提供的异步API都是基于回调函数实现的,

缺点:容易造成回调地狱的问题,代码的可读性、维护性差!

2.什么是API Promise化

API Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步API,

升级改造为基于Promise的异步API,从而提高代码的可读性、维护性,避免回调地狱的问题。

 

3.实现API Promise化

在小程序中,实现API Promise化主要依赖于miniprogram-api-promise这个第三方的npm包。

它的安装和使用步骤如下:

npm install --save miniprogram-api-promise@1.0.4

 

先把之前的miniprogram_npm删除,再进行构建

微信小程序IDE这个构建功能不是很稳定,每次构建之后要检查构建的miniprogram_npm包是否存在

若不存在则需要重新构建

 

在app.js 初始化配置

/**
 * NPM支持
 * npm init -y
 * 
 * 项目配置
 * project.config.json
 *  "packNpmManually": true,
 *  "packNpmRelationList": [
 *    {
 *      "packageJsonPath": "./package.json",
 *      "miniprogramNpmDistDir": "./"
 *    }
 *  ],
 * 
 * 依赖安装
 * npm install --save miniprogram-api-promise@1.0.4
 *  
 * 【工具】-> 【使用NPM进行构建】
 * 
 * 在小程序入口文件中(app.js),
 * 只需调用一次promisifyAll() 方法即可实现异步API的Promise 化
 * 
 */
import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)

  

使用Promise

测试的组件

<van-button type="primary" bindtap="getPromiseTest">
  Promise测试
</van-button>

调用Promise

  /**
   * promise测试
   */
  async getPromiseTest() {
    const { data: res } = await wx.p.request({
      url: 'https://www.escook.cn/api/get',
      method: 'GET',
      data: { name: 'zs', age: 20 }
    }) 
    console.log(res)
  }

请求成功:

{"message":"get ok","data":{"name":"zs","age":"20"}}

  

 

标签:NPM,npm,包与,微信,程序,miniprogram,json,API,Promise
来源: https://www.cnblogs.com/mindzone/p/16223460.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有