本节学习开发一个基于全套云能力（云数据库、云函数、云存储）的图片分享社区小程序。
一、部署云数据库
1.打开“微信开发者工具”的云开发控制台，创建一个新的数据集，例如photos。
2.检查photos数据集的权限，确认是“所有用户可读，仅创建者及管理者可写”。
二、创建页面文件
本项目有4个页面文件，如图：
三、主要代码：
1.云函数文件代码：
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
openid: wxContext.OPENID
}
}
2.index.wxml文件
<!--index.wxml-->
<view class="container">
<!-- 卡片开始 -->
<view class="card" wx:for="{{photoList}}" wx:key="photo{{index}}">
<!-- 卡片页眉 -->
<view class="card-head">
<!-- 头像图片 -->
<navigator url="../homepage/homepage?id={{item._openid}}">
<image class="avatar" src="{{item.avatarUrl}}" mode="widthFix"></image>
</navigator>
<!-- 用户昵称和所在地区域 -->
<view class="title">
<!-- 用户昵称 -->
<text class="nickName">{{item.nickName}}</text>
<!-- 所在地 -->
<text class="address">{{item.province}},{{item.country}}</text>
</view>
</view>
<!-- 卡片主体 -->
<view class="card-body">
<navigator url="../detail/detail?id={{item._id}}">
<image src="{{item.photoUrl}}" mode="widthFix"></image>
</navigator>
</view>
<!-- 卡片页脚 -->
<view class="card-foot">
<text>{{item.addDate}}</text>
</view>
</view>
<!-- 卡片结束 -->
<!-- 浮动按钮 -->
<button class="floatBtn" type="primary" size="mini" open-type="getUserInfo" bindgetuserinfo="getUserInfo" bindtap="goToAdd">上传图片</button>
</view>
3.index.wxss文件
/* 浮动按钮样式 */
.floatBtn{
position: fixed;
top: 50rpx;
right: 50rpx;
}
4.index.js文件
var app = getApp()
// 连接云数据集photos
const db = wx.cloud.database()
const photos = db.collection('photos')
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 自定义函数--获取用户个人信息
*/
getUserInfo: function (e) {
// 尝试打印输出个人信息，看是否获取成功
// console.log(e.detail.userInfo)
//将用户个人信息存放到全局变量userInfo中
app.globalData.userInfo = e.detail.userInfo
// 检测是否已经获取了用户的openid
if (app.globalData.openid==null){
// 如果是第一次登陆则使用云函数获取用户openid
wx.cloud.callFunction({
name:'getOpenid',
complete:res=>{
// 尝试打印用户的openid，看是否获取成功
// console.log(res.result.openid)
// 将用户openid信息存在全局变量openid中
app.globalData.openid = res.result.openid
}
})
}
},
/**
* 自定义函数--跳转上传图片页add
*/
goToAdd: function () {
wx.navigateTo({
url: '../add/add',
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 获取图片列表（按日期降序）
photos.orderBy('addDate','desc').get({
success:res=>{
this.setData({
photoList:res.data
})
}
})
},
})
5.homepage.wxml文件
<!--pages/homepage/homepage.wxml-->
<view class="container">
<!-- 头像和昵称 -->
<view class="avatarBox">
<image src="{{photoList[0].avatarUrl}}"></image>
<text>{{photoList[0].nickName}}个人主页</text>
</view>
<!-- 卡片开始 -->
<view class="card" wx:for="{{photoList}}" wx:key="photo{{index}}">
<!-- 卡片页眉 -->
<view class="card-head">
<!-- 头像图片 -->
<image class="avatar" src="{{item.avatarUrl}}" mode="widthFix"></image>
<!-- 用户昵称和所在地区域 -->
<view class="title">
<!-- 用户昵称 -->
<text class="nickName">{{item.nickName}}</text>
<!-- 所在地 -->
<text class="address">{{item.province}},{{item.country}}</text>
</view>
</view>
<!-- 卡片主体 -->
<view class="card-body">
<navigator url="../detail/detail?id={{item._id}}">
<image src="{{item.photoUrl}}" mode="widthFix"></image>
</navigator>
</view>
<!-- 卡片页脚 -->
<view class="card-foot">
<text>{{item.addDate}}</text>
</view>
</view>
<!-- 卡片结束 -->
</view>
6.homepage.wxss文件
/* pages/homepage/homepage.wxss */
/* 头像区域 */
.avatarBox{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100rpx;
}
/* 头像区域-头像图片 */
.avatarBox image{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
/* 头像区域-昵称文本 */
.avatarBox text{
margin: 30rpx 0;
}
7.homepage.js文件
// pages/homepage/homepage.js
// 连接云数据集photos
const db = wx.cloud.database()
const photos = db.collection('photos')
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(options.id)
// 获取用户的openid
let openid = options.id
// 显示loading提示框
wx.showLoading({
title: '数据加载中',
})
// 查找云数据集photos中该用户的图片上传记录
photos.orderBy('addDate','desc').where({
_openid:openid
}).get({
success:res=>{
// 获取数据记录
this.setData({
photoList:res.data
})
// 关闭loading提示框
wx.hideLoading()
}
})
},
})
8.detail.wxml文件
<!--pages/detail/detail.wxml-->
<!-- 顶端图片展示 -->
<image src="{{photo.photoUrl}}" mode="widthFix"></image>
<!-- 按钮区域 -->
<view>
<button type="primary" plain bindtap="downloadPhoto">下载到本地</button>
<button type="primary" plain open-type="share">分享给好友</button>
<button type="primary" plain bindtap="previewPhoto">全屏预览</button>
</view>
9.detail.wxss文件
/* pages/detail/detail.wxss */
/* 图片样式 */
image{
width: 750rpx;
}
/* 按钮区域 */
view{
padding:0 50rpx;
}
/* 按钮样式 */
button{
margin: 10rpx;
}
10.detail.js
// pages/detail/detail.js
const db=wx.cloud.database()
const photos=db.collection("photos")
Page({
/**
* 页面的初始数据
*/
data: {
},
//自定义函数--下载图片到本地
downloadPhoto(){
wx.cloud.downloadFile({
fileID:this.data.photo.photoUrl,
success:res=>{
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success:res=>{
wx.showToast({
title: '保存成功！',
})
},
fail:err=>{
wx.showToast({
title: '保存失败！',
icon:'none'
})
}
})
},
fail:err=>{
console.log(err)
}
})
},
//自定义函数--全屏预览图片
previewPhoto(){
var urls=[this.data.photo.photoUrl]
wx.previewImage({
urls:urls,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
photos.doc(options.id).get({
success:res=>{
this.setData({photo:res.data})
}
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
return{
title:'给你分享一张好看的图片',
path:'pages/detail/detail?id='+this.data.photo._id
}
}
})
11.add.wxml文件
<!--pages/add/add.wxml-->
<view class="container">
<!-- 上传按钮 -->
<button type="warn" bindtap="upload">点击此处上传图片</button>
<!-- 已上传图片区域 -->
<view class="photoBox">
<!-- 标题 -->
<text>已上传图片历史记录</text>
<!-- 图片集 -->
<view>
<block wx:for="{{historyPhotos}}" wx:key="history{{index}}">
<image src="{{item.photoUrl}}"></image>
</block>
</view>
</view>
</view>
12.add.js文件
// pages/add/add.js
var app = getApp()
// 连接云数据集photos
const db = wx.cloud.database()
const photos = db.collection('photos')
// 格式化当前日期
function formatDate() {
var now = new Date()
var year = now.getFullYear()
var month = now.getMonth() + 1
var day = now.getDate()
if (month < 10) month = '0' + month
if (day < 10) day = '0' + day
return year + '-' + month + '-' + day
}
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 自定义函数--上传图片
*/
upload: function() {
// 选择图片
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: res => {
// loading提示框表示正在上传图片
wx.showLoading({
title: '上传中',
})
// 获取图片临时地址
const filePath = res.tempFilePaths[0]
// 自定义云端的图片名称
const cloudPath = Math.floor(Math.random() * 1000000) + filePath.match(/\.[^.]+?$/)[0]
// 上传图片到云存储中
wx.cloud.uploadFile({
cloudPath,
filePath,
success: res => {
// 提示上传成功
wx.showToast({
title: '上传成功',
duration: 3000
})
// 获取用户个人信息
let userInfo = app.globalData.userInfo
// 获取当天日期
let today = formatDate()
// 往云数据集photos中添加一条记录
photos.add({
data: {
photoUrl: res.fileID,
avatarUrl: userInfo.avatarUrl,
nickName: userInfo.nickName,
country: userInfo.country,
province: userInfo.province,
addDate: today
},
success: res => {
console.log(e)
},
fail: e => {
console.log(e)
}
}) //往云数据集photos中添加一条记录结束
// 更新图片历史记录
this.getHistoryPhotos()
},
fail: e => {
console.log(e)
}
}) //上传图片到云存储中结束
},
fail: e => {
console.log(e)
},
complete: () => {
// 关闭loading提示框
wx.hideLoading()
// 更新图片历史记录
this.getHistoryPhotos()
}
}) //选择图片API结束
},
/**
* 自定义函数--获取已上传图片的历史记录
*/
getHistoryPhotos: function() {
// 获取用户的openid
let openid = app.globalData.openid
// 从云数据集中查找当前用户的上传记录
photos.where({
_openid: openid
}).get({
success: res => {
this.setData({
historyPhotos: res.data
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
// 尝试输出用户的个人信息
// console.log(app.globalData.userInfo)
// 尝试输出用户的openid
// console.log(app.globalData.openid)
// 更新图片历史记录
this.getHistoryPhotos()
},
})
其他代码略。