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

"cloudfunctionRoot": "cloud/",

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      //env环境应该替换成自己的环境id
      //traceUser将用户访问记录到用户管理中，在控制台中可以看到访问用户的信息，我们一般将他设置为true
      wx.cloud.init({
        env: 'test-59478a',
        traceUser: true
      })
    }
  }
})

"navigationBarBackgroundColor": "#EA5149",
"navigationBarTitleText": "猫宁一",

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/binggan.png",
        "selectedIconPath": "image/binggan-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "image/danhuang.png",
        "selectedIconPath": "image/danhuang-active.png",
        "text": "日志"
      },
      {
        "pagePath": "pages/me/me",
        "iconPath": "image/huasheng.png",
        "selectedIconPath": "image/huasheng-active.png",
        "text": "我的"
      }
    ]
  },

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

Page({
  data: {
    userInfo:{}
  },
  onGotUserInfo: function (e) {
    this.setData({
      userInfo: e.detail.userInfo
    })
    console.log("userInfo", this.data.userInfo)
  },
})

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

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    //需要从前端传过openid数据，通过openid字段来获取日志信息
    return await db.collection('logs').where({
     openid: event.openid
    }).get()
  } catch (e) {
    //插入数据错误
    console.log(e)
  }
}

//加载util.js文件，用来格式化日期
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  getlogs:function(){
    //从缓存中获取用户信息
    const ui = wx.getStorageSync('ui')
    //如果缓存中没有用户信息，就跳转到我的页面
    if (!ui.openid) {
      wx.switchTab({
        url: '/pages/me/me',
      })
    }else{
      const that = this
      wx.cloud.callFunction({
        name: "getlogs",
        data: {
          openid: ui.openid
        },
        success: function (res) {
          console.log("ni", res)
          that.setData({
            logs: res.result.data.map(log => {
              var date = util.formatTime(new Date(log.date))
              log.date = date
              return log
            })
          })
          console.log("logs", that.data.logs)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    }
  },
  //通过onShow生命周期函数，调用getlogs方法
  //这样每次切换到日志页面，都会调用getlogs方法
  //在首页点击加减按钮后，切换到日志页面，新增的日志记录就会自动更新，提高用户体验
  onShow:function(){
    this.getlogs()
  }
})

<block wx:for="{{logs}}" wx:key="key">
  <view class="log-item">
    日期：{{item.date}} 分数：{{item.add}}
  </view>
</block>

.log-item {
  text-align: left;
  padding: 10px 10px 0 0;
}