weui的使用方法

最新推荐文章于 2024-03-15 17:07:37 发布

Lyc1cccccccc

最新推荐文章于 2024-03-15 17:07:37 发布

阅读量2.9k

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Lyc1cccccccc/article/details/130935264

版权

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: '选择性别'
            });
    })