三、登录功能
1、在pages/me/me.wxml文件中添加登录按钮
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登录</button>
2、在me.js文件中添加onGotUserInfo方法和userInfo变量
Page({ data: { userInfo:{} }, onGotUserInfo: function (e) { this.setData({ userInfo: e.detail.userInfo }) console.log("userInfo", this.data.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文件中的代码如下
const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() return { openid: wxContext.OPENID, } }
重要！！！云函数修改好了之后，一定要右键点击云函数，选择创建并部署（或者上传并部署）出现部署成功的弹窗，修改才会生效
很多人会忘记，只要修改了就有重新上传部署，才能看到修改后的效果
3、接下来来到pages/me/me.js文件，调用云函数，还是在onGotUserInfo方法中使用wx.cloud.callFunction调用login云函数
Page({ data: { userInfo:{}, //新加一个openid变量，保存获取到的openid字段 openid:"" }, onGotUserInfo: function(e){ //将this对象保存到that中 const that = this wx.cloud.callFunction({ name: 'login', success: res => { console.log('云函数调用成功') that.setData({ openid: res.result.openid, userInfo: e.detail.userInfo }) console.log("userInfo", this.data.userInfo) console.log("openid", this.data.openid) }, fail: err => { console.error('[云函数] [login] 调用失败', err) } }) } })
这样就获取到了用户信息还有openid，接下来，我们来将获取到的用户信息展示出来，并隐藏登录按钮
<!-- 通过openid来判断用户是否登录 如果openid字段为空，说明没有登录，显示登录按钮 --> <view wx:if="{{!openid}}"> <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登录</button> </view> <!-- 如果openid不为空，就说明用户登录了 读取用户昵称和用户头像显示到页面上 --> <view class="uploader-container" wx:if="{{openid}}"> <image class="image" src="{{userInfo.avatarUrl}}"></image> <view class='name'>{{userInfo.nickName}}</view> </view>
再来到me.wxss文件中加个样式
.image { width: 100px; height: 100px; margin: 0 auto; display: block; padding-top:20px; } .name { text-align: center; padding-top:10px; } button{ background: #EA5149; width: 60%; margin-top: 100px; color: #ffffff; }
登录之后页面的显示如下：
4、保持用户的登录状态
现在每次刷新，获取到的用户信息就又没有了，我们想要保持用户的登录状态，就需要获取到用户信息后，将用户信息保存到缓存当中，这样刷新页面之后直接检查缓存中是否有用户信息就可以判断是否登录过，而不是一次次的请求后端重新获取用户信息
来到me.js文件中，修改onGotUserInfo方法，在success中添加代码
success: res => { console.log('云函数获取成功', res.result.openid) that.setData({ openid: res.result.openid, userInfo: e.detail.userInfo }) //需要添加的代码 //将openid字段加入到userInfo变量中 this.data.userInfo.openid = this.data.openid //打印一下当前userInfo的信息，检查是否有openid字段 console.log("userInfo", this.data.userInfo) //将userinfo信息保存到缓存中 wx.setStorageSync('ui', this.data.userInfo)
然后再添加onLoad小程序生命周期函数，获取缓存中的用户信息，页面加载时触发。一个页面只会调用一次
onLoad: function (options) { const ui = wx.getStorageSync('ui') this.setData({ userInfo: ui, openid:ui.openid }) }
这样我们再刷新页面，会自动获取用户信息，不需要重复登录了
四、点击按钮生成记录数据（云数据库的插入和查询）
1、完善首页样式
首页主要就是创建两个按钮，并显示当前的加减的数值，将pages/index/index.wxml文件中的代码清空，加上+1和-1两个按钮
<view class="container"> <view class="right button">+ 1</view> <view class="left button">- 1</view> </view>
再来将pages/index/index.wxss文件的代码清空，粘贴上下面的代码
.button{ width: 70px; height: 70px; line-height:70px; border-radius: 20%; border: none; text-align:center; font-size: 25px; color:#FFFFFF; font-weight:bold; margin-top:50px; } .right{ background:#EA5149; float: right; } .left{ background:#feb600; }
现在保存文件看一下效果，可以看到上面有一个空白的间隔，
我们来到app.wxss文件中，将padding: 200rpx 0;这个样式去掉，再保存样式就正常了
2、实现点击首页的加减按钮，在控制台中打印出加减的信息
在pages/index/index.wxml文件中的两个按钮上面添加data-add=“1” bindtap=“addLog” 方法
<view class="right button" data-add="1" bindtap="addLog">+ 1</view> <view class="left button" data-add="-1" bindtap='addLog'>- 1</view>
在两个按钮，这个要注意addLog传参不能这样写addLog(1)，参数需要写在前面data-add中，其中add是我们自己定义的，换成别的单词也可以
再来到pages/index/index.js文件中，清空原先的代码，并创建addLog方法
Page({ //event就是我们通过data-add传递的参数对象 addLog(event){ //传递的参数event.currentTarget.dataset.add这样来获取 const add = event.currentTarget.dataset.add console.log("add", add) } })
现在点击加减按钮，在控制台中已经可以打印出add的数字， 接下来我们将这个数据插入到数据库中
3、向数据库中添加加减记录数据
点击微信开发者工具中上面的云开发按钮，来到云开发后台，需要创建数据库集合logs
集合创建完成之后，点击权限设置，将数据记录的权限更改为【所有用户可读，仅创建者可读写】
// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() // 云函数入口函数 exports.main = async (event, context) => { try { return await db.collection('logs').add({ //event是从前端传递过来的参数对象，我们后面会在pages/index/index.js文件中的addLog方法中调用云函数createlog时，传递add、date、openid这些参数 data: { add: event.add, date:event.date, openid:event.openid } }) }catch(e){ //插入数据错误 console.log(e) } }
再来到cloud云开发文件中创建一个云函数createlog，在cloud/createlog/index.js文件中，实现往logs数据表中插入一条记录的功能
修改完成云函数createlog之后，不要忘记部署函数，右键点击这个云函数，选择【创建并部署：云端安装依赖】选项
接下来编辑pages/index/index.js文件的addlog方法，调用云函数createlog，并传递add、date、openid这三个参数
addLog(event){ const add = event.currentTarget.dataset.add console.log("add", add) //需要添加的部分 const that = this const ui = wx.getStorageSync('ui') //如果缓存中没有用户信息，就跳转到我的页面 if (!ui.openid){ wx.switchTab({ url: '/pages/me/me', }) }else{ //调用云函数createlog wx.cloud.callFunction({ name: "createlog", data: { add: add, date: Date.now(), openid: ui.openid }, success: function (res) { console.log(res) }, fail: function (res) { console.log(res) } }) } },
来测试一下，在首页点击加减按钮，就会在数据库中插入数
这样首页功能就完成了，接下来我们来将插入的这些数据读取出来，展示在logs日志页面中
