- ArthurSlog
- SLog-76
Year·1
Guangzhou·China
- September 17th 2018
甚愛必大費 多藏必厚亡 故知足不辱 知止不殆 可以長久
開發環境MacOS(High Sierra 10.13.5)
需要的信息和信息源:
前言
微信開發者工具版本: v 1.02.1809111
”雲開發“ 封裝好了一些常用的業務邏輯,提供了以下方面的相關API供開發者使用:
雲函數
數據庫
存儲管理
開始編碼
現在先把微信開發工具更新至最新(1.02.1809101),有部分開發人員在微信社區反饋更新之後沒有看到“雲開發”的按鈕
解決辦法:點擊檢查更新,等待更新完全完成之後重啓開發工具
重點:雲開發方式需要appid,請準備好
當前雲開發模版的微信小程序文件結構如下:
cloudfunctions
| - login
| - index.js
| - package.json
| - package-lock.json
| - arthurSlog_getInfo
| - index.js
| - package.json
| - package-lock.json
| - arthurSlog_methodAdd
| - index.js
| - package.json
| - package-lock.json
miniprogram
| - images
| - code-db-inc-dec.png
| - code-db-onAdd.png
| - code-db-onQuery.png
| - code-db-onRemove.png
| - code-func-sum.png
| - console-entrance.png
| - create-collection.png
| - pages
| - addFunction
| - addFunction.js
| - addFunction.json
| - addFunction.wxml
| - addFunction.wxss
| - chooseLib
| - chooseLib.js
| - chooseLib.json
| - chooseLib.wxml
| - chooseLib.wsxx
| - databaseGuide
| - databaseGuide.js
| - databaseGuide.json
| - databaseGuide.wxml
| - databaseGuide.wxss
| - deployFunctions
| - deployFunctions.js
| - deployFunctions.json
| - deployFunctions.wxml
| - deployFunctions.wxss
| - index
| - index.js
| - index.wxml
| - index.wxss
| - user-unlogin.png
| - storageConsole
| - storageConsole.js
| - storageConsole.json
| - storageConsole.wxml
| - storageConsole.wxss
| - userConsole
| - userConsole.js
| - userConsole.json
| - userConsole.wxml
| - userConsole.wxss
| - style
| - guide.wxss
| - app.js
| - app.json
| - app.wxss
README.md
project.config.json
- 本次來玩一下數據庫,首先在更新主頁面代碼如下:
Client:
miniprogram/pages/index/index.wxml
<!--index.wxml-->
<view class="container">
<!-- 用戶 openid -->
<view class="userinfo">
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" class="userinfo-avatar" style="background-image: url({{avatarUrl}})"></button>
</view>
<!-- 操作數據庫 -->
<view class="uploader">
<button class="userinfo-nickname" bindtap="arthurSlog_readingBook">我要讀書(每次加1點智力值)</button>
</view>
<view class="showOpenid">
<text class="textOpenid" wx:if="{{user_dbFlag}}">{{user_nickName}} 的IQ值:{{page_iq}}</text>
</view>
<!-- 獲取 openid -->
<view class="uploader">
<button class="userinfo-nickname" bindtap="arthurSlog_getInfo">點擊獲取 openid</button>
</view>
<view class="showOpenid">
<text class="textOpenid" wx:if="{{openid}}">openid:{{openid}}</text>
</view>
<!-- 返回兩個對象之和 -->
<view class="uploader">
<button class="userinfo-nickname" bindtap="arthurSlog_methodAdd">點擊返回兩個對象之和</button>
</view>
<view class="showOpenid">
<text class="textOpenid" wx:if="{{sumResult}}">8 + 8 = {{sumResult}}</text>
</view>
<!-- 上傳圖片 -->
<view class="uploader">
<button class="userinfo-nickname" bindtap="arthurSlog_uploadImg">上傳圖片</button>
</view>
<!-- 顯示圖片 -->
<view>
<image class="img" wx:if="{{imagePath}}" src="{{imagePath}}" mode="aspectFit"></image>
</view>
</view>
可以看到,這次把一些對象的名稱進行了更新,以便簡潔
來看一下 js文件裏 與頁面交互的所有對象
Client: miniprogram/pages/index/index.js
data: {
avatarUrl: './user-unlogin.png',
userInfo: {}, // 用戶信息
logged: false, // 用來判斷用戶是否已經授權過了
cloudPath: '', // 雲端存放文件的路徑
imagePath: '', // 本地圖片文件的路徑
openid: '',
sumResult: '', // 雲端求和的結果
page_iq: '', // 頁面上顯示的iq值
user_nickName: '', // 微信名
user_dbFlag: false, // 判斷標誌:判斷用戶在雲端數據庫是否存在數據
}
之前,我們一共寫了三個新函數:
arthurSlog_getInfo (獲取用戶 appId 和 openId的數據)
arthurSlog_methodAdd (獲取兩個數相加的和)
arthurSlog_uploadImg (向雲端上傳圖片,並在本地顯示出來)
此次,要編寫一個新的函數 arthurSlog_readingBook
同時,拓展 onLoad 和 onGetUserInfo 這兩個函數
先來看新函數 arthurSlog_readingBook:
Client: miniprogram/pages/index/index.js
arthurSlog_readingBook: function() {
const this_ = this
// 驗證是否已經授權
if (app.globalData.logged) {
// 驗證雲端是否存在用戶數據
const db = wx.cloud.database()
const _ = db.command
// 讀取用戶數據,並渲染在頁面上
db.collection('Users').where({
_openid: _.eq(app.globalData.openid) // 填入當前用戶 openid
}).get().then(res => {
console.log("查詢數據庫")
if (!res.data) {
console.log("雲端數據庫沒有返回數據")
console.log("用戶在數據庫沒有數據,現在爲用戶創建數據庫")
// 創建用戶數據
db.collection('Users').add({
// data 字段表示需新增的 JSON 數據
data: {
userName: app.globalData.user_nickName,
userDate: db.serverDate(),
IQ: '10'
}
})
.then(res => {
console.log("用戶數據創建成功")
console.log(res)
}).catch(console.error)
app.globalData.user_dbFlag = true
} else if (res.data) {
console.log("雲端數據庫成功返回數據")
console.log('更新數據庫')
console.log('當前的全局_id值是: ' + app.globalData._id)
app.globalData.IQ = res.data[0].IQ
// 如果該用戶有數據
// 頁面上IQ的值加1
// 數據庫IQ的值加1
db.collection('Users').doc(app.globalData.id).update({
data: {
IQ: _.inc(1)
}
}).then(res => {
console.log('成功更新數據庫')
console.log(res)
this_.setData({
page_iq: ++app.globalData.IQ
})
})
}
})
} else if (!app.globalData.logged) {
// 彈出提示框,顯示“請點擊頭像授權”
wx.showToast({
icon: 'none',
title: '請先點擊左上角允許授權',
})
}
}
上面的代碼,實現了每次點擊 “我要讀書” 按鈕之後,iq值自增1(也就是每點一次按鈕qi加1)
怎麼實現的,看一下代碼可知:
當用戶點擊 “我要學習” 按鈕的時候,判斷用戶是否已經授權?
已經授權 => 向雲端數據庫獲取用戶數據; 未授權 => 彈出提示框,提示用戶點擊左上角授權
判斷獲取的數據庫是否返回數據?
成功返回不爲空的數據 => 把獲取到的數據(iq值)更新至頁面,然後更新數據庫的值(數據庫的iq值自增1); 成功返回爲空的數據 => 爲用戶創建數據,然後更新前端的iq值
基本步驟如上,其中1、2步是 arthurSlog_readingBook函數執行的
而步驟3、4中,步驟3 有一個需要點擊授權的環節,這由 onGetUserInfo函數來負責:
Client: miniprogram/pages/index/index.js
// 點擊彈出“微信授權” 窗口
// 用戶點擊“允許”,允許開發者獲得用戶的公開信息(暱稱、頭像等)
onGetUserInfo: function(e) {
const this_ = this
if (!this.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo,
user_nickName: e.detail.userInfo.nickName
})
app.globalData.openid = e.detail.userInfo.openId
// 需要先獲得用戶信息才能查詢數據庫
// 驗證雲端是否存在用戶數據
const db = wx.cloud.database()
// 讀取用戶數據,並渲染在頁面上
db.collection('Users').where({
_openid: app.globalData.openid // 填入當前用戶 openid
}).get().then(res => {
if (res.data[0] != null) {
// 如果用戶存在數據
// 拉取用戶的IQ數據
this_.setData({
page_iq: res.data[0].IQ,
user_dbFlag: true
})
} else {
// 創建用戶數據
db.collection('Users').add({
// data 字段表示需新增的 JSON 數據
data: {
userName: app.globalData.user_nickName,
userDate: db.serverDate(),
IQ: 10,
id: app.globalData.openid
}
})
.then(res => {
this_.setData({
page_iq: '10',
user_dbFlag: true
})
// 添加新表成功之後,打印數據庫的新用戶信息
console.log(res)
app.globalData._id = res._id
})
this_.setData({
user_dbFlag: true
})
}
})
app.globalData.logged = true
}
}
因爲授權之後重新打開小程序,不需要再授權
所以,在這裏,需要拓展一下 onload函數
這樣,在打開小程序的時候,客戶端自動向雲端數據庫獲取用戶數據(iq的值)
然後,將獲取到的iq值 更新值頁面:
Client: miniprogram/pages/index/index.js
// 小程序頁面打開時,默認執行的函數
onLoad: function() {
if (!wx.cloud) {
wx.redirectTo({
url: '../chooseLib/chooseLib',
})
return
}
const this_ = this
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權,可以直接調用 getUserInfo 獲取頭像暱稱,不會彈框
wx.getUserInfo({
success: res => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo,
user_nickName: res.userInfo.nickName,
logged: true,
user_dbFlag: true
})
app.globalData.logged = true
app.globalData.user_dbFlag = true
app.globalData.openid = res.userInfo.openid
const db = wx.cloud.database()
const _ = db.command
// 讀取用戶數據,並渲染在頁面上
db.collection('Users').where({
_openid: _.eq(app.globalData.openid) // 填入當前用戶 openid
}).get().then(res => {
console.log(res.data)
if (res.data != null) {
// 如果用戶存在數據
// 拉取用戶的IQ數據
this_.setData({
page_iq: res.data[0].IQ,
user_dbFlag: true
})
} else {
console.log("拉取雲端數據出錯")
}
})
}
})
}
}
})
}
現在,請保存好更新過代碼的文件
接着,在模擬器裏對各個按鈕進行測試
點擊“我要讀書”,會彈出窗口提示你“請先點擊左上角進行授權”
點擊“左上角”,點擊”允許“授權,現在會在“我要讀書”按鈕的下方出現“XXX的IQ值:10”
已經允許授權之後,點擊“我要讀書”,每點擊一次,下方出現的IQ值會加1
點擊“點擊獲取openid”,會在下方得到你的 openid
點擊“返回兩個對象之和”,會在下方得到對象的和
點擊“上傳圖片”,選擇圖片並“打開後”,圖片會上傳至雲端,同時在頁面上顯示出來
至此,我們使用小程序雲開發實現了小程序端和雲端數據庫的交互。