一个微信小程序聊天静态页面(基于Vant Weapp)

最新推荐文章于 2024-03-25 09:30:22 发布
最新推荐文章于 2024-03-25 09:30:22 发布
阅读量862 收藏 8
点赞数 1
文章标签： 微信小程序 notepad++ 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32385421/article/details/134311279
版权

首先需要引用一下vant组件

{
    "enablePullDownRefresh": false,
    "usingComponents": {
        "van-image": "/vantdist/image/index",
        "van-field": "/vantdist/field/index",
        "van-cell-group": "/vantdist/cell-group/index",
        "van-button": "/vantdist/button/index",
        "van-icon": "/vantdist/icon/index",
        "van-row": "/vantdist/row/index",
        "van-col": "/vantdist/col/index"
    }
}

这里是HTML/wxml

<view class="container">
  <!-- <header id="top-header">
    <view style="width:100%;">
      <view>
        <view>顶部1</view>
        <view>顶部</view>
        <view>顶部</view>
      </view>
    </view>
  </header>-->
  <scroll-view id="main-content" scroll-y="{{true}}" scroll-top="{{scrollTop}}">
    <view>
      <view style="position: relative;">
        <!-- 一条聊天记录  -->
        <view id="msglistview" class="chat-body">
          <!-- 聊天记录 -->
          <view>
            <!-- 自己发的消息 -->
            <block wx:for="{{msgList}}">
              <view class="item self" wx:if="{{item.mine}}">
                <!-- 文字内容 -->
                <view style="display:flex;flex-direction: column;">
                  <view class="content right-time">{{item.date +" "+item.name}}</view>
                  <view>
                    <view class="content right">
                      <rich-text
                        mode="tag"
                        style="text-align:left"
                        nodes="{{_this.imgTag2richTag(item.text.text)}}"
                        user-select
                        data-html="{{item.text.text}}"
                        bind:tap="onClick_RichCard"
                      ></rich-text>
                    </view>
                  </view>
                </view>
                <!-- 头像 -->
                <view class="avatar">
                  <van-image width="78rpx" height="78rpx" fit="fill" src="{{item.img}}" />
                </view>
              </view>
              <!-- 客服发的消息 -->
              <view class="item kf" wx:else>
                <!-- 头像 -->
                <view class="avatar">
                  <van-image width="78rpx" height="78rpx" fit="fill" src="{{item.img}}" />
                </view>
                <!-- 文字内容 -->
                <view style="display:flex;flex-direction: column;">
                  <view class="content left-time">{{(item.date)+" "+item.name}}</view>
                  <view>
                    <view class="content left">
                      <rich-text
                        mode="tag"
                        style="text-align:left"
                        nodes="{{_this.imgTag2richTag(item.text.text)}}"
                        user-select
                        data-html="{{item.text.text}}"
                        bind:tap="onClick_RichCard"
                      ></rich-text>
                    </view>
                  </view>
                </view>
              </view>
              <!-- <view class="item Ai">
                <view class="avatar">
                  <van-image width="78rpx" height="78rpx" fit="fill" src="{{item.img}}"/>
                </view>
                <view>
                  <view class="content left-time">{{`${item.date} 　${item.name}`}}</view>
                  <view class="content left">
                    <van-image
                      width="100%"
                      height="10em"
                      fit="heightFix"
                      src="https://img.yzcdn.cn/vant/cat.jpeg"
                    />
                  </view>
                </view>
              </view>-->
            </block>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
  <footer id="bottom-footer">
    <view style="width:100%;">
      <view>
        <van-cell-group>
          <van-field
            model:value="{{ message }}"
            type="textarea"
            placeholder="请输入留言"
            autosize
            border="{{ false }}"
          >
            <view slot="button" style="display:flex">
              <van-icon name="add-o" size="1.4em" disable-default-padding="{{false}}" />
              <view style="margin-left:20rpx">
                <van-button
                  slot="button"
                  size="small"
                  type="primary"
                  bind:click="onClick_sendButton"
                >发送</van-button>
              </view>
            </view>
            <!-- <van-icon slot="button" name="add-o" /> -->
            <!-- <van-button slot="button" icon="add-o" round hairline /> -->
          </van-field>
        </van-cell-group>
      </view>
    </view>
  </footer>
</view>

<wxs module="_this">
  function imgTag2richTag(tag) {
  var mycontent = tag;
  var reg = getRegExp("<img", "g");
  mycontent = mycontent.replace(reg, '<img style="width:auto;height:10em"');
  var reg = getRegExp("<image", "g");
  mycontent = mycontent.replace(reg, '<image style="width:auto;height:10em"');
  return mycontent;
  }
  module.exports.imgTag2richTag = imgTag2richTag;
</wxs>

这里是js

// subpages/kf-message/kf-message.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        scrollTop: 0,
        message: "",
        msgList: [{
                date: "2020/04/25 21:19:07",
                text: {
                    text: "师傅你是做什么工作的?"
                },
                mine: true,
                name: "你",
                img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
            }, {
                date: "2020/04/25 21:19:07",
                text: {
                    text: "<img src='https://img.yzcdn.cn/vant/cat.jpeg'/>"
                },
                mine: false,
                name: "客服一号",
                img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
            },
            {
                date: "2020/04/25 21:19:07",
                text: {
                    text: "<img src='https://img.yzcdn.cn/vant/cat.jpeg'/>"
                },
                mine: true,
                name: "你",
                img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
            },
            {
                date: "2020/04/25 21:19:07",
                text: {
                    text: "您好,请给好评!"
                },
                mine: false,
                name: "客服一号",
                img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
            },
            {
                date: "2020/04/25 21:19:07",
                text: {
                    text: "您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!"
                },
                mine: false,
                name: "客服一号",
                img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
            }
        ]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    onClick_sendButton: function () {
        // let msgSry=this.data.message.split('\n');
        // let message = msgSry.join("<br/>")

        
        let message = this.data.message.replaceAll("\n", "<br/>")

        let msgItem = {
            date: Date.now(),
            text: {
                text: message
            },
            mine: true,
            name: "你",
            img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
        }
        this.data.msgList.push(msgItem);
        this.setData({
            msgList: this.data.msgList,
            message: ""
        })
        this.resetSorollBar();
    },
    // 点击卡片之后会预览图片
    onClick_RichCard: function (e) {
        // 将图片里的 src 提取出来，变成一个数组。
        const imgTags = e.currentTarget.dataset.html.match(/<img.*?>/g);
        const urls = [];
        if (imgTags) {
            imgTags.forEach((tag) => {
                let url = tag.match(/src="(.*?)"/) || tag.match(/src='(.*?)'/);
                if (url) {
                    urls.push(url[1]);
                }
            });
        }
        if (urls.length <= 0) return;
        wx.previewImage({
            urls: urls,
        });
    },

    resetSorollBar() {
        let selQuery = wx.createSelectorQuery();
        selQuery.select("#main-content").boundingClientRect(res => {
            console.log('res', res)
            this.setData({
                scrollTop: res.height
            })
        }).exec();

    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

这里是wxss/css

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
    height: 100vh;
    flex-basis: 0;
}

#top-header {
    background-color: #f8f8f8;
    color: #333;
}

#main-content {
    background-color: #fff;
    color: #333;
    flex: 1;
    overflow-y: scroll;
    position: relative;
}

#bottom-footer {
    background-color: #f8f8f8;
    color: #333;
}


.chat-body {
    display: flex;
    flex-direction: column;
    padding-top: 23rpx;
}

.chat-body .self {
    justify-content: flex-end;
}

.chat-body .item {
    display: flex;
    padding: 23rpx 30rpx;
}

.chat-body .item .content {
    position: relative;
    max-width: 486rpx;
    border-radius: 8rpx;
    white-space: normal;
    word-break: break-all;
    padding: 20rpx 20rpx;
    margin: 0 24rpx;
    border-radius: 5px;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 42rpx;
    overflow: inherit;
}

.chat-body .item .right-time {
    background-color: none;
    padding: 0 10rpx;
    font-size: 12px;
    color: #646566;
    float: right;
    text-align: right;
}

.chat-body .item .right {
    background-color: #C2DCFF;
    display: flex;
    justify-content: flex-end;
}

.chat-body .item .right::after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    left: 100%;
    top: 10px;
    border: 12rpx solid transparent;
    border-left: 12rpx solid #C2DCFF;
}

.chat-body .item .left-time {
    background-color: none;
    padding: 0 10rpx;
    font-size: 12px;
    color: #646566
}

.chat-body .item .left {
    background-color: #F7F8FA;
    width: auto;
}

.chat-body .item .left::after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    top: 10px;
    right: 100%;
    border: 12rpx solid transparent;
    border-right: 12rpx solid #F7F8FA;
}


.chat-body .item .avatar {
    display: flex;
    justify-content: center;
    width: 78rpx;
    height: 78rpx;
    background: #4F7DF5;
    border-radius: 8rpx;
    overflow: hidden;
    flex: 0 0 78rpx;
    margin-top: 10rpx;
}

.chat-body .item .avatar image {
    align-self: center;
}

qq_32385421
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序静态页面
01-27
微信小程序静态页面-源码
详解微信小程序实现仿微信聊天界面(各种细节处理)
12-01
本文介绍了微信小程序实现仿微信聊天界面，分享给大家，具体如下： 下面先来看看效果 为实现这样的效果，首先要解决两个问题： 1.点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题； 2.键盘弹出或收起时，聊天消息没有自动滚到最底部。 首先解决第二个问题，自动滚动到最底部，这很简单，这里提供三种方法（推荐第三种）： 1.计算每条消息的最大高度，设置scroll-top=(单条msg最大高度 * msg条数)px。 2.用 将展示msg的目标scroll-view包裹， 通过js获取到该view的实际高度： var that = this; var query = wx.cr
第二节：微信小程序静态页面开发初体验
心猿码意
01-14 2563
根据上一节了解到的小程序知识，尝试完成一个入门的demo项目，记录下过程，供日后参考。 第一个页面，打算做一个新闻信息展示的静态页面。 首先展示一下最后完成的效果： 页面很简单，分成三个部分：页面标题、中间的轮播图和下面的图文信息。 轮播图的实现，使用的是微信小程序swiper组件，其他地方都是用简单的css来控制样式。 下面是代码的目录结构： 因为和第一节完成的页面在一
探索Vant WeApp：打造高效优雅的小程序界面
最新发布
gitblog_00022的博客
03-25 468
探索Vant WeApp：打造高效优雅的小程序界面 项目地址:https://gitcode.com/vant-ui/vant-weapp Vant WeApp 是一个基于微信小程序开发框架的UI组件库，由有赞团队精心设计和维护，旨在提供一套简洁、易用且高度可定制的组件，帮助开发者快速构建高质量的小程序应用。 项目简介 Vant WeApp 传承了 Vant UI 的设计理念，专注于提升用户体验，...
微信小程序引入vant-weapp
01-03
选择位置新建项目，本文直接在桌面新建项目 1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --production  3 构建npm包 步骤二 构建 npm 包 打开微信开发者工具，点击 
微信小程序-主页面静态页面搭建
qq_36901488的博客
08-31 7022
新建一个文件夹来放项目 AppID 在你的微信公众平台==&amp;amp;amp;gt;设置==&amp;amp;amp;gt;开发设置中可以找到 点击确定后项目就建好了: 可以看到里面一开始只有一个文件,下面还报了个错误… 所以我们可以根据错误来先创建这个app.json文件,这个是全局配置 然后在里面写代码(写完代码后记得Ctrl+s保存) { &amp;amp;quot;pages&amp;amp;quot;:[ ] } 还要创
微信小程序之个人中心静态页面
weixin_44813417的博客
07-29 4377
知识点： flex布局 position定位 过滤 <!-- 个人信息 --> <view class="user_info_wrap"> <view class="user_img_wrap"> <image class="user_bg" src="{{userInfo.authUrl}}"></image> <view class="user_info"> <image class="us.
微信电商.zip微信小程序模板源码纯前端静态小程序源码导入就可显示
02-24
微信电商.zip微信小程序模板源码纯前端静态小程序源码导入就可显示微信电商.zip微信小程序模板源码纯前端静态小程序源码导入就可显示 1.学生做毕业设计用 2.程序员学习研究用 3.小公司换皮做新项目用微信电商.zip微信小程序模板源码纯前端静态小程序源码导入就可显示
vue+vant最简单的纯聊天界面
半盏茶. ོ
04-24 5655
一、这只是简单的聊天界面，用户可以发送，客户也可以回复，但这只是本地的，先来个效果图，配置好服务器改改就可以实现聊天了 二、js var infoData = [ { id:1, name:'小巴', time:'2021-4-23 17:59:50 星期五', images:'https://img01.yzcdn.cn/vant/cat.jpeg', message:'您好！' }, { id:3,
零基础微信小程序开发学习笔记（2.构建静态界面）
一路向前
06-22 1245
小白输出式学习微信小程序二。
vue+vant仿微信聊天画面做了个点击按钮出现土味情话的界面
m0_61084402的博客
04-06 5804
最近在学习框架vue，不得不说vue确实上手快，但用的vant组件库里找了老半天都没找到聊天框样式的组件，啧，实在想用，就自己搭了个，其实就这个气泡框的角花了点时间，用到了伪元素类。 效果图如下： 直接上代码 页面结构代码： <template> <div class="main"> <!-- 仿微信的聊天框 --> <!-- 顶部导航栏 -->...
vue3+vite+ts+vant制作移动端前端仿QQ聊天+表情发送（解决头像不生效的问题）
m0_67227361的博客
10-26 524
工作室的二手市场项目需要新加一个发起聊天功能，但是现在还没开始，我先做一个玩一下，所以做的比较简单，数据那些也都是自己随便写了一下，但是功能应该是到位了，数据的话到时候后端写好接口我再调就是了替换一下即可。
微信小程序npm引入vant-weapp的踩坑记录
10-16
主要给大家介绍了关于微信小程序npm引入vant-weapp的踩坑记录，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
微信小程序使用Vant Weapp组件库的方法步骤
10-16
主要给大家介绍了关于微信小程序使用Vant Weapp组件库的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
H5静态页面开发环境跳转小程序（微信浏览器，外部浏览器）
ren980316的博客
10-11 2454
网上有很多教程，但是具体的坑避不开，这里就以图文形式全流程介绍如何实现微信外环境静态h5跳转小程序。
【uni-app】uni-app实现聊天页面功能（小程序）——布局篇
热门推荐
hanachann的博客
04-11 1万+
在工作中使用uni-app参与开发一个小程序，其中要写一个简单的聊天页面，虽然功能不多（只有一个发送文字的功能），但是其中的细节比较多，也踩过很多坑，特此记录下来。要实现的页面如图所示，该篇主要讲讲如何布局（参考了很多文章之后根据页面需求进行一个整合）。
微信小程序 仿微信聊天界面
qq_36158551的博客
01-26 4415
当软键盘弹起时，将scroll-view的高度缩短至软键盘遮挡不到的屏幕上方部分，当软键盘收起时，再将scroll-view的高度还原，这样解决了遮挡问题。（3）（推荐）将所有msg都编号如：msg-0，msg-1，msg-2…（1）计算每条消息的最大高度，设置scroll-top=(单条msg最大高度 * msg条数)px。在scroll-view中添加：scroll-into-view=‘{{toView}}’，点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题。
让chatgpt编写一个微信小程序的对话页面,它是这么整的，我懵了
前端高薪进击手记
05-13 8857
使用腾讯的miniprogram tdesign UI库编写一个微信小程序的对话页面，要求消息在一侧，用户头像统一在左侧，每条消息底下有重用和复制按钮，点击可以把消息内容复制到粘贴板。消息输入框可以输入多行文字。复制功能使用了wx.setClipboardData方法来实现，将消息内容复制到粘贴板，并使用wx.showToast方法来提示用户复制成功。其中，messages是一个数组，存储了所有的消息，每个消息包括头像、内容等信息。用户可以点击重用按钮来重用消息，也可以点击复制按钮来复制消息内容到粘贴板。
vue项目仿企业微信移动端(带聊天界面)
qq_34761385的博客
06-05 1603
网上比较知名的网站或者软件，开源代码中都有仿其前端的。比如小米商城，京东商城，仿微信聊天页面诸如此类的。所以我潜意识觉得像那种知名公司或者软件。想找它的仿前端静态代码应该很好找。结果，当我想找仿企业微信移动端的前端静态代码时，竟发现没有。所以，这个短板这个空缺。我得弥补。
微信小程序按需引入vantweapp
06-10
您好，关于微信小程序按需引入vantweapp，您可以通过以下步骤实现： 1. 首先，在小程序的 app.json 中配置需要使用的组件，例如： ```json { "usingComponents": { "van-button": "/path/to/vant-weapp/button/index" } } ``` 其中，`van-button` 表示组件名，`/path/to/vant-weapp/button/index` 表示组件路径。 2. 在需要使用组件的页面或组件中，使用组件标签即可，例如在页面中使用 `van-button` 组件： ```html <van-button type="primary">按钮</van-button> ``` 3. 如果需要使用的组件较多，可以在小程序的 app.js 中全局引入并注册组件： ```javascript // app.js import { Button, Cell, Tabbar } from '/path/to/vant-weapp/dist/common/index'; App({ onLaunch() { // 注册组件 wx.lin = { Button, Cell, Tabbar } } }) ``` 这样，在页面中就可以直接使用 `wx.lin.Button` 等组件了。 希望这些信息能够帮到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值