靈感源于(yú)今年很火的(de)手遊——王者榮耀，偶爾用手機上(shàng)網查找遊戲數據并不(bù)是(shì)很方便，于(yú)是(shì)有了(le／liǎo)開發“王者圖鑒”小程序的(de)想法。從官網爬取數據，将英雄、裝備、銘文等信息整合在(zài)微信小程序中，随時(shí)随地(dì / de)查詢遊戲信息。

預覽

效果展示

線上(shàng)體驗

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

技術棧

• 原型設計：sketch
• 後台數據爬取：node.js + leancloud (開源地(dì / de)址)
• 前端：小程序生态(WXML/WXSS/JavaScript...)

使用

首先點擊右上(shàng)角的(de) Fork 或者綠色按鈕 Clone or download 下載源碼，使用微信開發者工具進行調試和(hé / huò)開發。微信也(yě)提供了(le／liǎo)小程序開發文檔，從注冊小程序、開發工具、開發調試到(dào)發布，提供了(le／liǎo)整套方案，類似Apple那樣打造了(le／liǎo)一個(gè)自己的(de)生态圈。

項目一共9個(gè)頁面，涉及列表展示、英雄詳情、裝備分類、銘文條件篩選等功能，由于(yú)後台使用了(le／liǎo)leancloud的(de)存儲服務，所以(yǐ)沒有使用小程序的(de)ajax api，并且引入的(de)leancloud sdk需要(yào / yāo)依賴一個(gè)在(zài)名爲(wéi / wèi) leancloud.config.js 的(de)文件，它被放在(zài) utils文件夾裏，由于(yú)leancloud這(zhè)類三方服務通常是(shì)彈性付費的(de)，并且王者圖鑒已經在(zài)微信上(shàng)正式發布，所以(yǐ)我push代碼時(shí)ignored了(le／liǎo) leancloud.config.js ，請諒解。

leancloud.config.js 包含了(le／liǎo)leancloud應用的(de)AppID和(hé / huò)AppKey信息：

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

在(zài)使用項目之(zhī)前，需要(yào / yāo)自行創建leancloud應用，并搭建我之(zhī)前寫的(de) 王者榮耀官網爬蟲 獲取數據，它們都需要(yào / yāo)leancloud.config.js 文件。

總結

簡單來(lái)說(shuō)說(shuō)微信小程序的(de)開發吧，有段時(shí)間在(zài)網上(shàng)炒得沸沸揚揚，然後抽空看了(le／liǎo)看開發文檔，卧槽，這(zhè)不(bù)是(shì)Vue.js麽？！看下面的(de)示例就(jiù)知道(dào)了(le／liǎo)。

小程序：

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看起來(lái)都挺像，但還是(shì)有明顯區别的(de)：

• 小程序是(shì)單向數據綁定，不(bù)提供類似vue的(de)v-model指令
• 數據綁定的(de)表達式隻支持在(zài)雙大(dà)括号中，如果寫成 wx:for="item in list" 就(jiù)會報錯
• 操作數據對象需要(yào / yāo)調用setData方法觸發更新，而(ér)不(bù)是(shì)vue那樣直接賦
• 綁定事件需要(yào / yāo)模闆指令聲明是(shì)否冒泡

小程序有兩個(gè)線程，分别對應View(視圖)和(hé / huò)AppService(邏輯)兩個(gè)獨立模塊。View用來(lái)渲染模闆、樣式，AppService則用來(lái)處理業務邏輯、數據請求、API調用等。感興趣的(de)同學可以(yǐ)參考：《微信小程序架構解析》。另外，小黃人(rén)外賣團隊的(de)小程序文章也(yě)不(bù)錯。

說(shuō)回「王者圖鑒」，這(zhè)是(shì)我的(de)第一個(gè)小程序，對于(yú)有經驗的(de)前端，跟着官方文檔一天就(jiù)能上(shàng)手了(le／liǎo)。相比編碼，完成整個(gè)産品的(de)原型UI設計對我而(ér)言是(shì)一個(gè)挑戰，排版、配色、交互，十多天時(shí)間參考了(le／liǎo)很多産品，也(yě)對設計有了(le／liǎo)更深層次的(de)認識，最終落地(dì / de)的(de)效果我還是(shì)比較滿意的(de)。

該項目開源代碼僅供學習參考，禁止商業用途。