【2020云开发+源码】30分钟创建并上线微信小程序实战项目 | 零成本 | 云数据库 | 云函数

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登录</button>

const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    openid: wxContext.OPENID,
  }
}

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字段为空，说明没有登录，显示登录按钮 -->
<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>

.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;
}

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: function (options) {
  const ui = wx.getStorageSync('ui')
  this.setData({
    userInfo: ui,
    openid:ui.openid
  })
}

<view class="container">
  <view class="right button">+ 1</view>
  <view class="left button">- 1</view>
</view>

.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;
}

<view class="right button" data-add="1" bindtap="addLog">+ 1</view>
<view class="left button" data-add="-1" bindtap='addLog'>- 1</view>

Page({
  //event就是我们通过data-add传递的参数对象
  addLog(event){
    //传递的参数event.currentTarget.dataset.add这样来获取
    const add = event.currentTarget.dataset.add
    console.log("add", add)
  }
})

// 云函数入口文件
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)
  }
}

  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)
        }
      })
    }
  },