目录
之前学习写的一个校园跑腿小程序，其中有个页面是仿造微信朋友圈的，感觉还不错，今天就把它整理成博客笔记。
源码在码云上：里面有重点功能是视频展示，云函数也有。（希望对你有帮助。）校园跑腿小程序: 微信原生开发小程序、云开发、校园跑腿、微信朋友圈仿照 (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、点赞朋友圈
与评论一样的，先把需要的信息写入数据库，在读出来渲染到页面上。
就记到这里了......更多的可以直接私信我。
线上效果
可以去看看上线的效果： 移通校园跑腿
(小推一下，见谅~~ ^_^)
拜~~~~~
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
