微信小程序之WeUI组件库的使用

您所在的位置:网站首页 小程序开发示例怎么写好 微信小程序之WeUI组件库的使用

微信小程序之WeUI组件库的使用

2024-07-15 04:58| 来源: 网络整理| 查看: 265

本文主要介绍微信小程序中的 WeUI组件库的具体使用方法,通过具体的示例代码进行介绍,相信能够对大家的学习和工作都有一定的参考学习意义,欢迎大家一起学习进步。

WeUI组件库 官方文档

一、前言

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

二、下载 1. git 下载:https://github.com/Tencent/weui-wxss

点击链接进入 GitHub ,进入下面的页面,点击 Code 选择方式进行下载。

git下载 下载好打开应该是这个样子的: 使用:

样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss组件的wxml结构请看dist/example/下的组件 在这里插入图片描述 2. 官网按需下载:

WeUI下载 按需下载 在这里插入图片描述 勾选自己需要用到的组件,直接下载就可以,下载好放到自己的项目中就可以直接使用。非常方便,不需要下载其他额外组件文件。

三、引入 weui.wxss 手动引入: 将 dist/style/weui.wxss 下的 weui.wxss 样式文件复制到项目根目录下; 在全局 app.wxss 中加入 @import "weui.wxss",完成样式文件的引入 /**app.wxss**/ @import 'weui.wxss'; page { ... }

以下两种方式使用方法见官网就可以:

useExtendedLib 扩展库 :useExtendedLib 扩展库 { "useExtendedLib": { "weui": true } } npm构建:npm包名为 weui-miniprogram 具体使用方式见:npm构建支持 四、使用dist/example/下的组件

dist/example/ 这个文件夹下的就是 WeUI 组件库的所有组件了,我们可以在 WeUI 上查看相关组件的样式展示,然后根据我们的具体需求来选择某个组件的使用。

因为example 下的组件文件太多,我们不可能全都用到,因此不可能全部放到我们的小程序中,这样会导致我们的小程序体积会变大,所以我们要按需引入即可。

比如,我们要在某个页面中用到button组件,我们就需要在这个页面的json文件中引入该组件:

// index.json "usingComponents": { "botton": "../example/botton/botton" }, 五、示例代码

使用一个组件的完整示例代码:Dialog组件

// index.json { "usingComponents": { "mp-dialog": "../example/dialog/dialog" } } // index.wxml


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3