search
HomeWeb Front-endJS TutorialImplement the chat function of WeChat UI
Implement the chat function of WeChat UIMar 19, 2018 pm 04:38 PM
Functionaccomplishchat

This time I will bring you the implementation of the chat function of WeChat UI. What are the precautions for implementing the chat function of WeChat UI. The following is a practical case, let’s take a look.

WeChat mini programs are very popular recently. To the extent that they are popular, as soon as you open WeChat, you will see it. You can find a copy of it in almost every APP you use. In addition, it is officiImplement the chat function of WeChat UIy included. The jump pushed it to an unprecedented high position. Comparing the official account, as far as I feel, there are the following differences:

  • The official account is a bit cumbersome: I have to follow it first to see the content, while the mini program does not (personImplement the chat function of WeChat UIy, I have to pay attention to WeChat The public account is not well researched, so I apologize for any mistakes)

  • The performance of the mini program is better: although I don’t know exactly what the mini program is used to implement, the experience is indeed closer to the native one A little; but the WeChat official account displays content in the form of web pages. I don’t need to explain the compatibility and performance issues. You luers already know it.

  • Mini programs are easier to develop : The mini program has released a new set of code rules and also provides a series of components. Compared with the public account Bai Jia contending, the form is indeed much more unified

Having said so much nonsense, I I have only recently begun to look at the implementation of mini programs. I have experienced it and it is indeed quite enjoyable. The following is a summary of my personal development:

Simple official website mini program

There is a mini program on the official website of WeChat Simple smImplement the chat function of WeChat UI demo, the address is here: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html, follow its steps, you can definitely run one and the official one The same example comes out, so I won’t post the process here. Mainly talk about my overImplement the chat function of WeChat UI personal feelings:

  • js is still the original js, css is still the original css, in terms of html, some things have been changed, for example: p becomes view, Text has become text, and img has become image, but the soup remains the same, how to use it is still the same, and the semantics are clearer.

  • Added configuration file .json, there is a global app.json, which is the global configuration, such as The configuration of the navigation bar, TAB, global routing configuration, etc. can still be globImplement the chat function of WeChat UIy covered in each page. For example, list.json separately stipulates what the list page looks like.

  • Each page has a life cycle (including startup page), similar to the declaration cycle of react/vue, which is more clear What can be done at this stage?

  • The code is componentized, and many encapsulated components can be simply referenced, such as map. When developing on the WeChat official account, you You may also need to write a dedicated map plug-in

  • The API is more user-friendly. Although I have not developed many public accounts, as far as the jssdk configured before is concerned, it feels more complicated than a smImplement the chat function of WeChat UI program. The mini program only needs an appId, and then use the wx object directly in the code to cImplement the chat function of WeChat UI various APIs

to develop a simple chat program similar to WeChat UI

I was just interested and made a case. The functions may be just a drop in the bucket, but I feel it is necessary to record it and talk about the problems I encountered and the solutions. The overImplement the chat function of WeChat UI interface is as follows:

Implement the chat function of WeChat UI

First, write the page route in app.json, as follows:

{
  "pages":[        
    "pages/index/index",
    "pages/list/list",
    "pages/chat/chat"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"#fff"
  }}

There are 3 pages here, and a button is placed on the homepage as the entrance. The list page represents the chat history, and there is also a chat page.

There is nothing to say about the list page. Setting the title of the list page can be set in list.json, as follows:

// list.json{
  "navigationBarTitleText": "聊天列表"}

The list page simulates some data , and then when you click on each item, you will enter a single chat page, where you need to transfer some of the currently clicked information to the next page, where there is only the name.

//chat.js//获取应用实例const app = getApp()const friends = require('./list-mock-data.js')Page({
  data: {
    friends: friends.list
  },
  gotoChat(event) {
    const currentUser = event.currentTarget.dataset.user;
    wx.navigateTo({
      url: '../chat/chat?nickname=' + currentUser.nickname
    })  }})

Then enter the chat page. First, what I think about when entering the chat page is whether each bubble and its avatar can be made into a component, because there is only a distinction between left and right. In addition, if time is added , and then just pass the time.

So chat.wxml was originImplement the chat function of WeChat UIy planned like this:

<block>
  <template></template></block>

template中的代码就不展示了,最开始我写模板的时候,是开了一个codePen,然后模拟写出来之后,再往模板中套,保证基本的样子差不多,然后再在模板上进行细微的改动就可以了。

聊天页顶部的标题是通过列表页中传过来的,在页面加载完成的时候,设置就好了:

// chat.js// 设置昵称setNickName(option) {
    const nickname = option.nickname || 'Marry';
    wx.setNavigationBarTitle({
      title: nickname    });
  },

最开始的样子就是这样子的:

Implement the chat function of WeChat UI

至此,基本的页面形态就已经完成了。

遇到的一些问题:

  • 每次进入页面的时候,即使聊天内容已经超过了聊天区域,都会显示为最开始的地方

  • 输入新的聊天记录的时候,如果聊天内容不是处于最底部,那么新加的内容会看不到

针对这两个问题,我按照自己最初的想法是:进入页面获取scrollHieght然后计算scrollTop值,将其滚动就好了,至于第二个问题按照类似的方法就可以解决了,但是我查看小程序的API之后,并没有发现如何计算scrollHeight的方法。只有类似的API,如:boundingClientRectscrollTop

好在天无绝人之路,看到了scroll-view中的scroll-into-view属性,于是就想出了解决上面两个问题的方法:

  • 进入页面,获取历史纪录,获取最后一条消息的ID值,记为lastId,在渲染的时候,消息列表中的每个ID值传入组件,作为每个消息记录的唯一标识,然后使用scroll-in-view={{ id }}就可以轻松地使最后一条消息进入视野当中

  • 在聊天的时候,新加的记录会更新这个lastId值,这样就自动更新视图了

// chat.wxml<scroll-view>
    <block>
      <template></template>    </block>
  </scroll-view>// chat.jsPage({  data: {    messages: [],         // 聊天记录    msg: '',              // 当前输入    lastId: ''            // 最后一条消息的ID    // ...  },  // ...  send() {    // ...    const data = {      id: `msg${++nums}`,      message: msg,      messageType: 0,      url: '../../images/5.png'
    };
    this.setData({ msg: '', lastId: data.id });
  }
});

这样就可以大致实现类似于聊天的效果了,但是还有一个小问题,每次从列表中进入单个聊天页面的时候,会有一个斜向左上方滑动的过程,原因是:页面的转场动画是向左的,但是自动滚动到最后一条记录的动作是向上的,所以会有动作叠加,既然这样,我只需要让滚动的过程延迟一段时间就好

// 延迟页面向顶部滑动
  delayPageScroll() {
    const messages = this.data.messages;
    const length = messages.length;
    const lastId = messages[length - 1].id;
    setTimeout(() => {
      this.setData({ lastId });
    }, 300);
  },

至此问题就算是解决了,在真机模拟的时候,IOS还有一个问题,就是当点击输入框的时候,整体页面会向上顶起来,这个问题我在论坛中也有看到,但是没有找到解决办法,如果各位有遇到,还望不吝赐教。

扩展延伸

如果是一个真正的聊天程序应该怎么做呢?我的设想是这样的:

Implement the chat function of WeChat UI-one

由于当时自己的机器由于莫名的原因不能够进行登录,后来采用了本地开了一个websocket的服务器来实现消息的发送。服务器代码相当简单,只是消息的转发而已

// server.jsconst WebSocket = require('ws');const wss = new WebSocket.Server({ port: 12112 });wss.on('connection', ws => {
  console.log('connection established');
  ws.on('message', message => {
    console.log("on message coming");
    ws.send(message);
  });});

chat.js中需模拟历史消息的发送以及新加消息的发送,因此代码整体看起来是这样的:

//chat.js//获取应用实例const app = getApp()const msgs = require('./chat-mock-data.js');Page({
  data: {
    messages: [],         // 聊天记录
    msg: '',              // 当前输入
    scrollTop: 0,         // 页面的滚动值
    socketOpen: false,    // websocket是否打开
    lastId: '',           // 最后一条消息的ID
    isFirstSend: true     // 是否第一次发送消息(区分历史和新加)
  },
  onLoad(option) {
    // 设置标题
    this.setNickName(option);
  },
  //事件处理函数
  onReady() {
    // 连接websocket服务器
    this.connect();
  },
  onUnload() {
    const socketOpen = this.data.socketOpen;
    if (socketOpen) {
      wx.closeSocket({});
      wx.onSocketClose(res => {
        console.log('WebSocket 已关闭!')      });
    }
  },
  connect() {
    wx.connectSocket({
      url: 'ws://localhost:12112'
    });
    wx.onSocketOpen(res => {
      this.setData({ socketOpen: true });
      // 模拟历史消息的发送
      wx.sendSocketMessage({
        data: JSON.stringify(msgs),
      })    });
    wx.onSocketMessage(res => {
      const isFirstSend = this.data.isFirstSend;
      const data = JSON.parse(res.data);
      let messages = this.data.messages;
      let lastId = '';
      
      // 第一次为接收历史消息,
      // 之后的为新加的消息
      if (isFirstSend) {
        messages = messages.concat(data);
        lastId = messages[0].id;
        this.setData({ messages, lastId, isFirstSend: false });
        // 延迟页面向顶部滑动
        this.delayPageScroll();
      } else {
        messages.push(data);
        const length = messages.length;
        lastId = messages[length - 1].id;
        this.setData({ messages, lastId });
      }
    });
    wx.onSocketError(res => {
      console.log(res);
      console.log('WebSocket连接打开失败,请检查!')    })  },
  // 设置昵称
  setNickName(option) {
    const nickname = option.nickname || 'Marry';
    wx.setNavigationBarTitle({
      title: nickname    });
  },
  // 延迟页面向顶部滑动
  delayPageScroll() {
    const messages = this.data.messages;
    const length = messages.length;
    const lastId = messages[length - 1].id;
    setTimeout(() => {
      this.setData({ lastId });
    }, 300);
  },
  // 输入
  onInput(event) {
    const value = event.detail.value;
    this.setData({ msg: value });
  },
  // 聚焦
  onFocus() {
    this.setData({ scrollTop: 9999999 });
  },
  // 发送消息
  send() {
    const socketOpen = this.data.socketOpen;
    let messages = this.data.messages;
    let nums = messages.length;
    let msg = this.data.msg;
    if (msg === '') {
      return false;
    }
    const data = {
      id: `msg${++nums}`,
      message: msg,
      messageType: 0,
      url: '../../images/5.png'
    };
    this.setData({ msg: '' });
    
    if (socketOpen) {
      wx.sendSocketMessage({
        data: JSON.stringify(data)      })    }
  }})

整体来说,自己的思路就像是上面的代码所描述的,这个只是初步的构想,还有很多东西需要完善:

  • 头像

  • 列表页和聊天页新消息的处理

  • 数据库的历史消息存储

  • 图片以及语音的发送

  • 消息本地化存储

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Vue指令的使用

JS闭包的使用

The above is the detailed content of Implement the chat function of WeChat UI. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
使用JavaScript实现自动登录功能使用JavaScript实现自动登录功能Jun 15, 2023 pm 11:52 PM

随着互联网的发展,人们越来越依赖网络,大部分时间都在使用各种各样的网站和应用程序,这也使得我们需要记住很多账号和密码。为了方便用户的使用,很多网站提供了自动登录功能,让用户免除频繁输入账号和密码的烦恼。本文将介绍使用JavaScript实现自动登录功能的方法。一、登录流程分析在开始实现自动登录功能之前,我们需要了解整个登录流程。一般情况下,一个网站的登录流程

如何使用PHP实现天气预报功能如何使用PHP实现天气预报功能Jun 27, 2023 pm 05:54 PM

PHP作为一款流行的后端编程语言,在Web开发领域广受欢迎。天气预报功能是一种常见的Web应用场景,基于PHP实现天气预报功能相对简单易懂。本文将介绍如何使用PHP实现天气预报功能。一、获取天气数据API要实现天气预报功能,首先需要获取天气数据。我们可以使用第三方天气API来获取实时、准确的天气数据。目前,国内主流的天气API供应商包括免费的“心知天气”和收

如何使用 Windows Copilot 与剪贴板一起展开、解释、总结或修改复制的文本如何使用 Windows Copilot 与剪贴板一起展开、解释、总结或修改复制的文本Jul 29, 2023 am 08:41 AM

在Copilot目前在Windows11上拥有的少数功能中,也许最有用的功能是允许您交互和调整已复制到剪贴板的文本的功能。这使得将Copilot用作文本编辑和摘要工具变得容易,您可以直接从桌面使用。以下是您需要了解的有关使用Copilot在Windows上解释、修订、扩展和汇总文本的所有信息。如何在WindowsCopilot中使用复制的文本Copilot的预览版让我们第一次很好地了解了Windows对原生AI支持的集成。修改或扩展从其他地方复制的文本的早期功能之一可以通过内容创建、摘要、修订和

未来功能抢先用 Safari 技术预览 173 版本释出未来功能抢先用 Safari 技术预览 173 版本释出Jul 02, 2023 pm 01:37 PM

Apple今日释出了Safari技术预览173版本,涵盖部分可能于Safari17推出的功能。该版本适用于macOSSonoma测试版以及macOSVentura系统,有兴趣的用户可于官方网页下载。Safari技术预览173版于设定中新增了功能标志区块,取代原先开发菜单的实验功能。该区块可让开发者快速地搜索特定功能,并以不同形式将「稳定」、「可供测试」、「预览」或「开发人员」等状态标示出来。重新设计的开发菜单可以帮助创作者更容易找到关键工具,以便建立网页、网页应用程序、其他应用程序中的网页内容、

如何在iPhone上扫描QR码如何在iPhone上扫描QR码Jul 20, 2023 am 09:13 AM

Apple在设备中内置了这个方便的功能,可以从iPhone上的相机轻松访问它,这将允许您自动扫描设备上的QR码。二维码代表快速响应码,本质上是一种二维条形码,可以通过配备内置摄像头的各种智能手机和其他电子设备轻松扫描和解释。扫描二维码后,用户通常会被定向到特定网站或提示激活应用程序中的特定功能。这种令人难以置信的方便功能在现代智能手机(包括Apple的iPhone)中变得越来越普遍,它是用户以最小的努力访问信息,服务或功能的便捷方式。许多公司在实体产品上使用此功能,您可以扫描其产品上的二维码,然

鸿蒙OS3.0的功能有什么?鸿蒙OS3.0的功能有什么?Jun 29, 2023 pm 10:53 PM

鸿蒙os3.0目前正在测试阶段,很快用户就将迎来新的系统体验了,那么相较于2.0版本,鸿蒙os3.0有什么功能呢?华为鸿蒙3.0包含了多屏协同、性能共享等功能,用户可以获得更加完善的协同体验,同时也能提升手机运行大型游戏或软件的流畅度。另外,它简化了小窗交互方式,并改进通知栏,带给你更为完美的体验,接下来就让小编给大家分析一下华为鸿蒙3.0新功能介绍,一起来了解一下吧。华为鸿蒙3.0功能介绍1、多屏协同:此前鸿蒙2.0可以在电脑手机之间互相切换使用,提高了用户的工作效率和使用体验,但此次的鸿蒙3

Google Colab将很快使用Codey进行AI编码Google Colab将很快使用Codey进行AI编码Jun 09, 2023 am 10:43 AM

GoogleColab是一个自2017年以来一直在促进Python编程的平台,它将利用Google的高级代码模型Codey引入AI编码功能。Codey基于PaLM2模型构建,对来自外部来源的大型高质量代码数据集进行了精心微调,以提高其在编码任务方面的性能。Colab即将推出的功能包括代码补全、自然语言到代码生成以及代码辅助聊天机器人。最初的重点将放在代码生成上,该功能旨在使用户能够生成更大的代码块并从注释或提示编写整个函数。这旨在减少编写重复代码的需求,允许用户专注于编程和数据科学的更复杂的方面

win10电脑系统纯版和专业版有什么区别win10电脑系统纯版和专业版有什么区别Jul 19, 2023 am 11:01 AM

win10系统是目前主流的操作系统,也是微软最新的产品,版本很多。其中有网友纠结不知道选择win10纯版还是win10专业版,win10电脑系统纯版和专业版有什么区别。以下小系列将告诉你win10电脑系统纯版和专业版的区别。win10纯版:Win10纯版是网上第三方系统爱好者,在微软原版系统的基础上删除一些自带广告封装的系统。没有多余的软件捆绑,但稳定性可能没有正式版和专业版那么强。最重要的是win10纯版可以在网上下载安装,由民间专家优化,完全免费,功能和专业版没有太大区别。win10专业版:

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.