靈感源于今年很火的手游——王者榮耀，偶爾用手機(jī)上網(wǎng)查找游戲數(shù)據(jù)并不是很方便，于是有了開發(fā)“王者圖鑒”小程序的想法。從官網(wǎng)爬取數(shù)據(jù)，將英雄、裝備、銘文等信息整合在微信小程序中，隨時隨地查詢游戲信息。

預(yù)覽

效果展示

線上體驗

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

技術(shù)棧

• 原型設(shè)計：sketch
• 后臺數(shù)æ“š(jù)爬?。簄ode.js + leancloud (開源地址)
• 前端：小程序生態(tài)(WXML/WXSS/JavaScript...)

使用

首先點擊右上角的 Fork æˆ–者綠色按鈕 Clone or download ä¸‹è¼‰æºç¢¼ï¼Œä½¿ç”¨å¾®ä¿¡é–‹ç™¼(fā)者工具進(jìn)行調(diào)試和開發(fā)。微信也提供了小程序開發(fā)文檔，從注冊小程序、開發(fā)工具、開發(fā)調(diào)試到發(fā)布，提供了整套方案，類似Apple那樣打造了一個自己的生態(tài)圈。

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

leancloud.config.js åŒ…含了leancloud應(yÄ«ng)用的AppIDå’ŒAppKey信息：

module.exports = {
  appId: 'ä½ çš„AppID',
  appKey: 'ä½ çš„AppKey'
}

在使用項目之前，需要自行創(chuàng)建leancloud應(yÄ«ng)用，并搭建我之前寫的 王者榮耀官網(wǎng)爬蟲 ç²å–數(shù)æ“š(jù)，它們都需要leancloud.config.js æ–‡ä»¶。

總結(jié)

簡單來說說微信小程序的開發(fā)吧，有段時間在網(wǎng)上炒得沸沸揚揚，然后抽空看了看開發(fā)文檔，臥槽，這不是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看起來都挺像，但還是有明顯區(qū)別的：

• 小程序是單向數(shù)æ“š(jù)綁定，不提供類似vueçš„v-model指令
• 數(shù)æ“š(jù)綁定的表達(dá)式只支持在雙大括號中，如果寫成 wx:for="item in list" å°±æœƒå ±éŒ¯
• 操作數(shù)æ“š(jù)對象需要調(diào)用setData方法觸發(fā)æ›´æ–°，而不是vue那樣直接賦
• 綁定事件需要模板指令聲明是否冒泡

小程序有兩個線程，分別對應(yīng)View(視圖)和AppService(邏輯)兩個獨立模塊。View用來渲染模板、樣式，AppService則用來處理業(yè)務(wù)邏輯、數(shù)據(jù)請求、API調(diào)用等。感興趣的同學(xué)可以參考：《微信小程序架構(gòu)解析》。另外，小黃人外賣團(tuán)隊的小程序文章也不錯。

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

該項目開源代碼僅供學(xué)習(xí)參考，禁止商業(yè)用途。