1. 概述
不管是在現實生活還是當今遊戲中，各式各樣的排名層出不窮。如果我們做好一款遊戲，卻沒有實現排行榜，一定是不完美的。排行榜不僅是玩家了解自己實力的途徑，也是遊戲運營刺激用戶留存的一種途徑。在微信小遊戲中普遍存以下兩種排名
其中好友的排名，需要通過微信子域實現。在子域上下文中，只能調用微信提供相關的api，且數據傳輸只能進不能出。即使在子域中調用雲函數也不行。這個對數據很嚴格，開發略為複雜。但好處也很明顯
- 無需用戶確認授權就可實現排名
- 排名信息均為自己好友，刺激效果更明顯
儘管這樣，我們還是先實現世界排行。世界排行需要用戶授權。早期只需要調用wx.authorize就可以實現，現在很不穩定(好像廢棄了)。所以不得不通過生成一個授權按鈕來實現
2. 微信雲開發
微信小遊戲為開發者提供了一部分免費的雲環境。可以實現文件存儲，數據存儲以及通過雲函數實現服務端接口。開通方式也很簡單，這裏不做說明。既然要實現排名，優先選用雲函數來實現對應的api。要實現雲函數，需要在project.config.json文件中通過屬性cloudfunctionRoot指定雲函數目錄。由於，是通過cocoscretor開發，每次構建發布都會清空輸出內容。為了解決人肉複製粘貼，我們需要通過定製小遊戲構建模板實現微信小遊戲所有代碼的管理。小遊戲地心俠士構建模板如下
從圖中，可以看到獲取openid、獲取世界排名、保存用戶授權信息等雲函數都放在cocoscreator代碼環境中。這樣在開發完成后，通過cocoscreator構建發布，對應的雲函數也會一起打包過去
3. 實現世界排行
3.1 獲取玩家openid
首先在構建模板的cloud-functions文件件中，使用npm初始一個名為getOpenId的node項目。初始好以後，運行npm install wx-server-sdk@latest --save。這樣就建立好了一個雲函數的基本框架。
我們在index.js文件，輸入以下代碼
// author:herbert 464884492
// project:地心俠士 獲取用戶openid
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
調用雲函數時，上下文中便可以得到玩家openid和uninid。玩家進入遊戲就先調用此函數，得到玩家的openid用於後邊更新玩家數據和獲取世界排行的條件。
小遊戲端調用雲函數前，需要初始雲環境。因為採用定製構建模板，所以我們直接在模板的game.js文件末尾初始我的雲環境
// author:herbert 464884492
// 地心俠士 初始雲環境
....
wxDownloader.init();
window.boot();
//初始化雲調用
this.wx.cloud.init({
traceUser: true,
env: 'dxxs-dxxs'
});
...
後續調用雲函數中，第一步都是要獲取openid，這裏定義一個全局變量將其保存起來，調用方法如下
// author:herbert 464884492
// 地心俠士 玩家openid
private static openId: string = null;
private static initenv() {
return new Promise((resolve, reject) => {
if (!this.wx) reject();
//直接使用本地緩存
if (this.openId != null) resolve();
// 調用雲函數獲取
this.wx.cloud.callFunction({
name: 'getOpenId',
complete: res => {
this.openId = res.result.openid;
resolve();
}
});
});
}
3.2 動態生成授權按鈕
先看下地心俠士布局界面
上圖中可以看到，地心俠士虛擬了一個遊戲操作區域。玩家聚焦到世界排行時，需要渲染一個授權按鈕在確定的位置。需求很簡單，可考慮到移動端多分辨率，這個操作就變得複雜了。需要做屏幕適配。地心俠士採用自適應寬度的適配策略，配置如下圖
遊戲運行時獲取實際分辨率的寬度與設計的寬度相除，變可知道當前寬度變化比列，鍵盤容器九宮格使用了主鍵widget底部111px，高度161px。確定按鈕寬度105px
微信小遊戲以左上角為原點，通過top和left確定位置。然而，cocoscreator以左下角為原點，所以在計算top值時需要用屏幕寬度 – box上邊緣y坐標。適配代碼如下
// author:herbert 464884492
// 地心俠士 動態生成透明授權按鈕
initUserInfoButton() {
// 獲取設計尺寸
let desingSize: cc.Size = cc.view.getDesignResolutionSize();
// 獲取實際屏幕尺寸
let screenSize: cc.Size = cc.view.getFrameSize();
// 獲取寬度倍率
let widthRate = screenSize.width / desingSize.width;
// 獲取當前倍率下九宮格鍵盤實際高度
let halfKcHeight = 161 * widthRate / 2;
// 獲取當前倍率下確定按鈕實際寬度
let btnwidth = this.btnKeySuer.width * widthRate;
WxCloudFun.createUserinfoButton("",
// 確定按鈕中心點對應小遊戲left值 (屏幕寬度-確定按鈕實際寬度）/2
// 定義實際授權按鈕size為105*40，所以還必須加上對應的偏差值
// 以下代碼中left體現整體適配過程，不考慮中間過程可以直接使用
// (屏幕寬度-授權按鈕)/2 即可得到left值
screenSize.width / 2 - 52.5 * widthRate + (btnwidth - 105) / 2,
// Canvas 適配策略是 Fit Width,所以Canvas下邊沿不一定就是屏幕邊緣
// 通過111*widthRate得到具體下沿值，在加上虛擬鍵盤一半高度，可得到中心位置
// 由於微信原點在左上角，需要保持按鈕處於中心位置，坐標還需要上移一半按鈕高度
screenSize.height - (111 * widthRate + halfKcHeight + 20),
() => {
this.keyCode = cc.macro.KEY.r;
this.scheduleOnce(async () => {
this.dlgRank.active = true;
// 獲取排名數據
await this.getRankInfo();
}, 0);
});
}
3.3 獲取用戶頭像昵稱信息
經過上一步驟的適配操作，只要玩家聚焦到【世界排行】，地心俠士虛擬鍵盤的確定按鈕正上方會覆蓋一個透明的userInfoButton,玩家點擊確定就會喚起授權對話框，然後在對應的回調函數就可以完成用戶數據保存操作
// author:herbert 464884492
// 地心俠士 獲取玩家基本信息
public static createUserinfoButton(text: string, left: number, top: number, cb: Function) {
this.userInfoButton = this.wx.createUserInfoButton({
type: 'text',
text: text,
style: {
left: left,
top: top,
height: 40,
width: 105,
lineHeight: 40,
textAlign: 'center',
fontSize: 16,
backgroundColor: '#ff000000',// 透明
color: '#ffffff',
}
});
this.userInfoButton.hide();
this.userInfoButton.onTap((res) => {
// 將獲取到的用戶數據提交到雲端
this.wx.cloud.callFunction({
name: 'putUserinfo',
data: { ...res.userInfo, openid: this.openId }
});
this.hideUserInfoButton();
cb.call();
});
}
在代碼中，除了傳入玩家微信信息外。我還額外傳遞進入遊戲時就獲取的openid。正常情況下不需要的，因為，雲函數中天然會告訴你openid。不過，我們在後端使用了got獲取玩家頭像保存到雲端文件存儲中。引入此包后，後端就獲取不到openid了，相當奇怪。對應雲平台雲函數代碼如下
// author:herbert 464884492
// 地心俠士 雲函數保存玩家基本信息
const cloud = require('wx-server-sdk')
const got = require('got')
cloud.init()
// 雲函數入口函數
exports.main = async(event, context) => {
const {
nickName,
avatarUrl,
gender,
openid
} = event;
let wxContext = cloud.getWXContext();
// 如果後端拿不到openid就採用前端傳入的openid
wxContext.OPENID = wxContext.OPENID || openid;
const log = cloud.logger()
log.info({
tip: `正在請求頭像地址[${avatarUrl}]`
})
// 獲取頭像數據流
const stream = await got.stream(avatarUrl);
let chunks = [];
let size = 0;
const body = await (async() => {
return new Promise((res, reg) => {
stream.on('data', chunk => {
chunks.push(chunk)
size += chunk.length
log.info({
tip: `正在讀取圖片流信息:[${chunk.length}]`
})
})
stream.on('end', async() => {
const body = Buffer.concat(chunks, size)
log.info({
tip: `正在保存頭像文件:[${size}]`
})
res(body)
})
})
})()
//保存頭像到雲存儲
const {
fileID
} = await cloud.uploadFile({
cloudPath: `avatars/${wxContext.OPENID}.jpg`,
fileContent: body
})
// 添加或更新玩家信息到數據庫
const db = cloud.database()
const {
data
} = await db.collection("dxxs").where({
_openid: wxContext.OPENID
}).get()
const updateData = {
fileId: fileID,
nickName: nickName,
sex: gender == 1 ? '男' : '女',
avatarUrl: avatarUrl
}
if (data.length > 0) {
log.info({
tip: `正在修改數據庫信息:[${size}]`
})
await db.collection("dxxs").doc(data[0]._id).update({
data: updateData
})
} else {
log.info({
tip: `正在添加數據庫信息:[${size}]`
})
await db.collection("dxxs").add({
data: { ...updateData,
_openid: openid
}
})
}
return {
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID
}
}
3.4 獲取排行數據
保存完用戶數據后，通過一個回調函數，實現了玩家排名數據獲取。細心的朋友可以在前邊授權按鈕適配的章節看到await this.getRankInfo();這句代碼。後端雲函數就是一個簡單數據查詢。效果圖如下
從上圖可以看到，我實現了三個維度排名，需要在前端需要傳入排名字段。對應代碼如下
// author:herbert 464884492
// 地心俠士 獲取排名信息
public static async getWorldRanking(field: string = "level") {
const { result } = await this.wx.cloud.callFunction({
name: 'getWordRanking',
data: { order: field }
});
return result.ranks;
}
雲函數代碼如下
// author:herbert 464884492
// 地心俠士 雲函數返回排名信息
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
const db = cloud.database();
const {
order = "level"
} = event;
const openData = await db.collection("dxxs")
.orderBy(order, "asc")
.get()
const ranks = openData.data.map(item => {
return {
openid: item._openid,
[order]: item[order],
nickName: item.nickName,
fileId: item.fileId,
avatarUrl: item.avatarUrl
}
});
return {
ranks: ranks,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID
}
}
4. 總結
- 微信子域數據很嚴格，數據只進不出。調用雲函數也不行
- 雲函數中使用http請求，可能會得不到openid
- 屏幕適配知道定位原則，也可以很簡單
- avatarUrl通過Sprite現實頭像，需要設置安全域名
- 目前部分華為手機分享截屏出現黑屏使用canvas.toTempFilePath就可以解決
這裡有一個CoscosCreator遊戲開發群，歡迎喜歡聊技術的朋友加入
歡迎感興趣的朋友關注我的訂閱號“小院不小”，或點擊下方二維碼關注。我將多年開發中遇到的難點，以及一些有意思的功能，體會都會一一發布到我的訂閱號中
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※帶您來了解什麼是 USB CONNECTOR ?
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!
※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※教你寫出一流的銷售文案?
