kingdex

【微信小程式】王者圖鑑

靈感源自於今年很火紅的手遊——王者榮耀，偶爾用手機上網查找遊戲數據並不是很方便，於是有了開發「王者圖鑑」小程式的想法。從官網爬取數據，將英雄、裝備、銘文等資訊整合在微信小程式中，隨時隨地查詢遊戲資訊。

預覽

效果展示

線上體驗

微信掃一掃下方的小程式碼，立即體驗：

技術堆疊

• 原型設計：sketch
• 後台資料爬取：node.js + leancloud (開源位址)
• 前端：小程式生態(WXML/WXSS/JavaScript...)

使用

首先點選右上角的Fork或綠色按鈕Clone or download下載原始碼，使用微信開發者工具進行偵錯開發。微信也提供了小程式開發文檔，從註冊小程式、開發工具、開發調試到發布，提供了整套方案，類似Apple那樣打造了一個自己的生態圈。

項目一共9個頁面，涉及列表展示、英雄詳情、裝備分類、銘文條件篩選等功能，由於後台使用了leancloud的存儲服務，所以沒有使用小程序的ajax api，並且引入的leancloud sdk需要依賴一個在名為leancloud.config.js的文件，它被放在utils資料夾裡，由於leancloud這類三方服務通常是彈性付費的，並且王者圖鑑已經在微信上正式發布，所以我push代碼時ignored了leancloud.config.js ，請諒解。

leancloud.config.js包含了leancloud應用程式的AppID和AppKey資訊：

 module . exports = {
  appId : '你的AppID' ,
  appKey : '你的AppKey'
}

在使用專案之前，需要自行建立leancloud應用，並建立我先前寫的王者荣耀官网爬虫來取得數據，它們都需要leancloud.config.js檔案。

總結

簡單來說說微信小程式的開發吧，有段時間在網路上炒得沸沸揚揚，然後抽空看了看開發文檔，臥槽，這不是Vue.js麼？ ！看下面的範例就知道了。

小程式：

 Page ( {
	data : {
		list : [ ]
	} ,
	onload : function ( ) {
		this . setData ( {
			list : [ 1 , 2 , 3 ]
		} )
	}
} ) 

 < view wx:for =" {{ list }} " > {{ item }} </ view >

Vue.js:

 new Vue ( {
	data : {
		list : [ ]
	} ,
	mounted : function ( ) {
		this . list = [ 1 , 2 , 3 ]
	}
} ) 

 < view v-for =" item in list " > {{ item }} </ view >

雖然api看起來都挺像，但還是有明顯的差別：

• 小程式是單向資料綁定，不提供類似vue的v-model指令
• 資料綁定的表達式只支援在雙大括號中，如果寫成wx:for="item in list"就會報錯
• 操作資料物件需要呼叫setData方法觸發更新，而不是vue那樣直接賦
• 綁定事件需要模板指令宣告是否冒泡

小程式有兩個線程，分別對應View(視圖)和AppService(邏輯)兩個獨立模組。 View用來渲染模板、樣式，AppService則用來處理業務邏輯、資料請求、API呼叫等。有興趣的同學可以參考：《微信小程式架構解析》。另外，小小兵外送團隊的小程式文章也不錯。

說回「王者圖鑑」，這是我的第一個小程序，對於有經驗的前端，跟著官方文檔一天就能上手了。相比編碼，完成整個產品的原型UI設計對我而言是一個挑戰，排版、配色、交互，十多天時間參考了很多產品，也對設計有了更深層次的認識，最終落地的效果我還是比較滿意的。

此專案開源程式碼僅供學習參考，禁止商業用途。

版權許可

GPL