小程序雲開發基礎搭建及部署初體驗

註冊略

新建小程序

 開通雲開發功能

 新建cloud文件夾

 指定雲函數目錄

 雲服務註冊

//app.js
App({
  onLaunch: function () {
    wx.cloud.init({
      env: '你的雲環境ID',
      traceUser: true
    })
  }
})

新增頁面

pages中新建頁面目錄，並新建頁面

 添加images目錄及tabbar圖標

設置導航欄

{
  "pages": [
    "pages/index/index",
    "pages/me/me",
    "pages/list/list"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "vczhHu",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "selectedColor": "#FF9900",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home_a.png"
      },
      {
        "pagePath": "pages/list/list",
        "text": "logs",
        "iconPath": "images/list.png",
        "selectedIconPath": "images/list_a.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "images/me.png",
        "selectedIconPath": "images/me_a.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

 

實現登錄功能並緩存信息

登錄功能在“我的”頁面實現，可以將該頁面路由前置方便調試

 頁面實現

<!--pages/me/me.wxml-->
<view wx:if="{{!openid}}">
  <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登錄</button>
</view>
<view wx:else class="me-container">
  <image class="avatar-img" src="{{userinfo.avatarUrl}}"></image>
  <view class="name">{{userinfo.nickName}}</view>
</view>

新建雲函數

 

上傳並部署 

 邏輯實現

// pages/me/me.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    userinfo: {},
    openid: ""
  },
  onGotUserInfo: function (e) {
    const self = this
    wx.cloud.callFunction({
      name: "login",
      success: res => {
        self.setData({
          openid: res.result.openid,
          userinfo: e.detail.userInfo
        })
        self.data.userinfo.openid = self.data.openid
        wx.setStorageSync("userinfo", self.data.userinfo)
      },
      fail: res => {
        console.log('err', res.errMsg)
      }
    })
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    const userInfo = wx.getStorageSync("userinfo")
    this.setData({
      userinfo: userInfo,
      openid: userInfo.openid
    })
  }
})

生成log數據（雲數據庫插入）

頁面實現及事件綁定

<!--index.wxml-->
<view class="container">
  <view bindtap="addLog" data-add="1">+1</view>
  <view bindtap="addLog" data-add="-1">-1</view>
</view>

雲數據庫新建集合

 設置雲數據庫權限

 新建創建log的雲函數

cloud/createlog/index.js 

// 雲函數入口文件
const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()
// 雲函數入口函數
exports.main = async (event, context) => {
  try {
    const { add, date, openid } = event
    return await db.collection('logs').add({
      data: {
        add,
        date,
        openid
      }
    })
  } catch (e) {
    console.log(e)
  }
}

邏輯實現

//index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },
  addLog(e) {
    const add = e.currentTarget.dataset.add
    const userInfo = wx.getStorageSync("userinfo")
    if (!userInfo.openid) {
      wx.switchTab({
        url: '/pages/me/me',
      })
    } else {
      wx.cloud.callFunction({
        name: "createlog",
        data: {
          add,
          date: Date.now(),
          openid: userInfo.openid
        }
      })
    }
  }
})

數據獲取及展示

頁面實現

<!--pages/list/list.wxml-->
<block wx:for="{{logs}}" wx:key="key">
  <view>Time：{{item.date}} Content：{{item.add}}</view>
</block>

新建log獲取雲函數

 邏輯實現

// pages/list/list.js
const util = require('../../utils/util.js')
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    logs: []
  },
  getlogs: function () {
    const self = this
    const userInfo = wx.getStorageSync("userinfo")
    if (!userInfo.openid) {
      wx.switchTab({
        url: '/pages/me/me',
      })
    } else {
      wx.cloud.callFunction({
        name: "getlogs",
        data: {
          openid: userInfo.openid
        },
        success: res => {
          self.setData({
            logs: res.result.data.map(log => {
              const date = util.formatTime(new Date(log.date))
              log.date = date
              return log
            })
          })
        },
        fail: res => {
          console.log(res.errMsg)
        }
      })
    }
  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
    this.getlogs()
  }
})