xp花生壳做自己的网站,同性男做的视频网站,广东省建设注册执业资格中心网站,珠海的网站建设一、小程序对npm的支持与限制
目前#xff0c;小程序中已经支持使用 npm 安装第三方包#xff0c;从而来提高小程序的开发效率。但是#xff0c;在小程序中使用npm 包有如下3个限制: ① 不支持依赖于 Node.js 内置库的包 ② 不支持依赖于浏览器内置对象的包 ③ 不支持依赖于…一、小程序对npm的支持与限制
目前小程序中已经支持使用 npm 安装第三方包从而来提高小程序的开发效率。但是在小程序中使用npm 包有如下3个限制: ① 不支持依赖于 Node.js 内置库的包 ② 不支持依赖于浏览器内置对象的包 ③ 不支持依赖于 C 插件的包 总结:虽然 npm 上的包有千千万但是能供小程序使用的包却“为数不多”
二、Vant Weapp
1、什么是Vant Weapp
Vant Weapp 是有赞前端团队开源的一套小程序 U 组件库助力开发者快速搭建小程序应用。它所使用的是MIT 开源许可协议对商业使用比较友好。 官方文档地址 https://youzan.github.io/vant-weapp
2、安装Vant组件库
在小程序项目中安装 Vant 组件库主要分为如下3步: ① 通过 npm 安装(建议指定版本为1.3.3) ② 构建 npm 包 ③ 修改 app.json 安装Vant组件库 详细的操作步骤大家可以参考 Vant 官方提供的快速上手教程:
https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang
3、使用Vant组件
安装完 Vant 组件库之后可以在 app.json 的 usingComponents 节点中引入需要的组件即可在 wxml 中直接使用组件。示例代码如下:
//app.json
usingComponents:{van-button:vant/weapp/button/index
}//页面的.wxml结构
van-button typeprimary按钮/van-button
4、定制全局主题样式
Vant Weapp 使用 CSS 变量来实现定制主题。 关于 CSS 变量的基本用法请参考 MDN 文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_css_custom_properties
5、定制全局主题样式
在app.wxss中写入CSS变量即对全局生效
/* app.wxss */
page{/*定制警告按钮的背景颜色和边框颜色*/--button-danger-background-color: #C00000;--button-danger-border-color: #D60000;
}三、API Promise化
1、基于回调函数的异步API的缺点
默认情况下小程序官方提供的异步 AP! 都是基于回调函数实现的例如网络请求的 API需要按照如下的方式调用:
wx.request({method:,url:,data:{},success:(){},//请求成功的回调函数fail:(){},//请求失败的回调函数complete:(){}//请求完成的回调函数
})
缺点:容易造成回调地狱的问题代码的可读性、维护性差!
2、什么是API Promise化
API Promise化指的是通过额外的配置将官方提供的、基于回调函数的异步 API升级改造为基于Promise 的异步 API从而提高代码的可读性、维护性避免回调地狱的问题。
3、实现API Promise化
在小程序中实现 APIPromise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。它的安装和使用步骤如下:
在项目下打开PowerShell窗口输入一下
npm install --save miniprogram-api-promise1.0.4
//小程序入口文件中app.js只需调用一次promisifyAll()方法
//即可实现异步API的Promise化
import {promisifyAll} from miniprogram-api-promiseconst wxp wx.p {}
//promisify all wxs api
promisifyAll(wx, wxp)
4、调用Promise化之后的异步API
//页面的.wxml结构
van-button typedanger bindtapgetInfovant按钮/van-button//在页面的.js文件中定义对应的tap事件处理函数
async getInfo(){const{data:res} await wx.p.request({method:GET,url:https://www.escook.cn/api/get,data:{name: zs,age:20}})consolr.log(res)
}
