专业的顺的网站建设,出入兰州最新通知今天,网站建设三方协议,客户管理软件排行1、小程序对npm的支持与限制2、Vant Weapp通过 npm 安装修改 app.json修改 project.config.json构建 npm 包 3、使用4、定制全局主题样式5、API Promise化 1、小程序对npm的支持与限制 目前#xff0c;小程序中已经支持使用npm安装第三方包#xff0c; 从而来提高小程序的开发… 1、小程序对npm的支持与限制2、Vant Weapp通过 npm 安装修改 app.json修改 project.config.json构建 npm 包 3、使用4、定制全局主题样式5、API Promise化 1、小程序对npm的支持与限制 目前小程序中已经支持使用npm安装第三方包 从而来提高小程序的开发效率。但是在小程序中使用 npm包有如下3个限制: 不支持依赖于Node.js内置库的包 不支持依赖于浏览器内置对象的包 不支持依赖于C插件的包
2、Vant Weapp
Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用
官方文档地址https://vant-contrib.gitee.io/vant-weapp/#/home
通过 npm 安装 使用 npm 构建前请先阅读微信官方的 npm 支持 # 通过 npm 安装
npm i vant/weapp -S --production# 通过 yarn 安装
yarn add vant/weapp --production# 安装 0.x 版本
npm i vant-weapp -S --production修改 app.json
将 app.json 中的 style: v2 去除小程序的新版基础组件强行加上了许多样式难以覆盖不关闭将造成部分组件样式混乱。
修改 project.config.json
开发者工具创建的项目miniprogramRoot 默认为 miniprogrampackage.json 在其外部npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置使开发者工具可以正确索引到 npm 依赖的位置。
{ ...setting: {...packNpmManually: true,packNpmRelationList: [{packageJsonPath: ./package.json,miniprogramNpmDistDir: ./miniprogram/}]}
}注意 由于目前新版开发者工具创建的小程序目录文件结构问题npm构建的文件目录为miniprogram_npm并且开发工具会默认在当前目录下创建miniprogram_npm的文件名所以新版本的miniprogramNpmDistDir配置为’./即可 构建 npm 包
打开微信开发者工具点击 工具 - 构建 npm并勾选 使用 npm 模块 选项构建完成后即可引入组件
3、使用
引入组件
以 Button 组件为例只需要在app.json或index.json中配置 Button 对应的路径即可。
所有组件文档中的引入路径均以 npm 安装为例如果你是通过下载源代码的方式使用 vant/weapp请将路径修改为项目中 vant/weapp 所在的目录
// 通过 npm 安装
// app.json
usingComponents: {van-button: vant/weapp/button/index
}
// 通过下载源码使用 es6版本
// app.json
usingComponents: {van-button: path/to/vant/weapp/dist/button/index
}
// 通过下载源码使用 es5版本
// app.json
usingComponents: {van-button: path/to/vant/weapp/lib/button/index
}引入组件后可以在 wxml 中直接使用组件
van-button typeprimary按钮/van-button4、定制全局主题样式
自定义属性 自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的它包含的值可以在整个文档中重复使用 由自定义属性标记设定值(比如: --main-color: black;)
由var() 的数束获取值(比如: color: var(--nain-color);)
比如中main-text-color 此Peoffee更易理解尤其是这个颜色们在其他上下文中也被使用到。自定义属性受级联的约束。并从其父级继承其值。
基本用法
声明-个自定义属性。属性名需要以两个减号()开始属性值则可以是任何有效的CSS值。和其他属性一样自定义属性也是写在规则集之内的,如下:
element {
--main-bg-color: broun;
}page{/* //定制警告按钮的背景颜色和边框颜色 */--button-danger-background-color:#C00000;--button-danger-border-color:#f77575;}5、API Promise化
1、基于回调函数的异步API的缺点
默认情况下小程序官方提供的异步API都是基于回调函数实现的例如网络请求的API需要按照如下的方 式调用:
wx.request({method:,url:,data:{},success:(){ }, //请求成功的回调函数fail:() { }, //请求失败的回调函数complete:() { } //请求完成的回调函数
})2、什么是API Promise化
API Promise化指的是通过额外的配置将官方提供的、基于回调函数的异步API,升级改造为基于Promise的异步API,从而提高代码的可读性、维护性避免回调地狱的问题。
3、实现API Promise化
在小程序中实现API Promise化主要依赖miniprogram-api-promise这个第三方的npm包。它的安装
npm install --save miniprogram-api-promiseimport {promisifyAll} from miniprogram-api-promise
const wxpwx.p{}
promisifyAll(wx,wxp)4、调用Promise化之后的异步API //定义对应的tap事件处理函数async getInfo(){const {data:res} await wx.p.request({url: https://applet-base-api-t.itheima.net/api/get,data:{name:zs,age:20}})console.log(res);},
