目录

效果展示

一、发布页面

1.1、整体页面样式

1.1.1、上传图片或者视频事件

1.1.2、选择用户当前位置

 二、仿造微信朋友圈页面

2.1.1、获取用户传入的经纬度并展示

2.1.2、评论用户的朋友圈

2.1.3、回复用户评论

2.1.4、删除自己发布的朋友圈

2.1.5、点赞朋友圈

线上效果

---

 之前学习写的一个校园跑腿小程序，其中有个页面是仿造微信朋友圈的，感觉还不错，今天就把它整理成博客笔记。

源码在码云上：里面有重点功能是视频展示，云函数也有。（希望对你有帮助。）校园跑腿小程序: 微信原生开发小程序、云开发、校园跑腿、微信朋友圈仿照 (gitee.com)

• 效果展示

一、发布页面

1.1、整体页面样式

发布页面整体布局

• wxml
•  wx:if="{ { a == '1' }}" 这个是我数据库里的一个字段，隐藏页面的。可以直接不要它。

<form bindsubmit="submitform" wx:if="{
   { a == '1' }}">
  <view class="input">
    <textarea class="text" name="content" placeholder="这一刻想法....."></textarea>
  </view>

  <view >
    <view style="display: flex; flex-direction: row; margin:0rpx 12rpx;  flex-wrap: wrap;">
      <block wx:for="{
   {types}}"  wx:key="index">
        <video  wx:if="{
   { item.fileType == 'video' }}"  style="width: 32%; height: 200rpx; margin-left: 5rpx;" src="{
   {item.tempFilePath}}"></video>

        <image  wx:if="{
   { item.fileType == 'image' }}" bindtap="look" data-src="{
   {itme}}"  style="width: 32%; height: 200rpx; margin-left: 5rpx;" src="{
   {item.tempFilePath}}"></image>
      </block>
    </view>
  </view>


  <view>
    <view style="display: flex; flex-direction: row; margin:0rpx 12rpx; flex-wrap: wrap;">
      <block wx:for="{
   {imgs}}" wx:key="index">
        <image bindtap="look" data-src="{
   {itme}}" style="width: 32%; height: 200rpx; margin-left: 10rpx;margin-top: 15rpx;" src="{
   {item}}"></image>
        <!--  <video style="width: 32%; height: 200rpx; margin-left: 10rpx;margin-top: 15rpx;" src="{
   {item}}"></video> -->
      </block>
    </view>
  </view>

  <view bindtap="upimgs" class="image-box">
    <image class="sendimage" src="/imgs/sendimage.png"></image>
  </view>

  <!-- 选择位置 -->
  <view class="Location" bindtap="chooseAddress">
    <image src="/imgs/Location.png"></image>
    <view class="LocationText"> {
   {Location}} </view>
  </view>


  <!-- 须知 -->
  <view class="abcd">
    <text>注意！因为后台的原因，所发布的动态只会保存 3天 左右,请谅解~</text>
  </view>


  <view class="bottom-box">
    <view class="bottom">
      <text>请勿传播辱骂、虚假、色情低俗等违法违规信息！</text>
    </view>
  </view>

  <button form-type="submit" class="but" hover-class="hover-class-1">发表</button>

</form>

•  wxss

page {
  background-color: #ffffff;
}
.input {
  margin: 20rpx 20rpx;
  display: flex;
  flex-wrap: wrap;
  margin: 20rpx 30rpx;
}
.text {
  height: 200rpx;
  width: 100%;
  font-size: 28rpx;
  border-bottom: 2rpx solid gainsboro;
}
.image-box {
  background-color: #f5f6f9;
  width: 220rpx;
  height: 220rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30rpx;
}

.sendimage {
  width: 100rpx;
  height: 100rpx;
}
.but {
  font-size: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
  width: 400rpx;
  height: 80rpx;
  background-color: pink;
}
/* 按钮点击*/
.hover-class-1  {
  background-color: #ffffff;
}
.bottom-box {
  width: 720rpx;
  height: 50rpx;
}


.bottom {
  margin-top: 150rpx;
  width: 800rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  /* color: #DCDCDC; */
  color: #808080;
}
.Location {
  display: flex;
  flex-wrap: wrap;
}
.LocationText {
  margin-top: 35rpx;
  margin-left: 15rpx;
  font-size: 28rpx;
  color: #96b3ec;
}
.Location image {
  width: 50rpx;
  height: 50rpx;
  margin-top: 20rpx;
  margin-left: 30rpx;
}
.abcd {
  margin-top: 60rpx;
  margin-left: 40rpx;
}
.abcd text {
  font-size: 16rpx;
  color: #f39e9e;
}

• js

js 代码太长了贴不上来，就记一些重要的功能

页面初始数据：

1.1.1、上传图片或者视频事件

文档链接：wx.chooseImage(Object object) | 微信开放文档

  // 上传图片
  upimgs() {
    let that = this
    wx.showActionSheet({
      itemList: ['上传图片', '上传视频'],
      success(res) {
        console.log(res.tapIndex)
        if (res.tapIndex == 0) {
          wx.chooseImage({
            count: 9,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success(res) {
              wx.showLoading({
                title: '上传中...',
              })
              let time = Date.now()
              for (var i = 0; i <= res.tempFilePaths.length; i++) {
                wx.cloud.uploadFile({
                    cloudPath: "loveimages/" + time + i,
                    filePath: res.tempFilePaths[i]
                  })
                  .then(res => {
                    that.setData({
                      imgs: that.data.imgs.concat(res.fileID)
                    })
                    wx.hideLoading()
                    wx.showToast({
                      icon: "none",
                      title: '上传成功',
                    })
                  })
              }
            }
          })
        }else if(res.tapIndex == 1) {
          wx.chooseMedia({
            count: 1,
            mediaType: ['video'],
            sourceType: ['album', 'camera'],
            maxDuration: 30,
            camera: 'back',
            success(res) {
              console.log('xxx',res.tempFiles)
              that.setData({
                types: res.tempFiles ,   
                //types: that.data.types.concat(res.tempFiles)  
            })
                wx.showLoading({
                  title: '上传中...',
                })
              let time = Date.now()
              for (var i = 0; i <= res.tempFiles.length; i++) {
                console.log('yyy',  res.tempFiles[i] )
                console.log('zzz',  res.tempFiles[i].tempFilePath )
                wx.cloud.uploadFile({
                    cloudPath: "loveimages/" + time + i,
                    filePath: res.tempFiles[i].tempFilePath
                  })
                   .then(res => {
                    that.setData({
                     // videos: that.data.videos.concat(res.fileID)
                      videos:  res.fileID
                    }) 
                    wx.hideLoading()
                    wx.showToast({
                      icon: "none",
                      title: '上传成功',
                    })
                    }) 
              }
            }
          })
        }
      }
    })
  },

1.1.2、选择用户当前位置

文档链接：wx.chooseAddress(Object object) | 微信开放文档

  // 用户选择 位置
  chooseAddress(){
    const that = this
    wx.showActionSheet({
      itemList: ['选择位置','不显示位置'],
      success(res) {
        if (res.tapIndex == 0) {
        wx.chooseLocation({
          success: (res) => {
            console.log('当前位置为',res)
            that.setData({
              latitude: res.latitude,
              longitude: res.longitude,
              address: res.name + ' - ' + res.address,
              Location: res.name + ' - ' + res.address,
            })
          }          
        })
      }else{
        that.setData({
          Location: "不显示位置"
        })
        console.log("用户不显示位置")
        return
      }
    }
  })
},

这里拿到用户的当前经纬度后，再与发布的内容图片等一起写入数据库。云开发操作数据库这里就不做记录。更多可私信我噢......

 二、仿造微信朋友圈页面

太长了，分解记录关键代码。

2.1.1、获取用户传入的经纬度并展示

页面初始数据：

 获取经纬度并打开地图：

文档链接：wx.openLocation(Object object) | 微信开放文档

  // 打开地图 
  openLocation(e) {
    console.log('地图', e.currentTarget.dataset.index)
    const that = this;
    wx.openLocation({
      latitude: that.data.lovelist[e.currentTarget.dataset.index].latitude,
      longitude: that.data.lovelist[e.currentTarget.dataset.index].longitude,
    })
},

2.1.2、评论用户的朋友圈

我们点击某个用户的朋友圈进行评论的时候，我们所评论的信息应该是在所评论的区域下，而不能跑到未评论的朋友圈下面。因为我们数据库的字段是一条一个朋友圈，而字段的 _id  是唯一的。这样就好办了：

• 首先找到页面条块的 index

wxml传入 index

 js 将点击到的朋友圈的字段的 _id 设置为缓存。

•  调用云函数，提交评论内容 入数据库

因为评论信息是存入数据库的，而又不是每个人都有操作该数据库集合的权限的。而我们这个是评论，每个人都可以进行自己的评论的。因此，这里我们可以运用云函数来解决这个问题。(云函数无权限问题)

 评论云函数：

// 云函数入口文件
const cloud = require('wx-server-sdk')

//云开发环境初始化
cloud.init({
  env: 'cloud1-6geteyha69be255a', //所对应的环境ID
  traceUser: true
})

// 要先初始化后再用 有时会报 未初始化 db 在 init 后
const db = cloud.database()
const _ = db.command
// 云函数入口函数
exports.main = async (event, context) => {
  try {
    await db.collection('love')
      .where({
        _id: event._id
      })
      .update({
        data: {
          aaa: _.push({
            PLs: event.PLs,
            sendtime: event.sendtime,
            sayavatarUrl: event.sayavatarUrl,
            saynickName: event.saynickName
          })
        }
      })
  } catch (error) {
    console.error(error)
  }
  return {
    data: event
  }
}

2.1.3、回复用户评论

因为前面入数据库评论内容是： PLs: placeholder + PL,

2.1.4、删除自己发布的朋友圈

就是数据库的操作，要注意的就是：限制 “自己删自己的” 。用户_openid则能达到限制。

2.1.5、点赞朋友圈

与评论一样的，先把需要的信息写入数据库，在读出来渲染到页面上。

 就记到这里了......更多的可以直接私信我。

线上效果

可以去看看上线的效果： 移通校园跑腿 

(小推一下，见谅~~ ^_^)

拜~~~~~