使用微信小程序云开发实现类似朋友圈效果
效果
编辑并share页面如下:
点击分享以后,跳转到以前share过的朋友圈页面,点击左上角可以返回,如下:
说明
本demo会用到微信小程序的云开发功能,包括云数据库,云存储
实现步骤
1. 云开发环境的初始化
详见:https://blog.csdn.net/Panda325/article/details/108117775
2. 新建page
新建两个pageshare
和pyq
,share
用于编辑文案并选择配图,pyq
用于查看以前发过的朋友圈
app.json
的pages
字段如下:
"pages": [
"pages/share/share",
"pages/pyq/pyq"
],
3. share
页面
share
页面从上到下依次是:多行输入框 textarea
,选择图片的按钮 button
,分享按钮 button
share.wxml
如下:
<textarea placeholder="输入您的文案" bindblur="bindTextAreaBlur"
value="{{details}}" class='text'> </textarea>
<input>\n\n</input>
<button bindtap="seleteAndUploadPicture">
<image src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2444066247,3899866315&fm=26&gp=0.jpg'></image>
</button>
<input>\n\n</input>
<button bindtap="share">分享</button>
share.js
如下:
const DB = wx.cloud.database().collection("pyq")
Page({
data: {
details: '',
imgURL: ''
},
bindTextAreaBlur: function (e) {
console.log(e.detail.value);
var that = this;
that.setData({
details: e.detail.value
});
},
seleteAndUploadPicture() {
let that = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: res => {
console.log('choose successfully', res)
that.setData({
imgURL: res.tempFilePaths[0]
})
},
fail(res) {
console.log('choose failed', res)
}
})
},
share() {
console.log('调用share的方法')
let that = this
wx.cloud.uploadFile({
cloudPath: new Date().getTime() + '.png',
filePath: this.data.imgURL, // 文件路径
success: function (res) {
console.log('upload successfully', res)
that.setData({
imgURL: res.fileID
})
},
fail(res) {
console.log('upload failed', res)
}
})
DB.add({
data: {
descption: this.data.details,
imgURL: this.data.imgURL
},
success(res) {
console.log("share成功", res)
wx.navigateTo({
url: "../../pages/pyq/pyq"
})
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
},
fail(res) {
console.log("share失败", res)
}
})
}
})
share.wxss
如下:
.text{
/* height: 100rpx;
line-height: 100rpx; */
width: 100%;
font-size: 60rpx;
background-color: #bfa;
}
4. pyq
页面
pyq.wxml
如下:
<view wx:for="{{array}}">
<view>{{index}} : {{item.descption}}</view>
<image src="{{item.imgURL}}"></image>
<view>\n</view>
</view>
pyq.js
如下:
const DB = wx.cloud.database().collection("pyq")
Page({
data: {
array: []
},
onLoad() {
let that = this
DB.get({
success(res) {
that.setData({
array: res.data
})
for (let i = 0; i < res.data.length; i++) {
console.log(res.data[i].descption)
console.log(res.data[i].imgURL)
}
}
})
}
})
我的邮箱:1125806272@qq.com
我的博客:<http://9pshr3.coding-pages.com/>
或<https://zhenglin-li.github.io/>
我的csdn:<https://me.csdn.net/Panda325>
我的简书:<https://www.jianshu.com/u/e2d945027d3f>
我的今日头条:<https://www.toutiao.com/c/user/4004188138/#mid=1592553312231438>
我的博客园:<https://www.cnblogs.com/zhenglin-li/>