weui的使用方法_weui使用教程

作者：酷酷是懒虫 | 2024-08-09 16:44:10

踩

weui使用教程

WEUI的使用方法; 交互以及屏蔽或者修改深色浅色模式

随笔一记, weui的使用方法, 以防之后使用浪费时间

对于减轻工作量还是有帮助的; 所以记了下来; 节省以后的时间

1. 引入

通过CDN的方式引入; 交互效果也是需要引入的, 下面再记

<!-- 引入 WeUI CDN 链接 -->
<link rel\="stylesheet" href\="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
1
2

通过npm或者yarn下载安装

npm install --save weui

然后javascript引入

import "weui";
1

我暂时采用的第一种方法

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\>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 关于深色模式; 浅色模式

weui会自动适配深色浅色模式, 根据你mac电脑的设置而定; 但是有时候我会想要对样式做一些调整; 所以需要屏蔽深色浅色模式

可在body添加属性data-weui-theme来控制，值为light/dark
使用weui变量来开发黑暗模式

.body {
    background-color: var(--weui-BG-0);
}
1
2
3

只需要在body标签写上一个属性

<!-- 这里我想屏蔽深色模式, 所以加了这句; 如果想改为深色显示可以将light改为dark -->

<!-- 默认是根据系统匹配显示, 即什么都不写 -->

<body data-weui-theme\='light'\>
1
2
3
4
5

完成 接下来涉及到交互的功能

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>
1

或者别的方式
去weui的js部分文档进行查看

5. 关于weiui交互功能

可以先在weui官方查看所需效果; 但是不必复制html结构; 因为弹出的交互是js完成的, 只要给组件需要用到的标签绑定点击事件;

genderN.addEventListener("click", function () {

})
1
2
3

去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: '选择性别'
            });
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/954226