微信小程序实战——消息通知界面

最新推荐文章于 2024-09-02 18:46:18 发布
最新推荐文章于 2024-09-02 18:46:18 发布
阅读量1.7w 收藏 213
点赞数 25
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_XUWENHAO/article/details/90580105
版权

先给大家上一个实战的效果图

 

这个是我们小组在开发的一个消息界面，用于实现简单的交流通信功能，只实现了简单的前端框架，下面献上代码供大家参考学习，若有不足，请多多指教。

wxml部分

<!--头部消息中心-->
<view class='title' style='height:{{navH}}px'  catchtouchmove='true'>
  <view class='title-text'>消息中心</view>
  <!-- 私信、通知切换栏 -->
<view class="selectTab" style='margin-top:{{navH}}px' catchtouchmove='true'>
  <view class="flex-row">
    <view class="message {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">
    私信
    <!--气泡提示-->
    <view class='bubble'>
      <view class='num'>3</view>
    </view>
    </view>
    <view class="notify {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">
    通知
    <!--气泡提示-->
    <view class='bubble2'>
      <view class='num'>21</view>
    </view>
    </view>
  </view>
  <view class='onTabLine' style="margin-left:{{175+currentTab*273}}rpx" catchtouchmove="ture"></view>
  <view class='line'></view>
</view>
</view>

<!--私信消息列表-->
<scroll-view scroll-y="true" class="message-list" style="margin-top:{{navH+47}}px;height:1200rpx"  wx:if="{{currentTab==0}}" >
  <!--示例用户1-->
  <view class='user' bindtap='goTocontactPage'>
  <image class='header-icon' src='/images/icon1.jpeg'></image>
  <view class='user-content'>
    <view class='firstline'>
      <view class='apart'>
      <view class='username'>
        <text>测试1</text>
      </view>
      <view class='cooperation'>
        <image src='./images/6.png'></image>
      </view>
      </view>
      <view class='time'>
        <view class='time-num'>9:36</view>
      </view>
    </view>
    <view class='secondline'>
      <view class='dialog'>
      <text>你想要怎么拍呢？</text>
      </view>
      <view class='dialog-nums'>
        <view class='bubble3'>
          <view class='num'>2</view>
        </view>
      </view>
    </view>
  </view>
  </view>
<!--分割线-->
<view class='linecut'></view>
  <!--示例用户2-->
  <view class='user' bindtap='goTocontactPage'>
  <image class='header-icon' src='https://b267.photo.store.qq.com/psb?/V13v0ZyH3zvYu7/9Ne*obpt0tAkfi3fZZij7.1VF4qT363gGq021zfYWQ0!/b/dAsBAAAAAAAA&bo=bgFuAQAAAAAFByQ!&rf=viewer_4'></image>
  <view class='user-content'>
    <view class='firstline'>
    <view class='apart'>
      <view class='username'>
        <text>测试2</text>
      </view>
      <view class='cooperation'>
        <!-- <image src='./images/6.png'></image> -->
      </view>
    </view>
      <view class='time'>
        <view class='time-num'>8:16</view>
      </view>
    </view>
    <view class='secondline'>
      <view class='dialog'>
      <text>约拍时间是这周六下午的两点钟</text>
      </view>
      <view class='dialog-nums'>
        <view class='bubble3'>
          <view class='num'>1</view>
        </view>
      </view>
    </view>
  </view>
  </view>
<!--分割线-->
<view class='linecut'></view>
</scroll-view>
<!--关注消息列表框-->
<scroll-view scroll-y class="notify-list" style="margin-top:{{navH+47}}px;height:1800rpx;"  wx:if="{{currentTab==1}}">
  <!--系统通知-->
  <view class='notify-type' bindtap='goToSystemPage'>
    <view class='notify-icon'>
      <image src='./images/tongzhi.png'></image>
    </view>
    <view class='notify-name'>
      系统通知
      <view class='notify-num'>
        <view class='nums'>11</view>
      </view>
    </view>
    <view class='right'>
      <!-- <image src=''></image> -->
    </view>
  </view>
  <view class='liner'></view>
  <!--点赞-->
  <view class='thumbs-up-type' bindtap='goToDianzanPage'>
    <view class='notify-icon'>
      <image src='./images/dianzan.png'></image>
    </view>
    <view class='thumbs-up-name'>
      点赞
      <view class='thumbs-up-num'>
        <view class='nums'>6</view>
      </view>
    </view>
    <view class='right'>
      <!-- <image src=''></image> -->
    </view>
  </view>
  <view class='liner'></view>
  <!--评论-->
    <view class='dialog-type' bindtap='goToCommentPage'>
    <view class='dialog-icon'>
      <image src='./images/dialog.png'></image>
    </view>
    <view class='dialog-name'>
      评论
      <view class='dialog-num'>
        <view class='nums'>2</view>
      </view>
    </view>
    <view class='right'>
      <!-- <image src=''></image> -->
    </view>
  </view>
  <view class='liner'></view>
<!--我关注的-->
  <view class='follow-type' bindtap='goToConcernPage'>
    <view class='follow-icon'>
      <image src='./images/guanzhu.png'></image>
    </view>
    <view class='follow-name'>
      我关注的
      <view class='follow-num'>
        <view class='nums'>1</view>
      </view>
    </view>
    <view class='right'>
      <!-- <image src=''></image> -->
    </view>
  </view>
  <view class='liner'></view>
<!--底部消息提示框-->
<view class="unread">
  <text>您有21条未读通知</text>
</view>
</scroll-view> 

<!--底部导航-->
<tabbar tabbar="{{tabbar}}"></tabbar>

wxss部分

/*头部标题*/
.title{
  width: 100%;
  /* overflow: hidden; */
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 999;
}
.title-text{
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;

  font-size: 40rpx;
  font-weight: 500;
}
/*私信、通知*/
.flex-row{
  flex-direction: row;
  display: flex;
}
.onTabLine{
  width: 120rpx;
  height: 5rpx;
  background-color:#4074DD;
  margin-top:15rpx;
}
.line{
  width: 750rpx;
  height: 2rpx;
  background-color: #F2F2F2;
  margin: 0rpx auto 0 auto;
}
.message,.notify{
  display: flex;
  flex-direction: row;
  font-size:36rpx;
  margin-top: 20rpx;
  width: 120rpx;
  color:#CDCDCD;

}
.message{
  margin-left: 200rpx;
}
.notify{
  margin-left: 150rpx;
}
.active{
  color:#4074DD;
}
.selectTab{
  position: fixed;
  background-color: #fff;
  z-index: 100;
}
/*气泡框样式*/
.bubble{
  background-color: #4074DD;
  border-radius: 50rpx;
  width: 30rpx;
  height: 30rpx;
  position: relative;
  left: 10rpx;
  bottom: 10rpx;
}
.bubble .num{
  font-size: 24rpx;
  color:#ffffff;
  margin-left: 8rpx;
  margin-top: -2rpx;
}
.bubble2{
  background-color: #4074DD;
  border-radius: 20rpx;
  width: 40rpx;
  height: 30rpx;
  position: relative;
  left: 10rpx;
  bottom: 10rpx;
}
.bubble2 .num{
  font-size: 24rpx;
  color:#ffffff;
  margin-left: 8rpx;
  margin-top: -2rpx;
}
/*私信消息*/
.message-list{
  /* background-color:#f2f2f2; */
  display: flex;
  flex-direction: column;
}
.user{
  display: flex;
  flex-direction: row;
}
.user-content{
  display: flex;
  flex-direction: column;
}
.header-icon{
  width: 104rpx;
  height: 104rpx;
  border-radius: 80rpx;
  margin-left: 20rpx;
  margin-top: 26rpx;
}
.firstline{
  display: flex;
  flex-direction: row;
}
.apart{
  margin-left: 20rpx;
  display: flex;
  flex-direction: row;
  width: 400rpx;
}
.username{
  font-size: 36rpx;
  margin-top: 26rpx;
  font-weight: 400;
}
.cooperation{
  width: 40rpx;
}
.cooperation image{
  width: 40rpx;
  height: 34rpx;
  margin-top: 34rpx;
  margin-left: 10rpx;
}
.time{

  display: flex;
  width: 60rpx;
  font-size: 24rpx;
  margin-top: 36rpx;
  color: #aeaeae;
  margin-left: 140rpx;
}
.time-num{
  /* margin-right: 200rpx; */
}
/*内容第二行*/
.secondline{
  display: flex;
  flex-direction: row;
}
/*对话框消息内容*/
.dialog{
  width: 545rpx;
  font-size: 28rpx;
  color: #aeaeae;
  margin-left: 20rpx;
  margin-top: 15rpx;
}
/*对话框提示数目*/
.dialog-nums{
  /* width: 100rpx; */
}
/*气泡样式*/
.bubble3{
  background-color: #4074DD;
  border-radius: 80rpx;
  width: 40rpx;
  height: 40rpx;
  /* margin-left: 200rpx; */
  margin-top: 20rpx;
}
.bubble3 .num{
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
  margin-left: 12rpx;
}
/*分割线*/
.linecut{
  width: 100%;
  height: 2rpx;
  background-color: #F2F2F2;
  margin-top: 26rpx;
}

/*通知界面*/
/*系统通知*/
.notify-type{
  display: flex;
  flex-direction: row;
}
.notify-icon{
  margin-left: 20rpx;
  margin-top: 20rpx;
}
.notify-icon image{
  width: 80rpx;
  height: 80rpx;
}
.notify-name{
  font-size: 36rpx;
  font-weight: 500;
  margin-top: 35rpx;
  margin-left: 36rpx;
}
.notify-num{
  width: 40rpx;
  height: 30rpx;
  background-color: red;
  border-radius: 40rpx;
  display: flex;
  flex-direction: row;
  position: relative;
  bottom: 60rpx;
  left: 150rpx;
}
.notify-num .nums{
  font-size: 24rpx;
  color: #fff;
  margin-left: 8rpx;
  margin-bottom: 6rpx;
}
/*最帅的分割线*/
.liner{
  width: 100%;
  height: 2rpx;
  background-color: #F2F2F2;
  margin-top: 20rpx;
}
/*点赞*/
.thumbs-up-type{
  display: flex;
  flex-direction: row;
}
.thumbs-up-icon{
  margin-left: 20rpx;
  margin-top: 20rpx;
}
.thumbs-up-icon image{
  width: 80rpx;
  height: 80rpx;
}
.thumbs-up-name{
  font-size: 36rpx;
  font-weight: 500;
  margin-top: 35rpx;
  margin-left: 36rpx;
}
.thumbs-up-num{
  width: 30rpx;
  height: 30rpx;
  background-color: #4074DD;
  border-radius: 40rpx;
  display: flex;
  flex-direction: row;
  position: relative;
  bottom: 60rpx;
  left: 80rpx;
}
.thumbs-up-num .nums{
  font-size: 24rpx;
  color: #fff;
  margin-left: 8rpx;
   margin-bottom: 6rpx;
}
/*评论*/
.dialog-type{
  display: flex;
  flex-direction: row;
}
.dialog-icon{
  margin-left: 30rpx;
  margin-top: 35rpx;
}
.dialog-icon image{
  width: 65rpx;
  height: 65rpx;
}
.dialog-name{
  font-size: 36rpx;
  font-weight: 500;
  margin-top: 35rpx;
  margin-left: 41rpx;
}
.dialog-num{
  width: 30rpx;
  height: 30rpx;
  background-color: #4074DD;
  border-radius: 40rpx;
  display: flex;
  flex-direction: row;
  position: relative;
  bottom: 60rpx;
  left: 80rpx;
}
.dialog-num .nums{
  font-size: 24rpx;
  color: #fff;
  margin-left: 8rpx;
   margin-bottom: 6rpx;
}
/*我关注的*/
.follow-type{
  display: flex;
  flex-direction: row;
}
.follow-icon{
  margin-left: 20rpx;
  margin-top: 20rpx;
}
.follow-icon image{
  width: 80rpx;
  height: 80rpx;
}
.follow-name{
  font-size: 36rpx;
  font-weight: 500;
  margin-top: 35rpx;
  margin-left: 36rpx;
}
.follow-num{
  width: 30rpx;
  height: 30rpx;
  background-color: #4074DD;
  border-radius: 40rpx;
  display: flex;
  flex-direction: row;
  position: relative;
  bottom: 60rpx;
  left: 150rpx;
}
.follow-num .nums{
  font-size: 24rpx;
  color: #fff;
  margin-left: 8rpx;
   margin-bottom: 6rpx;
}
/*未读消息框*/
.unread{
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #aeaeae;
  text-align: center;
}

其中部分bindtap有跳转函数，较为简单，此处就不一一列出，我们使用的是自定义头部标题，所以在使用前，须将app.js中的"navigationStyle"设置为"custom",

宇直豪
关注
专栏目录
微信小程序 # 仿写微信通讯录页面（字母侧栏效果）
skysys的研究小屋
05-28 1175
背景 受邀参与一个微信小程序（翻译类）的制作，在选择语言的时候，原本是直接粗暴的wx:for，为了优化使用体验，考虑加上字母栏 效果图 简化版JS （如果保证数据首字母都在A-Z里，js可以简化） process() { let langList = [],i = 0 // 分组 app.globalData.langList.forEach((item, index) => { let capital = pinyin.ChineseToPinYin(item
微信小程序实战篇-个人中心
03-29
哈喽，大家好，又到周五啦，有木有期待今天的更新呀~今天要教大家的是制作个人中心界面，先上效果图 (此图片来源于网络，如有侵权，请联系删除! ) 个人中心制作 1. mine.js // pages/mine/mine.js var app = getApp() Page({ data: { userInfo: {}, motto: 'Hello World', // orderItems orderItems: [ { typeId: 0, name: '待付款', url: 'bill',
微信小程序－－－－－消息模版（最全解释）
热门推荐
woqianduo的博客
07-06 4万+
最近小程序在码界里嫌弃腥风血雨，每一个码奴都感觉世界给自己又多开一个扇窗，本菜鸟也眼红不已，就尝试着写了一个小程序，今天跟大家分享一下自己在写消息模版时候遇到的坑，希望能帮助每一位路过踩坑的道友； 1.写小程序消息模版第一步：配置消息推送 2.消息模板 3.发送模板消息 1.写小程序消息模版第一步：配置消息推送 1.1 登录微信公众平台，选择左侧侧边栏＝＝&amp;gt;设置＝...
随手记：微信小程序消息通知/消息推送（前端版）
最新发布
weixin_63515766的博客
09-02 1486
微信小程序消息通知/消息推送（前端版）
微信聊天小程序——（四、聊天页面）
qq_54462755的博客
08-04 1万+
我们拿到了与好友聊天的聊天记录。主要作用的是这个函数。具体效果：不显示错误。在massage页面。
微信小程序——消息页面通信（消息的发布与订阅）
qq_43201350的博客
01-21 1234
消息页面通信 绑定事件 事件名 事件的回调 订阅方: PubSub.subscribe(事件名，事件的回调) 订阅方式接受数据的一方 触发事件 事件名 提供事件参数对象， 等同于原生事件的event对象 发布方: PubSub.publish(事件名，提供的数据) 发布方是提供数据的一方 案例 页面1 demo() { let musicId = 123 // 发布消息 PubSub.publish('musicId', musicId) // 事件名，提供的数据 } 页面2 dem.
写个小程序QQMessage 熟悉一下界面控件的使用
::: 移动互联网时代开发者 :::
01-03 1983
      首先，代表我个人祝所有看到此日志的朋友新年快乐！！      写了个QQMessage程序。没有什么技术难度，写这个完全是为了学习一下新下载的两个.NET界面控件的使用。感觉还不错，做出来的界面比较漂亮。      本程序利用腾讯提供的网络接口，可以给不在自己QQ好友里的任何人发送QQ消息。在用本程序的时候，您必须先登陆自己的QQ。如果该QQ号码在线,则可以立即收到消息，并可以回复您的
微信小程序中通知界面发生变化
weixin_46002223的博客
09-27 588
1.调用this.setData方法 接收的是对象的参数 2.它直接赋值区别在于setData可以通知界面发生变化 3.直接赋值没有办法实现这一点 页面 <!--index.wxml--> <view class="container"> <input value="{{message}}" bindinput="inputHandle"></input> <text>{{message}}</text> </view>
仿写 微信 界面
09-25
网上找的的一份源码，基本实现了微信的所有界面，对于Dialog，动画等UI元素的使用都有很好的借鉴意义。
微信小程序之实时聊天系统——页面介绍
小淼淼的博客
12-23 4241
小程序之实时聊天系统——详解（整套）
微信小程序项目实例——今日美食
05-24
【微信小程序项目实例——今日美食】是一个以移动开发技术为核心，专注于美食分享的应用。这个小程序旨在为用户带来丰富的美食制作教程，提供详细的食材配料和步骤指导，让用户在家中也能轻松制作出美味佳肴。 首先...
详解微信小程序实现仿微信聊天界面(各种细节处理)
12-01
本文介绍了微信小程序实现仿微信聊天界面，分享给大家，具体如下： 下面先来看看效果 为实现这样的效果，首先要解决两个问题： 1.点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题； 2.键盘弹出或收起时，聊天消息没有自动滚到最底部。 首先解决第二个问题，自动滚动到最底部，这很简单，这里提供三种方法（推荐第三种）： 1.计算每条消息的最大高度，设置scroll-top=(单条msg最大高度 * msg条数)px。 2.用 将展示msg的目标scroll-view包裹， 通过js获取到该view的实际高度： var that = this; var query = wx.cr
微信小程序模仿微信聊天界面布局demo简单源码学习开发
06-14
仿造微信界面仅供参考学习仿微信聊天界面demo采用css+div技术
微信小程序点餐系统微信小程序开发实战
06-07
微信小程序点餐系统是当前移动互联网时代餐饮业中常见的技术应用，它利用微信小程序平台，为用户提供便捷的在线点餐服务。本项目实战教程将深入探讨如何开发这样一个系统，涵盖从设计、编码到上线的全过程。 一、...
微信小程序实战——校园导览 0x1 校园简介
cell的博客
04-03 4071
编辑校园简介页面 轮播图 新建resource文件夹=》新建images文件夹=》将要轮播的图片放在该目录下 页面 <!--introduction.wxml--> <view class="intro"> <swiper class="top" indicator-dots="{{indicatorDots}}" autoplay="{{autop...
微信小程序之登录页实例 —— 微信小程序实战系列（5）
2401_84148974的博客
04-20 538
看到这篇文章的人不知道有多少是和我一样的Android程序员。35岁，这是我们这个行业普遍的失业高发阶段，这种情况下如果还不提升自己的技能，进阶发展，我想，很可能就是本行业的职业生涯的终点了。我们要有危机意识，切莫等到一切都成定局时才开始追悔莫及。只要有规划的，有系统地学习，进阶提升自己并不难，给自己多充一点电，你才能走的更远。千里之行始于足下。这是上小学时，那种一元钱一个的日记本上每一页下面都印刷有的一句话，当时只觉得这句话很短，后来渐渐长大才慢慢明白这句话的真正的含义。
微信小程序 模板消息
melon__的博客
10-23 1847
微信程序模板消息：在用户服务通知里以微信消息的方式推送给用户。 最后效果如下： ​ 第一步：进入微信公众平台，添加模板消息 可以在模板库中选择已有的模板消息 点击选用后，进入模板消息配置页面，对于选用的模板，可以配置提交的关键词种类和顺序，如本文示例，选择了资源类型、资源概要、发布状态及发布时间。不能修改模板消息的标题，如果需要不同的消息标题，需自行申请，申请通过后亦可使用。（我申...
微信小程序--云开发仿QQ动态发布（发布内容、图片）
海到无边天作岸 山登绝顶我为峰
11-17 7204
前言 微信小程序的云开发非常适合初级开发者，特别是对传统后端不是了解的开发者非常友好，我们只需要根据开发文档查找对于的函数即可（当然，微信开发文档坑是非常的多啊，一定要小心！） 下面就用云开发做一个类似QQ发布动态的demo吧！ 该博客解决的问题： 云开发上传多张图片 上传内容 对回车键进行转换 显示回车 图片预览 demo 先上效果图（图一：发布界面 图二：动态界面） 代码详解 步...
测试改名-为什么小程序基本都没有消息中心模块？
qawa112的博客
06-22 230
其实不是绝对的，有些小程序也会有消息中心模块。 个人感觉是从使用场景出发。一般小程序的使用场景更加碎片化，选择小程序作为载体的原因是在于想实现的这个功能不会吸引用户下载额外的APP。 这种情况下，整个业务流程是非常轻量化的， 比如典型的就是：预约购票。 用户在景区门口，扫码进小程序，然后预约、买票、支付，支付完获取个二维码，进景区。 整个使用场景就结束了，后续用户再次打开小程序查看消息的可能性微乎其微，而且由于微信对小程序入口的设计，通常来说，你3天前用过的小程序，你想再找到他通常不是通过微信
微信小程序之消息通知页面
05-14
微信小程序中，消息通知页面一般用于展示用户接收到的系统通知、提醒和消息等。该页面的开发需要考虑以下几个方面： 1. 数据源：开发者需要根据实际需求，从后端或者其他数据接口中获取通知、提醒和消息等数据。 2. 页面UI设计：根据需求设计消息通知页面的UI界面，包括头部、底部、列表展示等。 3. 数据渲染：将获取到的数据渲染到页面上，可以使用小程序提供的列表组件或者自定义组件进行展示。 4. 进入详情页：用户点击某个通知或消息后，需要跳转到对应的详情页，开发者需要在页面中设置跳转逻辑。 5. 消息已读标记：用户阅读过的消息需要进行标记，开发者需要在页面中设置已读标记逻辑。 6. 下拉刷新：页面中需要支持下拉刷新功能，方便用户及时获取最新的消息。 以上是消息通知页面的主要开发内容，根据具体需求可能会有所不同。
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值