小太阳云存储无法获取外链_用小程序云开发打造运动圈小程序丨实战

“

还在为组队约球难同步犯愁？本文教你用小程序·云开发打造运动圈小程序(以乒乓球为例)，实现球友间高效互动，一起运动起来吧！

”

导语

以建立一个信息共享与交流平台为目标，我与好友一起完成了这个乒乓圈小程序的开发。

我们主要借助了小程序·云开发的云函数、云数据库等能力来完成有关于数据和后台的操作，从而免去了租赁服务器等繁杂的开发事项。

下面我就来分享下开发过程中如何进行数据库的设计、云函数实现数据获取和触发器的功能，以及简单的两个页面设计。

界面展示

界面展示

<<  滑动查看下一张图片  >>

页面流程大致分为：

- 引导页

- 首页

- 同城圈

- 打卡

- 榜单

- 圈友页

- 同城圈友

- 留言列表

- 个人页

- 个人资料

数据库

从以上的功能出发我的数据库设计思路如此 对象有以下几个：

• 个人基础信息

• 个人详细信息(乒乓球相关)

• 球馆

• 对话

• 留言信息

对象属性的类型选择

小程序提供的数据库是基于mangoDB的面向对象数据库，区别于一般的关系数据库如：mysql等。

对象结构如下所示：

个人基础信息：

openId:{type:String}//openId主键

name:{type:String}//名字，默认为微信名

avatarUrl:{type:String}//头像，默认微信头像

context:{type:String,default:"这个人很懒什么都没留下"}//个人简介

//以下几项应为流水数据应当对放一张表，在此为图简便放入基础信息表

intergal:{type:Number,default:0}//积分 用来排名和升级

level:{type:String,default:"新人"}//等级

sign:{type:Array,default:[]}//记录打卡签到的日期

month:{type:Number}//记录上次打卡签到的月份，用于每月清空签到表

个人详情(乒乓球相关)：

openId:{type:String}//openId主键

years:{type:String}//球龄

phone:{type:Array}//电话

bat:{type:String}//球拍

board:{type:String}//底板

context:{type:String}//正面胶皮

intergal:{type:Number,default:0}//反面胶皮

球馆：

id:{type:String}//主键，由数据库自动生成

address:{type:String}//地址

arena:{type:String}//所在区域，例如球馆名

persons:{type:Array}//球馆的活动者，需求更改数据库中的字段为circle

city:{type:String}//球馆所在的城市

img:{type:String}//球馆图片地址

latitude:{type:Number}//经度

longitude{type:Number}//纬度

table:{type:Number}//球桌数

time:{type:String}//开放时间

对话：

message:{type:Array,default:[]}//留言内容数组，存储留言的id

my_id:{type:String}//创建者的openId

other_id:{type:String}//接收者的openId

留言信息：

id:{type:String}//主键，由数据库自动生成

msg:{type:String}//留言内容

my_id:{type:String}//创建者的openId

other_id:{type:String}//接收者的openId

time:{type:Date}//时间戳

云函数读取数据库和部分前端实现

1. 引导页

当第一次登陆进去就是如上所示，登陆进去后通过 openId 进行云函数获取数据库中个人信息，如果没有则默认进行注册流程。默认昵称为微信昵称(可在个人页更改)，头像为微信头像(暂不提供更改)，余下都为默认值。引导页 js

以上流程可分为以下几步。

1. 进行 onLoad (页面加载完成)生命周期，判断是否有缓存

首先调用 wx.getStorage 查询收缓存的登陆信息，如果获取成功，跳过引导页，将当前登陆状态的标识符(默认false)改为 true 。通过 setTimeout 来控制提示信息和超时检测。

2. 未缓存，进入登陆注册功能

如果获取缓存中登陆状态。先获取授权信息 getUserInfo 判断获取到的用户信息存在且为登录。

the_first 判断是否是第一次进入要进行注册流程(保险作用)。

调用云函数 getPersonhInfo ——获取用户信息，如果获取成功，结果集不为空，就将信息存储到全局状态 app.globalData 中，接着调用云函数 getpingpang_info 获取个人详细信息一样放入全局状态中，然后写入缓存信息 wx.setStorage({key:'login',data:true})以便下次不用检验，最后通过 wx.switchTab({url:'../home/home',}) 来跳转到首页。

如果上一步未获取成功，判断为第一次登入，进入注册流程 先获取用户的昵称后头像，调用云函数 pingpang_init后台进行注册，并将初始值放入全局状态中，跳转到首页。

2.签到功能

签到的存储是在个人信息的一个字段 sign 中，以数组的形式存储，当点击签到时，先判断此次签到的月份与上次签到的月份(person的month字段)是否相同，不同则将 sign 数据置为空并且将 month 字段更新为当前月份，接着存储签到的日期的的 day。

云函数

// 云函数入口文件

const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database();

const personInfo = db.collection("pingpang_personinfo")

// 云函数入口函数

exports.main = async(event, context) => {

let data = personInfo.where({

openId: event.openId || event.userInfo.openId

})

let info = await data.get()//先获取

let sign = info.data[0].sign || [] //放入新数组

//判断是否到了新的月份

if (info.data[0].month != new Date().getMonth()) {

sign = [];

var month = new Date().getMonth()

}

//替换数组

return await cloud.callFunction({

name: "setPersonInfo",

data: {

personInfo: {

//event.date是为了方便写管理调试用的一次性放日期数组

sign: sign.concat(event.date || [new Date().getDate()]),

month:month

}

}

})

}

3.排行榜单

榜单十分简单，有多种做法，如将同城所有人查询出来按照积分排序，并取一定数量的用户来输出排行榜，或是以城市排行榜为对象，创建一张表，表中存储的对象的属性大致如下所示 亦或是以每个城市为一张表，存储积分达到排行榜对象。

三种方法各有利弊，最终综合所有情况，我选择在大量的用户的城市，做单独一张表来存储，剩余小型城市则存储在剩余的总表中，该方法唯一的缺点就是判断处理的麻烦，当一个城市用户变多时，需要在数据库中添加一张新表，这需要手动来解决，变更后台的处理判断，可以使用策略模式来解决。

4. 留言功能

留言功能，是这个小程序的主要功能之一，目的是为了向兴趣相同的乒乓爱好者有一个初始的交流平台。创建留言需要在圈友(同城的)中找到相应的用户，然后点击头像，弹出详情，接着点击留言按钮，会跳转到留言对话页。

在点击留言时查询之前是否存在对话兑现，存在即读取，不存在就跳转到空白页，如果发送了留言，则创建对象。这样可以解决以上的缺点。但是还是存在一个问题就是未使用 socket 无法达成实时通信。

云函数

本部分云函数功能大致为：首先，结构参数，message(留言对象，包含之后的几个参数)，myid，otherid 和 msg(留言内容)。接着判断 my_id 是否存在，不存在就用当前用户的 openid 。然后是向留言表添加一条新数据messagedb.add最后获取对话对象并向对话中的留言数组中添加留言内容。

5. 个人模块

总结

良好沟通的重要性

在和朋友一起开发小程序的过程中注意到了以下的问题，及时沟通是最重要的，在我们开发的过程中，因为没有良好的沟通，导致前后端的功能开发对接不完美，部分功能分配不好，有些功能可以通过前端或后端单独解决，却因为没有沟通完善，导致双方都做了或者双方都没做的情况发生。

个人思考：程序的结构

程序的结构大致分为前端页面、后端服务器和数据库三个组成部分。在小程序这种 MVVM 结构中前端占有了很重要的一部分。

前后端和数据库的比例大致为 n:1:1 的关系，所以当用户量大的程序，多数操作应当放在前端中处理，这是现在 mvvm 被称为主流的原因，后台主要统筹管理总体数据或者对重要的流水数据处理，并且需要提供大量的 api 供前端获取数据，这样能大量缓解数据库的压力。

获取源码

☁

 更多精彩 

点击下方图片即可阅读

欢迎分享云开发实战经验与技术故事或加入技术交流群~

云开发

Tencent CloudBase

      点击在看让更多人发现精彩

  点这里获取源码