微信小程序之WeUI组件库的使用
本文主要介绍微信小程序中的 WeUI组件库的具体使用方法,通过具体的示例代码进行介绍,相信能够对大家的学习和工作都有一定的参考学习意义,欢迎大家一起学习进步。
WeUI组件库 官方文档
一、前言
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button
、cell
、dialog
、 progress
、 toast
、article
、actionsheet
、icon
等各式元素。
二、下载
1. git 下载:https://github.com/Tencent/weui-wxss
点击链接进入 GitHub ,进入下面的页面,点击 Code 选择方式进行下载。
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/
下的组件
这个文件夹下的就是 WeUI 组件库的所有组件了,我们可以在 WeUI 上查看相关组件的样式展示,然后根据我们的具体需求来选择某个组件的使用。
因为example
下的组件文件太多,我们不可能全都用到,因此不可能全部放到我们的小程序中,这样会导致我们的小程序体积会变大,所以我们要按需引入即可。
比如,我们要在某个页面中用到button
组件,我们就需要在这个页面的json文件中引入该组件:
// index.json"usingComponents": {"botton": "../example/botton/botton"},
五、示例代码
使用一个组件的完整示例代码:Dialog组件
// index.json
{"usingComponents": {"mp-dialog": "../example/dialog/dialog"}
}// index.wxml
<mp-dialog title="弹窗" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"><view>提示内容</view>
</mp-dialog>// index.js
Page({data: {dialogShow: false,buttons: [{text: '取消'}, {text: '确定'}],},openConfirm: function () {this.setData({dialogShow: true})},tapDialogButton(e) {this.setData({dialogShow: false,})}
});
具体细节内容可以参照官网具体的组件示例进行代码的编写与配置。
六、参考文档
WeUI 官网:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
WeUI 官网按需下载:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
GitHub WeUI:https://github.com/Tencent/weui-wxss
微信小程序 npm 支持:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
useExtendedLib 扩展库:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib
有任何问题欢迎大家留言讨论,大家共同学习进步。
微信小程序之WeUI组件库的使用相关推荐
- 微信小程序引入WeUI组件库(笔记)
1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/st ...
- 微信小程序集成WeUI组件库
1.引入nmp依赖(前提是已经安装了nmp) 在小程序根目录(app.js所在目录),打开cmd, 输入:npm init -y,回车初始nmp 然后再输入:npm i miniprogram-sm- ...
- 微信小程序引入WeUI组件库并使用组件
1. git 下载:weui,解压,打开文件夹,dist文件夹,style-->weui.wxss,复制到项目里 2.useExtendedLib引入 根目录的app.json里引入 " ...
- 微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库 链接: vant开发指南. ...
- 微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”
注意:本篇文章不含技术方面的内容,只是感慨一下,如果你有类似的情况,或者想感受一下搞笑的bug,可以继续看一看,如果你想学习技术,本篇文章大概不会为你提供什么教学帮助. 我在做微信小程序的时候遇到过一 ...
- npm引入小程序官方WeUI组件库weui-miniprogram
1.打开cmd,在小程序根目录内,初始化npm npm init 2.执行命令安装 npm 包: npm install --save weui-miniprogram 3.安装完成后,在微信开发者工 ...
- 微信小程序入门ColorUI组件库使用方法
自学入门小程序不久,在对比现在主流的组件库后,笔者我选择了ColorUI,因为ColorUI界面精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,还方便自己定制. 下面是Col ...
- 微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
- 微信小程序引用Vant组件库message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内...
问题描述 message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内,或配置 project.config.json 的 pack ...
- A095_day01_微信小程序入门与组件
目录 微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
最新文章
- iOS UIWebView 访问https 绕过证书验证的方法
- NSKeyedUnarchiver简单的数据存储
- Windows7 设置 Java环境变量
- CodeForces - 1506G Maximize the Remaining String(单调栈+贪心)
- 《java设计模式》之责任链模式
- Codeforces Round #736 (Div. 1Div2)
- java加载配置文件
- 软件工程课设迭代开发第二天
- JavaScript——this与箭头函数
- java 加法 溢出_关于数字:Java 8 Unsigned Integer加法和潜在的溢出
- 验证服务器支持ipv6,支持IPv6的Radius服务器的配置过程
- c语言中的三角函数公式,tan三角函数公式有哪些
- 01【C3D 行为识别】项目下载 环境配置 数据集转化视频帧 UCF101数据集处理
- c语言实现矩阵转置、矩阵乘法
- php计算距离商家距离,php 计算3公里内所以用户的距离
- e路航LH900N导航仪凯立德最新版本地图更新方法
- CSS砖头盖大楼(一)
- IT招聘惨淡季?求职者无offer,招聘者无简历
- 【MATLAB图像处理】傅里叶变换--幅度谱、相位谱、逆变换
- 基于简单神经网络模型的鸢尾花分类问题