前言
作為小程式入門系列第二篇，這次分享絕對乾貨拉滿，直接開源一個線上已經在執行的個人小程式，通過閱讀原始碼，學習如何利用騰訊雲搭建自己的個人小程式。
原始碼，歡迎 star~
專案介紹
拼詞樂鬥是一款類似 H5 遊戲的小程式，玩家需要在 10s 內根據單詞的釋義，將順序錯亂的字母拼成一個完整的單詞，這是最初的核心設計理念，但是後來覺得，這樣的遊戲太枯燥，於是就加入了音樂的概念，讓使用者在拼詞的過程中可以聽到音樂，這樣加大了趣味性，如果只是做一個單機版的小程式，這就夠了，但是，我又希望使用者在拼詞完成後可以看到自己的世界排名，或者至少可以看到排名靠前的人的歌曲挑戰分，於是，就必須要有一個後臺服務了，這時候，就開始考慮著手利用騰訊雲搭建自己的小程式後臺服務（現在也可以考慮使用騰訊雲服務，而不是自己搭建服務）。
專案結構：
├── README.md
├── client
│ ├── README.md
│ ├── build
│ ├── config
│ ├── dist
│ ├── index.html
│ ├── node_modules
│ ├── package.json
│ ├── project.config.json
│ ├── src
│ ├── static
│ └── yarn.lock
├── project.config.json
└── server
├── README.md
├── app.js
├── config.js
├── controllers
├── middlewares
├── mysql
├── node_modules
├── nodemon.json
├── package-lock.json
├── package.json
├── process.prod.json
├── qcloud.js
├── routes
├── tools
└── tools.md
複製程式碼client 小程式端
小程式開發選擇了 mpvue 框架，關於為什麼使用 mpvue 可以去我的第一篇文章裡面檢視。mpvue 生成的模板上稍作一些修改後，就可以使用了。
小程式頁面：
├── err-words 錯詞展示頁面
├── fight 拼詞遊戲頁面
├── friend-room 好友對戰房間（待完成）
├── index 首頁
├── intro 規則介紹頁
├── login 登入頁
├── personal-center 個人中心
├── rank 排行榜頁面
├── result 遊戲結果頁
└── songs 歌曲選擇頁
複製程式碼登入頁
使用官方提供的wafer2-client-sdk庫的登入功能實現小程式的使用者登入。
首頁
可以跳轉各個功能頁面，實現體力銀行的功能。
歌曲選擇頁
選擇歌曲，實現分享解鎖的功能（由於微信取消了分享的回撥，所以採用 hack 方式實現）
遊戲中頁面
實現拼詞的主要邏輯，包括首字母提示，兩秒提示，拼錯詞減時間條等等。
結果頁
展示遊戲結果，計算得分，更新本地歌曲分數記錄，破紀錄則呼叫上傳分數介面。
排行榜
呼叫後臺介面展示排行榜，可以切換歌曲
server 端
專案後臺框架來自Wafer2 快速開發 demo
使用到的技術棧 nodejs+koa+knex+mysql，對於前端 er 來說這是十分便捷的方式來開發後臺服務。
專案中，後臺服務新增了兩個介面：上傳分數，查詢排行榜。如何新增路由（介面）可以檢視 wafer 庫的相關文件，十分詳細的指導教程。
可以使用 wafer 提供的通道 tunnel 服務（websocket）實現多人對戰的邏輯（doing）。
controller:
.
├── index.js
├── login.js
├── message.js
├── rank.js
├── score.js
├── tunnel.js
├── upload.js
└── user.js
複製程式碼資源儲存
小程式開通後臺服務後，騰訊雲賬號下會有免費的物件儲存服務，所有的靜態資源可以放在裡面（比如歌曲，圖片）。
最後
如果你有興趣開發一個全棧的小程式，這份原始碼或許可以幫助你。
