WEUI的使用方法; 交互以及屏蔽或者修改深色浅色模式
随笔一记, weui的使用方法, 以防之后使用浪费时间
对于减轻工作量还是有帮助的; 所以记了下来; 节省以后的时间
1. 引入
- 通过CDN的方式引入; 交互效果也是需要引入的, 下面再记
<!-- 引入 WeUI CDN 链接 -->
<link rel\="stylesheet" href\="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
- 通过npm或者yarn下载安装
npm install --save weui
然后javascript引入
import "weui";
我暂时采用的第一种方法
2. 放入正确的html结构
怎么去找结构呢?
- 去weui官方 查找所需样式; 选好自己需要的
- 去weui官方文档选择所需代码复制单贴;
- 或者也可以直接在weui官方打开开发者控制台; 选中所需元素, 右键Copy; 然后Copy element; 粘贴使用即可
- 根据自身需求修改标签
<div class\="weui-cells"\>
<!-- 要粘贴的列表项盒子都放到这里面来 -->
<!-- aria-相关的属性是对于盲人的支持, 非必要可以删除; -->
<!-- 这里我不需要跳转; 所以a标签改为了div标签 -->
<div class\="weui-cell weui-cell\_access"\>
<!-- 所有盒子的属性, 除了类名都可以改变; 所以我都删除了 -->
<span class\="weui-cell\_\_bd"\>
<span\>更换头像</span\>
</span\>
<span class\="weui-cell\_\_ft"\>
<span id\="logo"\></span\>
</span\>
</div\>
</div\>
3. 关于深色模式; 浅色模式
weui会自动适配深色浅色模式, 根据你mac电脑的设置而定; 但是有时候我会想要对样式做一些调整; 所以需要屏蔽深色浅色模式
可在body添加属性data-weui-theme来控制，值为light/dark
使用weui变量来开发黑暗模式
.body {
background-color: var(--weui-BG-0);
}
只需要在body标签写上一个属性
<!-- 这里我想屏蔽深色模式, 所以加了这句; 如果想改为深色显示可以将light改为dark -->
<!-- 默认是根据系统匹配显示, 即什么都不写 -->
<body data-weui-theme\='light'\>
完成 接下来涉及到交互的功能
4. 引入weui的JS部分
- 第一种方式, 通过连接
<script type="text/javascript" src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.18/weui.min.js"></script>
- 或者别的方式
去weui的js部分文档进行查看
5. 关于weiui交互功能
- 可以先在weui官方查看所需效果; 但是不必复制html结构; 因为弹出的交互是js完成的, 只要给组件需要用到的标签绑定点击事件;
genderN.addEventListener("click", function () {
})
- 去weui官方文档找到所需js代码; 复制到监听函数内部
genderN.addEventListener("click", function () {
weui.picker([ //数组对象;
{ label: '女', value: 0 },
{ label: '男', value: 1 },
{ label: '保密', value: 2 }],
{
// // 当滑动选择框时触发事件; 这里我不需要, 注释掉
// onChange: function (result) {
// console.log(result);
// },
// 当选定之后触发事件; result也是一个数组包对象, 所以要取出来
onConfirm: function (result) {
genderN.textContent = result[0].label //显示性别
genderN.dataset.v = result[0].value //储存性别id
},
title: '选择性别'
});
})