Slog76_用一个简单的游戏演示与数据库的交互

ArthurSlog

SLog-76

Year·1

Guangzhou·China

September 17th 2018

ArthurSlog Page

GitHub

NPM Package Page

掘金主页

简书主页

segmentfault

甚爱必大费 多藏必厚亡 故知足不辱 知止不殆 可以长久

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

小程序官方文档

小程序端API文档（客户端）

云端API文档（服务端）

前言

云函数

数据库

存储管理

开始编码

现在先把微信开发工具更新至最新（1.02.1809101），有部分开发人员在微信社区反馈更新之后没有看到“云开发”的按钮

解决办法：点击检查更新，等待更新完全完成之后重启开发工具

重点：云开发方式需要appid，请准备好

当前云开发模版的微信小程序文件结构如下：

本次来玩一下数据库，首先在更新主页面代码如下：

Client：

miniprogram/pages/index/index.wxml

可以看到，这次把一些对象的名称进行了更新，以便简洁

来看一下 js文件里 与页面交互的所有对象

Client： miniprogram/pages/index/index.js

之前，我们一共写了三个新函数：

arthurSlog_getInfo （获取用户 appId 和 openId的数据）

arthurSlog_methodAdd （获取两个数相加的和）

arthurSlog_uploadImg （向云端上传图片，并在本地显示出来）

此次，要编写一个新的函数 arthurSlog_readingBook

同时，拓展 onLoad 和 onGetUserInfo 这两个函数

先来看新函数 arthurSlog_readingBook：

Client： miniprogram/pages/index/index.js

上面的代码，实现了每次点击 “我要读书” 按钮之后，iq值自增1（也就是每点一次按钮qi加1）

怎么实现的，看一下代码可知：

当用户点击 “我要学习” 按钮的时候，判断用户是否已经授权？

已经授权 => 向云端数据库获取用户数据； 未授权 => 弹出提示框，提示用户点击左上角授权

判断获取的数据库是否返回数据？

成功返回不为空的数据 => 把获取到的数据（iq值）更新至页面，然后更新数据库的值（数据库的iq值自增1）; 成功返回为空的数据 => 为用户创建数据，然后更新前端的iq值

基本步骤如上，其中1、2步是 arthurSlog_readingBook函数执行的

而步骤3、4中，步骤3 有一个需要点击授权的环节，这由 onGetUserInfo函数来负责：

Client： miniprogram/pages/index/index.js

因为授权之后重新打开小程序，不需要再授权

所以，在这里，需要拓展一下 onload函数

这样，在打开小程序的时候，客户端自动向云端数据库获取用户数据（iq的值）

然后，将获取到的iq值 更新值页面：

Client： miniprogram/pages/index/index.js

现在，请保存好更新过代码的文件

接着，在模拟器里对各个按钮进行测试

点击“我要读书”，会弹出窗口提示你“请先点击左上角进行授权”

点击“左上角”，点击”允许“授权，现在会在“我要读书”按钮的下方出现“XXX的IQ值：10”

已经允许授权之后，点击“我要读书”，每点击一次，下方出现的IQ值会加1

点击“点击获取openid”，会在下方得到你的 openid

点击“返回两个对象之和”，会在下方得到对象的和

点击“上传图片”，选择图片并“打开后”，图片会上传至云端，同时在页面上显示出来

至此，我们使用小程序云开发实现了小程序端和云端数据库的交互。

如果你喜欢我的文章 欢迎点赞 留言

谢谢