效果展示

一、发布页面

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' }}" 这个是我数据库里的一个字段，隐藏页面的。可以直接不要它。

<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 代码太长了贴不上来，就记一些重要的功能

页面初始数据：

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

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

  // 上传图片upimgs() {let that = thiswx.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 = thiswx.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', //所对应的环境IDtraceUser: 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、点赞朋友圈

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

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

线上效果

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

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

拜~~~~~

校园跑腿小程序--表白墙--仿造微信朋友圈相关推荐

小程序分享到朋友圈功能_小程序开发日记分享到朋友圈
贵州水司楼图片来自视频截图最近微信小程序开始公测小程序分享到朋友圈的功能了.记得前两天刚开始内测时,小程序社区里就不断有人发帖问关于分享到朋友圈的各种问题.很显然大家对这个新特性都特别关心.那 ...
周边跑腿小程序(校园跑腿小程序独立版)跑腿+外卖+表白+二手+快递等校园服务
校园跑腿小程序独立版独立版本为单开版本,只能是一个小程序,但可以开多个学校,运营一个平台就够了. 最新版校园小程序,多校版本,多模块,适合跑腿,外卖,表白,二手,快递等校园服务之前发布的版本需要安 ...
做一个校园跑腿小程序需要多少成本？
最近几年,微信小程序特别火,因为操作简单易传播的特点,很多商家都开始建小程序商城推广客户的延伸,跑腿小程序也在这个时候大行其道. 但随着市场上软件系统的不断增多,这个问题也随之出现.最早的跑腿已经完全 ...
计算机毕业设计之校园跑腿小程序
1 简介今天向大家介绍一个帮助往届学生完成的毕业设计项目,计算机毕业设计之校园跑腿小程序. 计算机毕业生设计,课程设计需要帮助的可以找我 2 设计概要 21世纪是信息化时代,随着信息技术和网络技术的 ...
全新校园跑腿小程序源码分享
类别微信小程序校园综合服务平台,小程序内含快递代取.打印服务.校园跑腿.代替服务.上门维修.其他帮助. 自备:备案域名:服务器,小程序开通微信支付步骤:文件内有操作教程相比于前面那款这款界面 ...
（已更新）全新校园跑腿小程序源码分享
类别微信小程序校园综合服务平台,小程序内含快递代取.打印服务.校园跑腿.代替服务.上门维修.其他帮助. 自备:备案域名:服务器,小程序步骤:文件内有操作教程相比于前面那款这款界面更加简洁搭 ...
校园跑腿小程序市场需要和功能分析！
近年来,世界各地的高校都出现了一种非常"时髦"的商业模式--校园跑腿. 校园跑腿的服务领域包括:换货.送货.代购.代办等.各种看似不起眼的需求造就了众多明星校园创业团队,高校的商机 ...
校园跑腿小程序毕业设计毕设作品开题报告答辩PPT
校园跑腿小程序毕业设计毕设作品开题报告答辩PPT
最新校园跑腿小程序源码多校园版含完整前后端+详细搭建教程
分享一款最新校园跑腿小程序源码多校园版本,含完整的前后端程序包和详细的搭建教程. 功能模块:取快递.寄快递.食堂超市代买跑腿等,跑腿达人可入住接单,在后台自由设置平台抽成比率,校园抽成比率等. 源码系 ...

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

效果展示

一、发布页面

1.1、整体页面样式

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

1.1.2、选择用户当前位置

二、仿造微信朋友圈页面

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

2.1.2、评论用户的朋友圈

2.1.3、回复用户评论

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

2.1.5、点赞朋友圈

线上效果

校园跑腿小程序--表白墙--仿造微信朋友圈相关推荐

最新文章

热门文章