山东大学项目实训——地图圈系统——微信小程序（16）

最新推荐文章于 2021-06-01 22:18:48 发布

SDUer～

最新推荐文章于 2021-06-01 22:18:48 发布

阅读量196

点赞数

本文链接：https://blog.csdn.net/weixin_44181723/article/details/117262446

版权

项目实训专栏收录该内容

26 篇文章 6 订阅

订阅专栏

地图圈系统——微信小程序（16）

一、社区功能

这次项目实训的社区功能是一个很大的模块，包括显示用户发布的文字及图片、用户选择的地点、发布的时间、点赞、评论等，还包括使用者对不同动态的点赞以及评论。是一个花时间比较多的功能，其中需要的接口有很多：

获取用户动态。
获取各个动态的点赞情况。
获取各个动态的评论情况。
获取文件名对应文件。
对动态的点赞。
对动态点赞的取消。
对动态的评论。

获取到数据需要对数据进行处理显示，也是本功能比较繁琐的一个环节。

有一点是微信小程序跟app端的头像url不同，微信小程序所获得的头像就是能在网页中显示的url，而app端获得的头像则是文件名，所以我们在数据库中增加字段用来区分是否是微信小程序发布的，从而将处理头像图片变得容易。

为了保证使用的同步性，还在此页面增加了下拉刷新的功能，可以刷新到发布但没有看到的动态信息。需要在json文件中导入以下代码：

"enablePullDownRefresh": true

然后在js文件中添加刷新后的逻辑代码即可。

二、项目代码

navigation.wxml文件：

<!--pages/navigation/navigation.wxml-->
<navBar title-text="社区" background="#f2f2f2" bindback="back" />
<view wx-if="{{showcontent}}">

  <view>
    <image class="head_img11" src="../../src/images/cc.jpg" mode="aspectFill"></image>
    <image class="ffabu11" src="../../src/images/fabu.png" mode="aspectFit" bindtap="clickfabu"></image>
  </view>
  <view>
    <image class="touxiang" src="{{src}}" mode="aspectFit"></image>
    <view class="name">{{nickname}}</view>
  </view>
  <view style="height:80rpx;"></view>
  <view>
    <!-- 仿微信朋友圈 -->
    <scroll-view class='page'>
      <!-- 列表 -->
      <view class='CircleList' wx:for='{{datasource}}' wx:for-index="index">
        <!-- 头像、昵称、内容 -->
        <view class='body-view'>
          <!-- 头像 -->
          <view class='left-view' bindtap="otherUser"  data-url="{{head_list[index]}}" data-name="{{item.username}}"> 
            <image class='user-icon' src='{{head_list[index]}}'></image>
          </view>
          <view class='right-view'>
            <!-- 昵称 -->
            <view class='user-name-view'>
              <label class='user-name'>{{item.username}}</label>
            </view>
            <!-- 内容 -->
            <view class='user-content-view'>
              <text class='user-content'>{{item.content}}</text>
            </view>
            <!-- 图片 -->
            <view class='photo-view ' >
              <view class='photo' wx:for='{{image_list[index]}}' wx:for-item="item2"
                style='width:{{photoWidth}}px;height:{{photoWidth}}px'>
                <image bindtap='LookPhoto'  data-photUrl='{{item2}}' src='{{item2}}'
                  style='width:{{photoWidth}}px;height:{{photoWidth}}px'></image>
              </view>
            </view>
            <!-- 地理位置 -->
            <view class='user-address-view'>

              <label>{{item.location}}</label>
            </view>

            <!-- 时间、删除按钮、点赞评论按钮 -->
            <view class='TDD-view'>
              <label>{{item.time}}</label>
              <!-- <button bindtap='delete' data-index="{{index}}" wx-if="{{item.username==nickname?true:false}}">删除</button> -->
              <!-- <image wx-if="{{!count_like[index]}}" class="TDD1" src="../../src/images/no_like.png" bindtap="clicklike" data-index="{{index}}"></image>
              <image wx-if="{{count_like[index]}}" class="TDD1" src="../../src/images/like.png" bindtap="clicklike" data-index="{{index}}"></image>
                
              <image data-isShow='{{isShow}}'class="TDD2"  bindtap="showInput" 
              data-index="{{index}}" src='../../src/images/wxdiscuss.png'></image> -->
            </view>
            <view class='TDD-view'>
              <!-- <label>{{item.time}}</label> -->
              <!-- <button bindtap='delete' data-index="{{index}}" wx-if="{{item.username==nickname?true:false}}">删除</button> -->
              <image wx-if="{{!if_zan[index]}}" class="TDD1" src="../../src/images/zan.png" bindtap="clicklike"
                data-index="{{index}}"></image>
              <image wx-if="{{if_zan[index]}}" class="TDD1" src="../../src/images/zan2.png" bindtap="clicklike"
                data-index="{{index}}"></image>

              <image data-isShow='{{isShow}}' class="TDD2" bindtap="showInput" data-index="{{index}}"
                src='../../src/images/wxdiscuss.png'></image>
            </view>

            <!-- 点赞 -->
            <view class='zan-view'>
              <!-- <view class='trigon-view'>
              <image mode='aspectFill' class='trigon' src='/images/trigon.png'></image>
            </view> -->

              <!-- 点赞 -->
              <view class='zan-bg-view'>
                <view class='zan-user-view' wx:for='{{count_like[index]}}'>
                  <label bindtap='TouchZanUser' data-name='{{item}}' class='zan-user'>{{item}},</label>

                </view>
                <label bindtap='TouchZanUser' data-name='{{item}}'
                  class='zan-user2'>{{count_like[index].length}}人觉得很赞</label>
              </view>
              <view class='line'></view>
              <!-- 评论 -->
              <view class='discuss-view'>
                <view class="cu-list menu-avatar comment solids-top">
                  <!-- <view class='discuss' wx:for='{{comment_list[index].commentList}}'>
                <label bindtap='TouchZanUser' data-name='{{item.username}}' class='discuss-user'>{{item.username}}：</label>
                <label class='content'>{{item.content}}</label>
                <label class='content2'>{{item.time}}</label>
              </view> -->
                  <view class="cu-item"  wx:for='{{comment_list[index].commentList}}'>
                    <view class="cu-avatar round" wx:if='{{item.if_wx==0}}'
                      style="background-image:url(http://8.140.117.15:8800/user/getimage/{{item.head_img}});">
                    </view>
                    <view class="cu-avatar round" wx:if='{{item.if_wx==1}}'
                      style="background-image:url({{item.head_img}});">
                    </view>
                    <view class="content">
                      <view class="text-blue">{{item.username}}</view>
                      <view class="text-black text-content text-df">
                        {{item.content}}
                      </view>
                      
                      <view class="margin-top-sm flex justify-between">
                        <view class="text-gray text-df">{{item.time}}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>
    </scroll-view>

    <!-- 评论按钮弹出框 -->
    <!-- <view animation="{{animation}}" class='pop-up-box' style='top:{{popTop}}px;width: {{popWidth}}px;'> -->

    <!-- </view> -->
  </view>
</view>
<view class="input-section" wx:if="{{showInput}}">
  <view class="cu-avatar round" style="background-image:url({{src}});"></view>
  <input class='input_input' value="{{inputMessage}}" focus="auto" placeholder="请输入内容" bindinput='bindInputMsg'
    bindblur="onHideInput" confirm-type="send" bindconfirm="sendTextMsg" />
  <view style="height:110rpx;width:170rpx;display:flex; align-items: center;justify-content: center;">
    <view class="send_btn">
      <view class="cu-btn bg-green shadow-blur" bindtap="send">发送</view>
    </view>
  </view>
</view>
<!-- <view class="cu-bar input" wx:if="{{showInput}}">
    <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
    <view class="action">
      <text class="cuIcon-roundaddfill text-grey"></text>
    </view>
    <input value="{{inputMessage}}" class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
    <view class="action">
      <text class="cuIcon-emojifill text-grey"></text>
    </view>
    <button class="cu-btn bg-green shadow-blur">发送</button>
  </view> -->

navigation.wxss文件：

/* pages/navigation/navigation.wxss */
@import "../../colorui/main.wxss";
@import "../../colorui/icon.wxss";
.page{
  width: 100%;
  overflow-x: hidden
}

.ffabu11{
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  top: 180rpx;
  right: 40rpx;
}

.head_img11{
  /* height: 50%; */
  width: 100%;
  height: 500rpx;
}
.touxiang{
  width: 20%;
  position: absolute;
  top: 333rpx;
  right: 50rpx;
  border-radius: 10rpx;
}
.name{
  position: absolute;
  top: 588rpx;
  right: 220rpx;
  color: #fff;
  font-weight: bold;
  font-size: 35rpx;
}

/* 列表 */
.CircleList{
  background: white;
  margin-bottom: 1px;
  border-bottom: 1px solid whitesmoke;
  border-top: 1px solid whitesmoke;
}

.body-view{
  display: flex;
}

.left-view{
  width: 130rpx;
  /* background: rebeccapurple; */
}

.right-view{
  /* background: red; */
  width: 75%;
}

/* 头像 */
.user-icon{
  /* display: flex; */
  width:100rpx;
  height: 100rpx;
  margin-left: 20rpx;
  margin-top: 30rpx;
  margin-right: 20rpx;
}

/* 昵称 */
.user-name{
  display: flex;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 35rpx;
  font-weight: bold;
  color: rgb(61, 93, 167);
  margin-top: 30rpx;
  margin-left: 10rpx;
}

/* 内容 */
.user-content{
  display: flex;
  font-size: 18px;
  line-height: 50rpx;
  margin-left: 10rpx;
}

/* 图片 */
.photo-view{
  margin-top: 30rpx;
  background: rebeccapurple;
  margin-left: 10rpx;
  margin-bottom: 20rpx;
}
.photo{
  /* background: rgb(255, 166, 0);   */
  border: 1rpx solid #dedede;
  float: left;
  margin-right: 10rpx;
  margin-top: 10rpx;
}

/* 地理位置 */
.user-address-view{
  display: flex;
  margin-top: 20rpx;
  width: 100%;
}
.user-address-view label{
  font-size: 13px;
  margin: 10rpx;
  color: rgb(98, 136, 224);
}

/* 时间、删除、点赞评论 */
.TDD-view{
  width: 100%;
  height: 60rpx;
  display: flex;
  margin-top: 0rpx;
  align-items: center;
  background: white;
}
.TDD-view label{
  flex: 2;
  font-size: 11px;
  margin-left: 10rpx;
}
.TDD-view button{
  flex: 1;
  font-size: 13px;
  margin-left: 20rpx;
  color: black;
  background: white;
}
.TDD-view button::after{
  border: white;
}
.TDD-view image{
  /* flex: 1; */
  width: 100rpx;
  height: 60rpx;
  margin-right: 10rpx;
  
}
.TDD1{
  margin-left: 420rpx;
}
.TDD2{

}
/* 点赞 */
.zan-view {
  width: 100%;
  background: white;
  margin-bottom: 20rpx;
}
.trigon-view{
  /* height: 20rpx; */
  margin-bottom: -15rpx;
}
.trigon{
  display: flex;
  width: 40rpx;
  height: 20rpx;
  margin-top: 10rpx;
  margin-left: 10rpx;
}
.zan-bg-view{
  display: inline-block;
  width: 100%;
  background: rgb(235, 235, 235);
  margin-right: 20rpx;
  margin-bottom: -11rpx;
  border-top-left-radius: 7rpx;
  border-top-right-radius: 7rpx;
}
.zan-user-view{
  display: flex;
  float: left;
  height: 60rpx;
  margin-left: 10rpx;
  /* margin-top: 5rpx; */
  align-content: center;
}
.zan-user{
  font-size: 13px;
  line-height: 55rpx;
  height: 0rpx;
  color: rgb(70, 117, 224);
}
.zan-user2{
  font-size: 13px;
  line-height: 55rpx;
  height: 40rpx;
  color: rgb(88, 103, 138);
}
.line{
  width: 97%;
  height: 1px;
  background: white;
}

/* 评论 */
.discuss-view{
  background: rgb(235, 235, 235);
  width: 97%;
}

.discuss{
  background: rgb(235, 235, 235);
  line-height: 100rpx;

}

.discuss label{
  height: 80rpx;
  font-size: 12px;
}

.discuss-user{
  color: rgb(88, 103, 138);
  margin-left: 10rpx;
}

.content{
  margin-left: 10rpx;
}
.content{
  position: relative;
  left: 0;
}

/* 弹出框 */
.pop-up-box{
  position: absolute;
  height: 60rpx;
  border-radius: 10rpx;
  right: 90rpx;
  background: rgba(0, 0, 0, 0.7)
}

.input-section {
    position: fixed;
    display: flex;
    align-items: center;
    height: 110rpx;
    bottom: 0rpx;
    left: 0rpx;
    right: 0rpx;
    /* z-index: 500; */
    background: #fff;
}
 
.input_input {
    background: #fff;
    margin-top: 12rpx;
    z-index: 500;
    width: 580rpx;
    height: 110rpx;
    padding-left: 35rpx;
 
}
 
.send_btn {
    width: 110rpx;
    height: 66rpx;
    position: absolute;
    top: 24rpx;
    right: 30rpx;
    background: rgb(47, 80, 19);
    z-index: 550;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.send_btn_text {
    display: flex;
    font-size: 32rpx;
    font-family: 'PingFang';
    color: #fff;
    z-index: 560;
}

navigation.js文件：

// pages/navigation/navigation.js
import { request } from "../../requests/index.js";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nickname:'',
    src:'',
    datasource: [],
    zanSource: [],
    comment:[],
    content:'',
    photoWidth: wx.getSystemInfoSync().windowWidth / 5,

    popTop: 0, //弹出点赞评论框的位置
    popWidth: 0, //弹出框宽度
    isShow: true, //判断是否显示弹出框
    showcontent:true,
    showInput: false, //控制输入栏
    islike:false,
    count:0,//记录第几个被评论
    count_like:[],
    image_list:[],
    head_list:[],
    id_list:[],
    if_zan:[],
    comment_list:[],
    content:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:async function (options) {
    var value=wx.getStorageSync("firstuser")
    if(value==""){
      wx.showModal({
        title: '提示',
        content: '请先登录',
      })
      this.setData({
        showcontent:false,
      })
    }else{
      this.setData({
        showcontent: true,
      })
      var nickname = value.nickName
      
      var src = value.avatarUrl
      console.log(src)
      this.setData({
        nickname,
        src,
      })
    }
    var result = await request({ url: 'http://8.140.117.15:8800/dongtai/findall'});
    var zan_result = await request({ url: 'http://8.140.117.15:8800/like/findall'});
    var comment_result = await request({ url: 'http://8.140.117.15:8800/comment/findall'});
    console.log(zan_result)
    console.log(comment_result.data.dongtaiCommentList)
    var count_like=[]
    var zanSource=[]
    var comment=[]
    var datasource =[]
    var head_list = []
    var id_list = []
    var if_zan = []
    var comment_list = []
    var b = 0;
    var c = false
    for(var i=result.data.dongtaitList.length-1;i>=0;i--){
      datasource[b]=result.data.dongtaitList[i]
      comment_list[b] = comment_result.data.dongtaiCommentList[i]
      count_like[b]=zan_result.data.iLikeList[i].iLikeUserList
      id_list[b] = result.data.dongtaitList[i].id
    
      for(var z = 0;z<zan_result.data.iLikeList[i].iLikeUserList.length;z++){
        if(zan_result.data.iLikeList[i].iLikeUserList[z]==this.data.nickname){
          c = true
          break
        }else{
          c=false
        }
      }
      if_zan[b]=c
      b++
    }
    console.log(id_list)
    // console.log(if_zan)
    // console.log(count_like)
    // var datasource = result.data.dongtaitList
    console.log(comment_list)
    this.setData({
      datasource:datasource,
    })
    console.log("datascource为"+datasource)
    var image_list = []
    for(var i=0;i<datasource.length;i++){
      var strImage = datasource[i].image.split(",");
      var arr = []
      var imageList_1 = []
      if(datasource[i].if_wx == 0){
        var head ='http://8.140.117.15:8800/user/getimage/'+datasource[i].head_img
        head_list.push(head)
      }else{
        head_list.push(datasource[i].head_img)
      }
      for (var a in strImage) {
        arr = strImage[a];
        if(arr!=''){
          var url = 'http://8.140.117.15:8800/user/getimage/'+arr
          imageList_1.push(url)
        }else{
          url =null
        }
        
        console.log(url)
        
       }
      // console.log("列表"+i+"为"+imageList_1)
      if(imageList_1!=null){
        image_list.push(imageList_1)
      }else{
        
      }
     
    }
  
    this.setData({
      head_list:head_list,
      datasource:datasource,
      count_like:count_like,
      image_list:image_list,
      id_list:id_list,
      if_zan:if_zan,
      zanSource,
      comment_list:comment_list
    })
  },
  clickfabu(){
    var value=wx.getStorageSync("my")
    // var address=JSON.parse(value).name
    var address = '山东大学齐鲁软件学院'
    console.log(address)
    wx.navigateTo({
      url: '/pages/send/send?address=' + address,
    })
  },
  showInput: function (e) {
    // console.log(e.currentTarget.dataset.index)
    console.log(e)
    var id = this.data.id_list[e.currentTarget.dataset.index]
    console.log(id)
    this.setData({
      showInput: true,
      count: id,
      content:e.detail.value
    })
 
  },
  
  // onHideInput: function () {
  //   this.setData({
  //     showInput: false
  //   })

  // },
  LookPhoto:function(event){
    console.log(event)
    var src = event.currentTarget.dataset.photurl;//获取data-src
    // console.log(src)
    var imgList = [event.currentTarget.dataset.photurl];//获取data-list
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  },
  bindInputMsg(e){
    console.log(e)
    this.setData({
      content:e.detail.value
    })
  },
  clicklike(e){
    var that = this
    console.log(e)
    var id2 =  e.currentTarget.dataset.index
    var id = this.data.id_list[e.currentTarget.dataset.index]
    var if_zan = this.data.if_zan[id2]
    console.log(id)
    console.log(if_zan)
    var a ={
      username : this.data.nickname,
      dongtai_id:id
    }
    if(!if_zan){
      wx.request({
        url: 'http://8.140.117.15:8800/dongtai/good',
        method:'POST',
        data:a,
        success:function(res){
          console.log(res)
          that.onLoad()
        }
        
      })
    }else{
      wx.request({
        url: 'http://8.140.117.15:8800/dongtai/cancelgood',
        method:'POST',
        data:a,
        success:function(res){
          console.log(res)
          that.onLoad()
        }
      })
    }
  

  },
  send(e){
    var that = this
    console.log("我是e"+e)
    console.log(this.data.content)
    console.log(this.data.count)
    var a ={
      dongtai_id:this.data.count,
      username:this.data.nickname,
      content:this.data.content
    }
    wx.request({
      url: 'http://8.140.117.15:8800/comment/wxsave',
      method:'POST',
      data:a,
      success:function(res){
        console.log(res)
        that.onLoad()
        that.setData({
          showInput: false
        })
        
      }
    })
    console.log(a)
  },
  otherUser(e){
    console.log(e)
    var a ={
      username:e.currentTarget.dataset.name,
      head_img:e.currentTarget.dataset.url
    }

    console.log(a)
    wx.navigateTo({
      url: '/pages/otherUser/otherUser?username='+e.currentTarget.dataset.name+ '&head_img=' +e.currentTarget.dataset.url ,
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // this.onPullDownRefresh()
  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    var that = this
    wx.showNavigationBarLoading() //在标题栏中显示加载
    setTimeout(function () {
    wx.hideNavigationBarLoading() //完成停止加载
    wx.stopPullDownRefresh() //停止下拉刷新
    that.onLoad()
     }, 1000);
  },

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

  },

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

  }
})

三、效果展示

在这里插入图片描述
点击大拇指按钮：

点击评论：

在这里插入图片描述

点击图片可以放大显示：

SDUer～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
山东大学项目实训——地图圈系统——微信小程序（16）

地图圈系统——微信小程序（16）一、社区功能二、项目代码三、效果展示一、社区功能这次项目实训的社区功能是一个很大的模块，包括显示用户发布的文字及图片、用户选择的地点、发布的时间、点赞、评论等，还包括使用者对不同动态的点赞以及评论。是一个花时间比较多的功能，其中需要的接口有很多：获取用户动态。获取各个动态的点赞情况。获取各个动态的评论情况。获取文件名对应文件。对动态的点赞。对动态点赞的取消。对动态的评论。获取到数据需要对数据进行处理显示，也是本功能比较繁琐的一个环节。有一点是微信小程
复制链接

扫一扫