靈感源(yuan)于今年(nian)很(hen)火(huo)的(de)手游——王者(zhe)榮(rong)耀，偶爾用手機(ji)上網查找(zhao)游戲數據并不是很(hen)方(fang)便，于是有了開發“王者(zhe)圖鑒”小程序的(de)想法。從官網爬取數據，將英雄(xiong)、裝備、銘文等信息(xi)整合在微信小程序中，隨(sui)時隨(sui)地(di)查詢游戲信息(xi)。

預覽

效果展示

線上體驗

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

技術棧

• 原型設計：sketch
• 后臺數據爬取：node.js + leancloud (開源地址)
• 前端：小程序生態(WXML/WXSS/JavaScript...)

使用

首先點擊右上角的 Fork 或者綠色按鈕 Clone or download 下載源碼，使(shi)用微(wei)信開發(fa)者工具(ju)進行調試和開發(fa)。微(wei)信也(ye)提(ti)供了小(xiao)程(cheng)序開發(fa)文檔，從注冊小(xiao)程(cheng)序、開發(fa)工具(ju)、開發(fa)調試到發(fa)布，提(ti)供了整套方案，類似(si)Apple那樣(yang)打造了一個自己的生態圈。

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

leancloud.config.js 包含了leancloud應用的AppID和AppKey信息(xi)：

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

在使用項目之前，需要自行創建leancloud應用，并搭建我之前寫的 王者榮耀官網爬蟲 獲取數據，它們都需要leancloud.config.js 文件。

總結

簡單(dan)來(lai)說(shuo)(shuo)說(shuo)(shuo)微信小(xiao)程序的開發(fa)(fa)吧，有段時間在網(wang)上炒(chao)得(de)沸(fei)(fei)沸(fei)(fei)揚揚，然后抽(chou)空看(kan)了看(kan)開發(fa)(fa)文檔，臥槽(cao)，這不是Vue.js么(me)？！看(kan)下面的示例就知道了。

小程序：

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>

雖(sui)然api看起來都(dou)挺像，但還是有明(ming)顯區別的：

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

小(xiao)程(cheng)序有兩(liang)個線程(cheng)，分別對(dui)應(ying)View(視圖)和AppService(邏(luo)輯(ji))兩(liang)個獨立模塊。View用(yong)(yong)來渲染模板、樣式，AppService則用(yong)(yong)來處理業務邏(luo)輯(ji)、數(shu)據請求、API調用(yong)(yong)等。感興趣的(de)同學(xue)可(ke)以參考：《微信(xin)小(xiao)程(cheng)序架構解(jie)析(xi)》。另外，小(xiao)黃人(ren)外賣(mai)團隊的(de)小(xiao)程(cheng)序文章也不錯(cuo)。

說回「王者圖鑒(jian)」，這是我(wo)的第一個(ge)小程序，對于有(you)經驗的前端，跟著(zhu)官(guan)方文檔一天就能上手了(le)。相(xiang)比編碼，完成整(zheng)個(ge)產品(pin)的原型UI設計(ji)對我(wo)而言(yan)是一個(ge)挑戰，排版、配色、交互(hu)，十多天時間參考了(le)很多產品(pin)，也對設計(ji)有(you)了(le)更深層次的認(ren)識，最終落(luo)地的效果我(wo)還是比較滿意(yi)的。

該項目開(kai)源代(dai)碼僅供(gong)學習參考，禁止(zhi)商業用途。