• 校园跑腿小程序--表白墙--仿造微信朋友圈

     

    目录

    效果展示

    一、发布页面

    1.1、整体页面样式

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

    1.1.2、选择用户当前位置

     二、仿造微信朋友圈页面

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

    2.1.2、评论用户的朋友圈

    2.1.3、回复用户评论

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

    2.1.5、点赞朋友圈

    线上效果

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

    • 效果展示

    一、发布页面

    1.1、整体页面样式

    发布页面整体布局

    • wxml
    •  wx:if="{{ a == '1' }}" 这个是我数据库里的一个字段，隐藏页面的。可以直接不要它。
    1. <form bindsubmit="submitform" wx:if="{{ a == '1' }}">
    2.   <view class="input">
    3.     <textarea class="text" name="content" placeholder="这一刻想法.....">textarea>
    4.   view>
    5.  
    6.   <view >
    7.     <view style="display: flex; flex-direction: row; margin:0rpx 12rpx;  flex-wrap: wrap;">
    8.       <block wx:for="{{types}}"  wx:key="index">
    9.         <video  wx:if="{{ item.fileType == 'video' }}"  style="width: 32%; height: 200rpx; margin-left: 5rpx;" src="{{item.tempFilePath}}">video>
    10.  
    11.         <image  wx:if="{{ item.fileType == 'image' }}" bindtap="look" data-src="{{itme}}"  style="width: 32%; height: 200rpx; margin-left: 5rpx;" src="{{item.tempFilePath}}">image>
    12.       block>
    13.     view>
    14.   view>
    15.  
    16.  
    17.   <view>
    18.     <view style="display: flex; flex-direction: row; margin:0rpx 12rpx; flex-wrap: wrap;">
    19.       <block wx:for="{{imgs}}" wx:key="index">
    20.         <image bindtap="look" data-src="{{itme}}" style="width: 32%; height: 200rpx; margin-left: 10rpx;margin-top: 15rpx;" src="{{item}}">image>
    21.         
    22.       block>
    23.     view>
    24.   view>
    25.  
    26.   <view bindtap="upimgs" class="image-box">
    27.     <image class="sendimage" src="/imgs/sendimage.png">image>
    28.   view>
    29.  
    30.   
    31.   <view class="Location" bindtap="chooseAddress">
    32.     <image src="/imgs/Location.png">image>
    33.     <view class="LocationText"> {{Location}} view>
    34.   view>
    35.  
    36.  
    37.   
    38.   <view class="abcd">
    39.     <text>注意！因为后台的原因，所发布的动态只会保存 3天 左右,请谅解~text>
    40.   view>
    41.  
    42.  
    43.   <view class="bottom-box">
    44.     <view class="bottom">
    45.       <text>请勿传播辱骂、虚假、色情低俗等违法违规信息！text>
    46.     view>
    47.   view>
    48.  
    49.   <button form-type="submit" class="but" hover-class="hover-class-1">发表button>
    50.  
    51. form>
    •  wxss
    1. page {
    2.   background-color: #ffffff;
    3. }
    4. .input {
    5.   margin: 20rpx 20rpx;
    6.   display: flex;
    7.   flex-wrap: wrap;
    8.   margin: 20rpx 30rpx;
    9. }
    10. .text {
    11.   height: 200rpx;
    12.   width: 100%;
    13.   font-size: 28rpx;
    14.   border-bottom: 2rpx solid gainsboro;
    15. }
    16. .image-box {
    17.   background-color: #f5f6f9;
    18.   width: 220rpx;
    19.   height: 220rpx;
    20.   display: flex;
    21.   justify-content: center;
    22.   align-items: center;
    23.   margin-left: 30rpx;
    24. }
    25.  
    26. .sendimage {
    27.   width: 100rpx;
    28.   height: 100rpx;
    29. }
    30. .but {
    31.   font-size: 32rpx;
    32.   display: flex;
    33.   justify-content: center;
    34.   align-items: center;
    35.   margin-top: 50rpx;
    36.   width: 400rpx;
    37.   height: 80rpx;
    38.   background-color: pink;
    39. }
    40. /* 按钮点击*/
    41. .hover-class-1  {
    42.   background-color: #ffffff;
    43. }
    44. .bottom-box {
    45.   width: 720rpx;
    46.   height: 50rpx;
    47. }
    48.  
    49.  
    50. .bottom {
    51.   margin-top: 150rpx;
    52.   width: 800rpx;
    53.   height: 40rpx;
    54.   display: flex;
    55.   justify-content: center;
    56.   align-items: center;
    57. }
    58. .bottom text {
    59.   display: flex;
    60.   justify-content: center;
    61.   align-items: center;
    62.   font-size: 26rpx;
    63.   /* color: #DCDCDC; */
    64.   color: #808080;
    65. }
    66. .Location {
    67.   display: flex;
    68.   flex-wrap: wrap;
    69. }
    70. .LocationText {
    71.   margin-top: 35rpx;
    72.   margin-left: 15rpx;
    73.   font-size: 28rpx;
    74.   color: #96b3ec;
    75. }
    76. .Location image {
    77.   width: 50rpx;
    78.   height: 50rpx;
    79.   margin-top: 20rpx;
    80.   margin-left: 30rpx;
    81. }
    82. .abcd {
    83.   margin-top: 60rpx;
    84.   margin-left: 40rpx;
    85. }
    86. .abcd text {
    87.   font-size: 16rpx;
    88.   color: #f39e9e;
    89. }
    • js

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

    页面初始数据：

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

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

    1.   // 上传图片
    2.   upimgs() {
    3.     let that = this
    4.     wx.showActionSheet({
    5.       itemList: ['上传图片', '上传视频'],
    6.       success(res) {
    7.         console.log(res.tapIndex)
    8.         if (res.tapIndex == 0) {
    9.           wx.chooseImage({
    10.             count: 9,
    11.             sizeType: ['original', 'compressed'],
    12.             sourceType: ['album', 'camera'],
    13.             success(res) {
    14.               wx.showLoading({
    15.                 title: '上传中...',
    16.               })
    17.               let time = Date.now()
    18.               for (var i = 0; i <= res.tempFilePaths.length; i++) {
    19.                 wx.cloud.uploadFile({
    20.                     cloudPath: "loveimages/" + time + i,
    21.                     filePath: res.tempFilePaths[i]
    22.                   })
    23.                   .then(res => {
    24.                     that.setData({
    25.                       imgs: that.data.imgs.concat(res.fileID)
    26.                     })
    27.                     wx.hideLoading()
    28.                     wx.showToast({
    29.                       icon: "none",
    30.                       title: '上传成功',
    31.                     })
    32.                   })
    33.               }
    34.             }
    35.           })
    36.         }else if(res.tapIndex == 1) {
    37.           wx.chooseMedia({
    38.             count: 1,
    39.             mediaType: ['video'],
    40.             sourceType: ['album', 'camera'],
    41.             maxDuration: 30,
    42.             camera: 'back',
    43.             success(res) {
    44.               console.log('xxx',res.tempFiles)
    45.               that.setData({
    46.                 types: res.tempFiles ,   
    47.                 //types: that.data.types.concat(res.tempFiles)  
    48.             })
    49.                 wx.showLoading({
    50.                   title: '上传中...',
    51.                 })
    52.               let time = Date.now()
    53.               for (var i = 0; i <= res.tempFiles.length; i++) {
    54.                 console.log('yyy',  res.tempFiles[i] )
    55.                 console.log('zzz',  res.tempFiles[i].tempFilePath )
    56.                 wx.cloud.uploadFile({
    57.                     cloudPath: "loveimages/" + time + i,
    58.                     filePath: res.tempFiles[i].tempFilePath
    59.                   })
    60.                    .then(res => {
    61.                     that.setData({
    62.                      // videos: that.data.videos.concat(res.fileID)
    63.                       videos:  res.fileID
    64.                     }) 
    65.                     wx.hideLoading()
    66.                     wx.showToast({
    67.                       icon: "none",
    68.                       title: '上传成功',
    69.                     })
    70.                     }) 
    71.               }
    72.             }
    73.           })
    74.         }
    75.       }
    76.     })
    77.   },

    1.1.2、选择用户当前位置

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

    1.   // 用户选择 位置
    2.   chooseAddress(){
    3.     const that = this
    4.     wx.showActionSheet({
    5.       itemList: ['选择位置','不显示位置'],
    6.       success(res) {
    7.         if (res.tapIndex == 0) {
    8.         wx.chooseLocation({
    9.           success: (res) => {
    10.             console.log('当前位置为',res)
    11.             that.setData({
    12.               latitude: res.latitude,
    13.               longitude: res.longitude,
    14.               address: res.name + ' - ' + res.address,
    15.               Location: res.name + ' - ' + res.address,
    16.             })
    17.           }          
    18.         })
    19.       }else{
    20.         that.setData({
    21.           Location: "不显示位置"
    22.         })
    23.         console.log("用户不显示位置")
    24.         return
    25.       }
    26.     }
    27.   })
    28. },

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

     二、仿造微信朋友圈页面

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

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

    页面初始数据：

     获取经纬度并打开地图：

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

    1.   // 打开地图 
    2.   openLocation(e) {
    3.     console.log('地图', e.currentTarget.dataset.index)
    4.     const that = this;
    5.     wx.openLocation({
    6.       latitude: that.data.lovelist[e.currentTarget.dataset.index].latitude,
    7.       longitude: that.data.lovelist[e.currentTarget.dataset.index].longitude,
    8.     })
    9. },

    2.1.2、评论用户的朋友圈

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

    • 首先找到页面条块的 index

    wxml传入 index

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

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

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

     评论云函数：

    1. // 云函数入口文件
    2. const cloud = require('wx-server-sdk')
    3.  
    4. //云开发环境初始化
    5. cloud.init({
    6.   env: 'cloud1-6geteyha69be255a', //所对应的环境ID
    7.   traceUser: true
    8. })
    9.  
    10. // 要先初始化后再用 有时会报 未初始化 db 在 init 后
    11. const db = cloud.database()
    12. const _ = db.command
    13. // 云函数入口函数
    14. exports.main = async (event, context) => {
    15.   try {
    16.     await db.collection('love')
    17.       .where({
    18.         _id: event._id
    19.       })
    20.       .update({
    21.         data: {
    22.           aaa: _.push({
    23.             PLs: event.PLs,
    24.             sendtime: event.sendtime,
    25.             sayavatarUrl: event.sayavatarUrl,
    26.             saynickName: event.saynickName
    27.           })
    28.         }
    29.       })
    30.   } catch (error) {
    31.     console.error(error)
    32.   }
    33.   return {
    34.     data: event
    35.   }
    36. }

    2.1.3、回复用户评论

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

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

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

    2.1.5、点赞朋友圈

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

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

    线上效果

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

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

     

    拜~~~~~

  • 相关阅读:
    前端超级好用网站整理
    【Ubuntu】命令行快速移动光标
    Android 调试桥——ADB
    npm WARN npm npm does not support Node.js v12.18.3
    《MySQL 数据库 （一）》
    Redis监控工具_RedisLive
    【Harmony OS】【JAVA UI】鸿蒙应用如何集成OKHttp网络三方库
    HTML:认识HTML与基本语法的学习
    【乱码】记一次C#调用Java乱码
    gitlab安装在虚拟机下，使用gitlabrunner通过宿主机网络访问
  • 原文地址：https://blog.csdn.net/qq_61122628/article/details/126502668