微信小程序之WeUI组件库的使用 |
您所在的位置:网站首页 › 小程序开发示例怎么写好 › 微信小程序之WeUI组件库的使用 |
本文主要介绍微信小程序中的 WeUI组件库的具体使用方法,通过具体的示例代码进行介绍,相信能够对大家的学习和工作都有一定的参考学习意义,欢迎大家一起学习进步。 WeUI组件库 官方文档 一、前言WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 二、下载 1. git 下载:https://github.com/Tencent/weui-wxss点击链接进入 GitHub ,进入下面的页面,点击 Code 选择方式进行下载。
![]() WeUI下载 以下两种方式使用方法见官网就可以: useExtendedLib 扩展库 :useExtendedLib 扩展库 { "useExtendedLib": { "weui": true } } npm构建:npm包名为 weui-miniprogram 具体使用方式见:npm构建支持 四、使用dist/example/下的组件
因为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 |