在线微信html和css原生页面

已于 2023-06-13 15:47:00 修改
阅读量734 收藏 1
点赞数 1
文章标签： css html 微信
于 2023-03-24 12:08:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/languageStudent/article/details/129748053
版权
这是一个展示前端聊天页面实现的示例，包括扫码登录页面、聊天主界面和用户列表。代码包括HTML结构和LESS样式，实现了基本的聊天功能，如搜索好友、显示聊天记录以及发送消息的布局。目前缺少实时聊天和一些附加功能，但计划未来开发。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

示例

扫码失效页面

在这里插入图片描述

扫码成功页面

在这里插入图片描述

聊天页面

在这里插入图片描述

主要聊天页面代码如下

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet/less" href='index.less'>
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
</head>

<body>

    <div class="win">
        <div class="left">
            <div>
                <div class="left_box">
                    <img class="icon" src="img/avatar.jpg" alt="">
                </div>
                <div class="left_box">
                    <img class="icon" src="img/select_msg.png">
                    <!-- <img src="img/msg.png"> -->
                </div>
                <div class="left_box">
                    <!-- <img class="icon" src="img/select_friend.png"> -->
                    <img class="icon" src="img/friend.png">
                </div>
            </div>
            <div class="left_box" @click="logout">
                <img class="icon" src="img/exit.png">
            </div>
        </div>
        <div class="chat">
            <div class="user">
                <div class="search">
                    <input class="input" placeholder="搜素好友添加">
                    <div class="add_box">
                        <img src="img/add.png">
                    </div>
                </div>
                <div class="user_list">
                    <li v-for="i in 5">
                        <img src="img/avatar.jpg">
                        <div class="info">
                            <div class="name_msg">
                                <span class="name">用户名称</span>
                                <span class="time">23/01/01</span>
                            </div>
                            <div class="msg">
                                消息
                            </div>
                        </div>
                    </li>

                </div>
            </div>
            <div class="chitchat">
                <div class="top">
                    <span>测试好友名称</span>

                </div>
                <div class="main">
                    <div class="show_chat">
                        <!--          好友消息-->
                        <div class="friend" v-for="i in 3">
                            <div class="avatar_box">
                                <img class="avatar" src="img/to.jpg">
                            </div>
                            <div class="char_user">
                                <span class="user_name">
                                    测试好友
                                </span>
                                <div class='msg_left'>
                                    <span class="msg_text">
                                        你好，这是内容。Hello,this is massage.1.1.1.1.1.1.342523452345
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--          自己消息-->
                        <div class="my">
                            <div class="avatar_box">
                                <img class="avatar" src="img/avatar.jpg">
                            </div>
                            <div class="char_user">
                                <div class='msg_right'>
                                    <span class="msg_text">
                                        你好，这是内容。Hello,this is massage.
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="input_box">
                        <div class="tool">
                            <img src="img/meme.png" alt="">
                        </div>
                        <div class="chat_input_box">
                            <div class="chat_input">
                                <textarea autofocus></textarea>
                            </div>
                            <div class="send">
                                <button class="send_btn">发送</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div @click="logout" class="close">
            <span>&times;</span>
        </div>
    </div>
</body>

</html>

LESS样式代码 预览时需要放在同级目录


body {
  margin: 0;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.win {
    position: relative;
    display: flex;
    width: 70%;
    min-height: 600px;
    height: 65%;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 0 57px #b7b7b7;
  }
  
  .left {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    color: #fff;
    display: flex;
    width: 60px;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background: #e6e0df;
  }
  
  .close {
    position: absolute;
    right: 10px;
    cursor: pointer;
    span{
      font-size: 33px;
    }
  }
  
  .close:hover{
    color: #ce8176;
  }
  
  .left_box {
    margin: 20px 0;
    width: 100%;
    cursor: pointer;
  }
  
  .icon {
    width: 60%;
    border-radius: 5px;
  }
  
  .msg_left {
    word-break:break-all;
    position: relative;
    max-width: 75%;
    min-height: 20px;
    padding: 8px;
    text-align: start;
    margin-left: 15px;
    border-radius: 10px;
    background: #ebebeb;
    clear: both
  }
  .msg_left:before {
    position: absolute;
    top: 6px;
    left: -20px;
    padding: 0;
    border: 10px solid;
    border-color: transparent #ebebeb transparent transparent;
    display: block;
    content: '';
    z-index: 9;
  }
  .chat {
    position: relative;
    display: flex;
    min-height: 600px;
    width: 100%;
    border-radius: 8px;
  }
  
  
  .user {
    flex: 6;
    background-color: #f7f7f7;
    border-right: 1px solid rgba(214, 214, 214, 0.8);
    display: flex;
    flex-direction: column;
  
    .search {
      display: flex;
      height: 55px;
      align-items: center;
      justify-content: space-around;
  
      .input {
        padding-left: 10px;
        height: 25px;
        background-color: #eaeaea;
        border-radius: 5px;
        border: 1px solid #eaeaea;
        outline: none;
        width: 70%;
      }
  
      .input:focus {
        border: 1px solid #eaeaea;
        background-color: #f8f8f8;
      }
  
      .add_box {
        width: 25px;
        height: 25px;
        background-color: #eaeaea;
        border-radius: 3px;
        cursor: pointer;
  
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  
    .user_list {
      flex: 1;
      width: 100%;
      background-color: #e9e7e6;
      overflow-y: scroll;
  
      li {
        cursor: default;
        display: flex;
        list-style: none;
        align-items: center;
        height: 60px;
  
        .info {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
  
        img {
          margin: 0 10px;
          height: 70%;
          border-radius: 6px;
        }
  
        .name_msg {
          width: 100%;
          text-align: start;
  
          .name {
            font-size: 15px;
          }
  
          .time {
            float: right;
            padding-right: 8px;
            font-size: 12px;
            color: #999;
          }
        }
  
        .time_box {
          display: flex;
        }
  
        .msg {
          color: #999999;
          font-size: 14px;
        }
      }
  
      li:hover {
        background-color: #c5c5c6;
      }
    }
  }
  
  .chitchat {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    flex: 13;
    display: flex;
    flex-direction: column;
    background-color: #f3f3f3;
  
    .top {
      text-align: start;
      height: 55px;
      padding-left: 20px;
      line-height: 55px;
      border-bottom: 1px solid rgba(236, 236, 236, 1);
    }
  
    .main {
      line-height: normal;
      flex: 1;
      display: flex;
      flex-direction: column;
  
      .show_chat {
        overflow-y: scroll;
        padding: 8px 30px;
        border-bottom: 1px solid rgba(236, 236, 236, 1);
        height: 60%;
  
        .avatar_box {
          width: 40px;
          height: 50px;
  
          .avatar {
            margin-top: 5px;
            display: inline-block;
            border-radius: 5px;
            width: 100%;
          }
        }
  
        li {
          list-style: none;
        }
  
        .friend {
          .char_user {
            text-align: start;
          }
  
          display: flex;
          margin-bottom: 10px;
  
          .user_name {
            color: #b2b2b2;
            font-size: 13px;
            margin-left: 20px;
            margin-top: -5px;
          }
        }
  
        .my {
          .char_user {
            text-align: end;
          }
  
          display: flex;
          flex-direction: row-reverse;
          margin-bottom: 10px;
          text-align: end;
  
          .user_name {
            color: #b2b2b2;
            font-size: 13px;
            margin-left: 20px;
            margin-top: -5px;
          }
  
          .char_user {
            text-align: start;
          }
        }
      }
  
      .input_box {
        display: flex;
        height: 40%;
        flex-direction: column;
  
        .tool {
          height: 22px;
          text-align: start;
          padding: 10px 30px;
  
          img {
            height: 100%;
          }
        }
  
        .chat_input_box {
          flex: 1;
          padding: 0 30px;
  
          .chat_input {
            height: 75%;
            width: 100%;
  
            textarea {
              font-size: 25px;
              width: 100%;
              height: 80%;
              max-height: 100%;
              overflow-y: scroll;
              border: none;
              background-color: #f3f3f3;
              resize: none;
            }
  
            textarea:focus {
              outline-style: none;
            }
          }
  
          .send {
            display: flex;
            justify-content: flex-end;
  
            .send_btn {
              color: #07c160;
              border-radius: 5px;
              background-color: #e9e9e9;
              height: 30px;
              padding: 3px 45px;
              outline: none;
              border: none;
            }
  
            .send_btn:hover {
              background-color: #d2d2d2;
            }
  
            .send_btn:focus {
              outline: none;
            }
  
            .send_btn:active {
              background-color: #c6c6c6;
            }
          }
        }
      }
    }
  
  }
  
  
  .msg_text {
    font-size: 14px;
  }
  
  .msg_left {
    word-break: break-all;
    position: relative;
    max-width: 75%;
    min-height: 20px;
    padding: 8px;
    text-align: start;
    margin-left: 15px;
    border-radius: 10px;
    background: #ebebeb;
    clear: both
  }
  
  .msg_left:before {
    position: absolute;
    top: 6px;
    left: -20px;
    padding: 0;
    border: 10px solid;
    border-color: transparent #ebebeb transparent transparent;
    display: block;
    content: '';
    z-index: 9;
  }
  
  .msg_right {
    position: relative;
    word-break: break-all;
    max-width: 75%;
    min-height: 20px;
    padding: 8px;
    float: right;
    text-align: start;
    margin-right: 15px;
    border-radius: 10px;
    background: #89d961;
    clear: both
  }
  
  .msg_right:before {
    position: absolute;
    top: 10px;
    right: -20px;
    padding: 0;
    border: 10px solid;
    border-color: transparent transparent transparent #89d961;
    display: block;
    content: '';
    z-index: 9;
  }

  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 2px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #c0bdbb;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #adaaa9;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 2px;
    background: none;
  }

参考MAC微信客户端。该文章为纯前端代码
由于图标文件在该文章无法提供下载，需要的可以联系，或者等资源审核通过提供下载地址（待更新）

目前已实现扫码浏览器登录、登录二维码过期，暂未开放。

后续会开发微信im实时聊天、好友列表、添加好友、发送表情、聊天记录、在线状态...请持续关注

html实现微信界面
02-06
个人模仿微信写的小项目，实现了基本的六个界面，代码详尽
html+css模仿微信主页面
weixin_62177449的博客
08-29 5476
html+css模仿微信页面
HTML5 Web微信聊天窗口界面模板
最新发布
gitblog_06780的博客
04-17 424
HTML5 Web微信聊天窗口界面模板 【下载地址】HTML5Web微信聊天窗口界面模板 这是一个基于HTML5的Web微信聊天窗口界面模板，专为开发者设计，帮助快速构建美观、实用的聊天应用。该模板高度还原微信聊天窗口的设计风格，支持多终端设备访问，包括手机、平板和电脑。内置聊天输入框、消息列表、表情等功能，并允许自定义...
html 微信界面,微信界面.html
weixin_42516040的博客
06-04 1328
微信界面*{margin:0px;padding:0px;}.all{padding-top:40px;padding-bottom:50px;}img{border:0px;vertical-align:middle;width:100%;}.clearfix:after{content:"";clear:both;display:table}.fl{float:left}.header{bac...
HTML+CSS微信主页面简洁制作
Naiveyouzhi的博客
11-09 740
第一张：HTML文件。
html在线聊天窗口
01-30
html在线聊天窗口,只是窗口哦,没有jsp，画面而已
html+css 小项目 微信界面
独宠卿一人
08-28 5232
我的微信界面是按照我的手机来的，其中设宽高的时候有点失误，导致在横屏的时候看着是扁的！！！！这个需要更改一下！！朋友圈的内容在另外一个软件上，没有找的，就只能用刚开始写的那个啦！！ 话不多说，先上效果图 在这里插入图片描述 这是效果图，代码看下个博客！！！ ...
基于原生html+css实现仿微信电脑客户端页面源码+项目说明.zip
12-29
基于原生html+css实现仿微信电脑客户端页面源码+项目说明.zip 仿微信页面 1. 实现目标 实现仿微信通讯录页面 1. 总体布局 # （1）布局分析 实现页面的第一的步骤是分析页面的总体布局，进而写出总体的html骨架，从...
微信小程序-原生-使用微信开发者工具
09-05
- **WXSS**：基于CSS，但增加了微信小程序特有的特性，如相对单位rpx，用于处理页面样式和布局。 4. **小程序生命周期**： 微信小程序有自己的一套生命周期函数，包括onLoad、onShow、onHide、onUnload等，这些...
微信小程序实现原生步骤条
10-16
在微信小程序中实现原生步骤条，主要是为了创建...总的来说，微信小程序实现原生步骤条涉及到了布局设计、样式设置、事件处理和数据管理等多个方面，通过这些技术，开发者可以创建出具有交互性和视觉吸引力的用户体验。
微信小程序 仿京东商城页面 仿京东商城购物页面
06-13
WXML 负责页面结构，类似 HTML，而 WXSS 类似 CSS，但有其特有语法和功能。 2. **数据绑定**: WXML 和 WXSS 之间的数据交互通过 JavaScript 进行，利用微信小程序的 Vue.js 风格的数据绑定机制，如 `{{ }}` 双大...
HTML5手机微信聊天界面代码
05-06
HTML5手机微信聊天界面代码，模拟微信聊天界面代码，自动回复。
移动端在线聊天HTML效果
02-05
该demo是用html+css+js纯手工打造，移动端效果杠杠的。
HTML5手机微信聊天界面代码.zip
05-16
HTML5手机微信聊天界面代码.zip
html5仿网页版微信聊天界面代码
11-24
html5仿网页版微信聊天界面代码
HTML5仿电脑端微信聊天窗口界面代码.zip
07-07
HTML5仿电脑端微信聊天窗口界面代码
原生微信小程序css实现雷达图
2301_81331526的博客
01-02 637
【代码】原生微信小程序css实现雷达图。
HTML5仿微信聊天界面和朋友圈代码 H5
PmtxPhp的博客
09-24 1526
在上面的代码中，我们使用JavaScript获取输入框和消息/动态显示区域的引用，并定义了相应的函数来处理发送消息和发布动态的逻辑。请注意，上述代码只是一个简单的示例，用于演示如何使用HTML5、CSS和JavaScript创建仿微信聊天界面和朋友圈。通过将上述HTML、CSS和JavaScript代码组合在一起，我们就可以实现一个简单的仿微信聊天界面和朋友圈的页面。在这个文件中，我们将定义聊天界面和朋友圈的样式。在上面的代码中，我们设置了聊天界面和朋友圈容器的样式，包括宽度、高度、边框和背景颜色等。
用html、css实现网页聊天页面
热门推荐
k_06140的博客
07-01 1万+
用html、css实现聊天页面
微信小程序微信原生隐藏页面滚动条
03-27
<think>好的，我现在需要在微信小程序中隐藏页面滚动条。用户提到了使用原生CSS样式的方法，我需要找到正确的解决方案。首先，我应该回忆一下之前学过的相关知识，或者查找相关的引用资料。 根据用户提供的引用，特别是引用[1]和引用[4]，里面提到了隐藏滚动条的方法。引用[1]中提到了在app.vue的style里添加一些CSS代码，但那是针对Hbuilder开发的，可能不适用于原生小程序。而引用[4]则详细说明了在小程序中使用overflow: hidden;来控制页面滚动，并且需要设置page的高度为100%。这可能是一个可行的方法。 不过，用户问的是隐藏滚动条，而不仅仅是禁止滚动。微信小程序的页面滚动条默认是存在的，尤其是在使用scroll-view组件时。引用[2]提到scroll-view的一些属性，但可能和隐藏滚动条无关。而引用[1]中的CSS代码可能更直接，但需要确认是否适用于原生小程序。 现在我需要确认，在原生微信小程序中，如何通过CSS样式来隐藏滚动条。通常，在Web开发中，可以使用::-webkit-scrollbar伪元素来隐藏滚动条。但微信小程序的页面结构可能有所不同，是否支持这个伪元素呢？ 根据引用[1]，在原生小程序开发中，需要在根目录的wxss文件里导入相应的样式。可能的做法是在app.wxss中添加以下代码： ::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } 这样应该可以隐藏全局的滚动条。同时，引用[4]提到设置page的高度为100%，并且在内部容器中使用overflow: hidden;来禁止滚动。但用户的需求是隐藏滚动条，而不是禁止滚动，所以可能需要同时处理。 不过，如果用户希望页面仍然可以滚动，只是不显示滚动条，可能需要结合两种方法：使用::-webkit-scrollbar隐藏滚动条，同时确保页面布局允许滚动。例如，设置page的高度，然后允许内部元素溢出滚动，但隐藏滚动条。 可能需要注意，不同的平台（iOS和安卓）可能有不同的表现，引用[2]提到scroll-anchoring在iOS有效，安卓可能需要其他方法。但滚动条的隐藏可能也依赖于浏览器内核的支持，微信小程序的内核是否支持::-webkit-scrollbar的样式呢？ 根据微信小程序的官方文档，确实支持使用::-webkit-scrollbar来定制滚动条样式，包括隐藏它。因此，正确的解决方案应该是在app.wxss中添加对应的CSS样式，或者在特定页面的wxss中应用，以隐藏滚动条。 总结步骤： 1. 在app.wxss中添加全局样式隐藏滚动条。 2. 确保页面结构允许滚动，比如不设置overflow:hidden，否则滚动功能会被禁用。 3. 测试不同平台下的效果，确保滚动条被隐藏且滚动功能正常。 可能存在疑问的是，是否需要设置page的高度为100%？引用[4]中提到需要设置page { height: 100%; }，然后内部容器设置overflow: hidden。但这里的用户需求是隐藏滚动条，而不是禁止滚动，所以可能不需要设置overflow:hidden，只需隐藏滚动条即可。因此正确的做法可能是在全局样式里隐藏滚动条，而保持页面结构允许滚动。</think>在微信小程序中隐藏页面滚动条可以通过以下原生CSS样式实现： ### 解决方案步骤 1. **全局样式设置** 在`app.wxss`文件顶部添加以下代码： ```css ::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; color: transparent; } ``` 这会隐藏所有页面的滚动条，同时保留滚动功能[^1]。 2. **页面结构设置** 确保页面容器允许内容溢出滚动，例如： ```html <view class="container"> <!-- 长内容 --> </view> ``` ```css .container { height: 100vh; /* 确保容器高度占满屏幕 */ overflow-y: auto; /* 允许纵向滚动 */ } ``` ### 注意事项 - **兼容性**：`::-webkit-scrollbar`在iOS和安卓均有效，但部分安卓机型可能需要额外设置`width:0`[^1]。 - **禁止滚动**：若需完全禁止滚动，可设置`page { height: 100%; overflow: hidden; }`，但会牺牲滚动功能[^4]。 - **组件级控制**：若使用`scroll-view`组件，可通过`show-scrollbar`属性控制滚动条显隐[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

languageStudents

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值