1.界面展示

首先打开小程序，有三个页面：首页、日志、我的

先在我的页面，点击登录按钮，登录进来，会展示用户的微信头像和微信昵称

接下来来到首页，点击加减按钮，记录页面会同步产生点击的日志。

2.云开发初始化

（1）新建一个云开发的文件夹cloud

（2）在project.config.json文件中添加代码，指定云开发的文件为我们刚刚创建的cloud文件夹

（3）再来到app.js文件中用下面的代码代替原先的代码

保存了之后，这里cloud云开发文件后面的就会指定我们现在创建的lc428云开发环境，文件夹上面会有一个云的标志。

3.登录功能

1、在pages/me/me.wxml文件中添加登录按钮

2、在me.js文件中添加onGotUserInfo方法和userInfo变量

点击登录按钮，在控制台会打印出用户的信息，如下

但是现在获取到的信息中没有openid这个字段，openid是每个微信号的唯一标识，微信昵称，头像、地址这些都可能会改变，但是openId不会改变，我们要实现登录功能并识别客户，必须要获取到这个openid字段。

openid字段属于比较敏感的信息，我们需要从微信服务器中获取，这个就要用到我们的云函数了，在我们创建的cloud文件夹中创建一个云函数，右键–新建Node.js云函数，命名为login

可以看到他会默认帮我们创建两个文件，index.js和package.json配置文件，package.json文件一般不做操作，主要操作的就是index.js文件

打开index.js文件，默认帮我们写了一些代码，前面两行代码是每个云函数文件中必有的SDK插件是http请求处理插件，然后再init初始化

我们将不需要的代码删除一下，可以看到下面已经帮我们获取到了openid，我们将其他的删掉，只留下openid。最后login/index.js文件中的代码如下

云函数修改好了之后，一定要右键点击云函数，选择创建并部署（或者上传并部署）出现部署成功的弹窗，修改才会生效

3、接下来来到pages/me/me.js文件，调用云函数，还是在onGotUserInfo方法中使用wx.cloud.callFunction调用login云函数

这样就获取到了用户信息还有openid

接下来，我们来将获取到的用户信息展示出来，并隐藏登录按钮

再来到me.wxss文件中加个样式

登录之后页面的显示如下：

4、保持用户的登录状态

现在每次刷新，获取到的用户信息就又没有了，我们想要保持用户的登录状态，就需要获取到用户信息后，将用户信息保存到缓存当中，这样刷新页面之后直接检查缓存中是否有用户信息就可以判断是否登录过，而不是一次次的请求后端重新获取用户信息

来到me.js文件中，修改onGotUserInfo方法，在success中添加代码

然后再添加onLoad小程序生命周期函数，获取缓存中的用户信息，页面加载时触发。一个页面只会调用一次

这样我们再刷新页面，会自动获取用户信息，不需要重复登录了

4.云数据库的插入和查询

1、完善首页样式
首页主要就是创建两个按钮，并显示当前的加减的数值，将pages/index/index.wxml文件中的代码清空，加上+1和-1两个按钮

再来将pages/index/index.wxss文件的代码清空，粘贴上下面的代码

现在保存文件看一下效果

2、实现点击首页的加减按钮，在控制台中打印出加减的信息

在pages/index/index.wxml文件中的两个按钮上面添加data-add=“1” bindtap=“addLog” 方法

参数需要写在前面data-add中，其中add是我们自己定义的，换成别的单词也可以

再来到pages/index/index.js文件中，清空原先的代码，并创建addLog方法

现在点击加减按钮，在控制台中已经可以打印出add的数字， 接下来我们将这个数据插入到数据库中

3、向数据库中添加加减记录数据

点击微信开发者工具中上面的云开发按钮，来到云开发后台，需要创建数据库集合logs

集合创建完成之后，点击权限设置，将数据记录的权限更改为所有用户可读，仅创建者可读写

再来到cloud云开发文件中创建一个云函数createlog，在cloud/createlog/index.js文件中，实现往logs数据表中插入一条记录的功能

修改完成云函数createlog之后，不要忘记部署函数，右键点击这个云函数，选择上传并部署：云端安装依赖选项

接下来编辑pages/index/index.js文件的addlog方法，调用云函数createlog，并传递add、date、openid这三个参数

来测试一下，在首页点击加减按钮，就会在数据库中插入数据

这样首页功能就完成了，接下来我们来将插入的这些数据读取出来，展示在logs日志页面中

5.云数据库的读取

主要编辑pages/logs文件夹
先来创建一个云函数getlogs，并在cloud/getlogs/index.js文件中添加代码

再来到pages/logs/logs.js文件中创建getlogs方法调用getlogs云函数，并向云函数传递openid这个参数

通过onShow生命周期函数，调用getlogs方法
这样每次切换到日志页面，都会调用getlogs方法
在首页点击加减按钮后，切换到日志页面，新增的日志记录就会自动更新，提高用户体验

最后来到pages/logs/logs.wxml文件中添加代码遍历显示日志数据

在pages/logslogs.wxss文件中添加样式

最后看一下记录页面的效果