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

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

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

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

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

谢谢

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180920G0C54200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券