【微信小程序】 使用NPM包与VantWeapp
2022/5/5 11:42:55
本文主要是介绍【微信小程序】 使用NPM包与VantWeapp,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
小程序对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包与VantWeapp的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享