注冊略
建立小程式
開通雲開發功能
建立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" 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()
}
})