如何在微信群 PK 步數？他做的小程序，比微信運動更好用｜曉組織 10

知曉程序註：

「曉組織」是知曉程序推出的全新欄目。

每周，我們都會邀請優秀的小程序開發者，從產品/開發/運營等角度，分享他的小程序實戰經驗。如果你想成為「曉組織」的一員，請發送郵件至 bigbang@ifanr.com 給我們投稿，獻上你的投名狀。

這裡是「曉組織」的第 10 期。

本期的分享嘉賓是「即刻運動排行榜」的開發者龔乘偉。

大家好，我是龔乘偉。現就職於美的電商，是一名前端開發工程師，也是一名去年的應屆畢業生。

我從小就對互聯網充滿了無限好奇，現在仍保持對互聯網新技術的熱愛，生活中是個愛玩，愛健身的程序猿。

作為互聯網新人，我很榮幸在知曉程序（微信號 zxcx0101）分享自己獨立開發這款「即刻運動排行榜」小程序的心得。

在此，特別感謝在版本迭代優化的過程中，Lord 哥和組內同學的建議以及幫助。

「即刻運動排行榜」可以與微信群友進行步數 PK，還可以和群友並肩作戰組成聯盟，與其他群進行步數 PK。

主要功能：

• 群內動態：群內步數 PK/點贊數 PK。
• 群間動態：群間總步數 PK/平均步數 PK。
• 群設置：群頭像、昵稱、群健康步數以及群簡介。

亮點：

• 入口便捷化：從分享的小程序卡片進入或任意群，都可以直接參与 PK。
• 個性化設置：每個群均可設置專屬的頭像、昵稱、健康步數。

「即刻運動排行榜」小程序使用鏈接 https://minapp.com/miniapp/3199/

首先，介紹一下開發這款小程序的原因。

我始終認為，一個優秀的程序猿想要擁有敏捷的頭腦，首先得有一副健康的身體。

因此，我每天都會抽 1 個小時時間進行健身，慢跑是個人比較喜愛的運動，而本人很長時間的樂趣，就是霸佔微信運動封面，這種感覺爽爽噠~

微信運動的排行榜相信也有不少人玩過，時不時給感興趣的人點上個贊，表示朕已閱，也是一種社交。

但是！微信運動解決不了以下兩個痛點：

• 無法進行群內 PK，享受不了與群友同群競技的快感。
• 無法進行群間 PK，享受不了與群友並肩作戰的樂趣。

3. 靈感突現

我一直有在關注微信小程序的最新動態，對小程序持看好狀態，但是覺得目前小程序的使用場景一直沒有被激活。

小程序推出微信運動介面的第一時間，靈機一動，就想做一款步數有關的小程序，結合想要改進微信運動的部分，於是有了微信群+微信運動結合起來的靈感。

小程序提供的微信群的介面可用於獲取對應群的群 ID，主要在以下兩個場景獲取：

• 分享小程序到某個群聊時，可拿到 shareTicket，再通過 wx.getShareInfo 獲取群 ID。
• 用戶從群聊的小程序卡片進入時，可拿到 shareTicket，再通過 wx.getShareInfo 獲取群 ID。

這裡第二個場景，「王者榮耀群排行」就有應用到。而拿到了群 ID 之後，就可以對已有 API 進行一些結合。

「即刻運動排行榜」就結合了微信運動 API，通過 wx.getWeRunData 獲取其微信運動步數。

因為用戶的微信運動數據是個人隱私數據，小程序要求必須在用戶進行授權後才能獲取，所以最好要考慮到用戶拒絕授權的場景。

這裡可以利用新介面 wx.authorize+wx.openSetting 進行兼容處。

wx.authorize 介面的功能是：部分介面需要獲得同意後才能調用。

此類介面調用時，如果用戶未授權過，會彈窗詢問用戶，用戶點擊同意後方可調用介面。如果用戶點了拒絕，則短期內調用不會出現彈窗，而是直接進入 fail 回調。

於是，我們就可以在 fail 回調里，通過調用 wx.openSetting 來引導用戶去授權。這樣一來，萬事俱備只欠東風，一款專屬於群的微信運動排行榜萌芽就這樣誕生了。

作為行動派，說干就干，端午節的前三天啟動開發，端午節後提交第一版審核，之後的一周內，優化了兩個版本，到 6 月 5 號，較為完善的線上版本誕生啦~撒花~~

從去年 10 月末微信推出小程序後，公司馬上成立了小程序項目組，作為項目組成員，從頭到尾跟進了「美的官方商城」小程序：從最初的產品設計到開發、到後期的測試，一直到最後的發布。

這過程不僅激發了我對小程序的興趣，也讓我積累了了一些經驗，下面 PO 幾張成果圖~

2. mvvm 框架

在工作過程中，期間接手過一些 vue.js 的項目，對 mvvm 框架比較熟悉，而小程序也採用了 mvvm 思想，因此採用小程序作為開發平台更易出成果。

前段時間，小程序 API 推出了兩大新能力：

• 獲取用戶微信運動步數。
• 獲取群 ID。

結合這兩大新能力，能夠打造出現有 app 無法滿足的用戶痛點。

關注「知曉程序」微信公眾號，在後台回復「新能力」，獲取小程序新能力全解讀。

在群設置里選擇圖片後， 標籤的 background-image 在部分 iOS 真機上無法顯示 wxfile: 臨時路徑的圖片，但 image 可以顯示這種臨時路徑，卻不能正常顯示 http: 鏈接的圖片。

為了解決這個問題，我採取了一種兼容的方式，設定了一個標記變數，用 wx:if 來切換，如果是臨時路徑則用 image 來顯示，否則用 view 來顯示，如果有更優的方案請告訴我~

iOS 在滑動列表的過程中，部分機型會卡頓，加上 -webkit-overflow-scrolling: touch; 屬性得以解決。

在這裡有個坑就是從單聊的小程序卡片進來獲取到的 scene 值也是 1044 與群聊卡片相等，沒法做場景的區分。

最後，只好在 wx.getShareInfo 的 fail 分支里做出相應處理。

突然想到一句很土的話，有人就有江湖。這裡我想說，有用戶就有場景。

其實群 ID 介面還有很多場景可以去發掘。

關注「知曉程序」微信公眾號，在後台回復「點評」，獲取大眾點評點餐小程序開發全教程。

歷史總步數成就解鎖、個人/群運動曲線記錄、PK 成就解鎖、競技擂台戰等玩法所需要的技術支持，正在不斷探索中。

最後的最後，要謝謝支持「即刻運動排行榜」這款小程序的用戶們，作為個人興趣使然開發的小程序，從最初的 v1.0.1 版到現在的 v1.0.4 版，開發歷經 15 天。

截止到 6.28，整整上線一個月，現在已經累計訪問次數近 6 萬，累計用戶數近 1 萬，分享次數日均近 200 次/天。

也同樣因為是個人項目，也存在著許多不足和不完善，現在的最新版已接入客服功能，希望大家有空多進來看看，誠心歡迎一切吐槽和建議！

也可以聯繫我的私人微信號：gcwfreedom，我在這等你喲~~

在產品迭代上，我也在研究，如何將小程序現有能力最大化地與場景有機結合，敬請期待。

關於小程序的未來：我想說，短期被高估，長期被低估，場景無處不在，只待你的發掘！

「即刻運動排行榜」小程序使用鏈接 https://minapp.com/miniapp/3199/

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！