小程序模板網(wǎng)

微信小程序?qū)崙?zhàn)--王者圖鑒

發(fā)布時(shí)間:2017-12-30 09:04 所屬欄目:小程序開(kāi)發(fā)教程

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

 
 
 

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

預(yù)覽

效果展示

線上體驗(yàn)

微信掃一掃下方的小程序碼,立即體驗(yàn):

技術(shù)棧

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

使用

首先點(diǎn)擊右上角的 Fork 或者綠色按鈕 Clone or download 下載源碼,使用微信開(kāi)發(fā)者工具進(jìn)行調(diào)試和開(kāi)發(fā)。微信也提供了小程序開(kāi)發(fā)文檔,從注冊(cè)小程序、開(kāi)發(fā)工具、開(kāi)發(fā)調(diào)試到發(fā)布,提供了整套方案,類似Apple那樣打造了一個(gè)自己的生態(tài)圈。

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

leancloud.config.js 包含了leancloud應(yīng)用的AppID和AppKey信息:

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

在使用項(xiàng)目之前,需要自行創(chuàng)建leancloud應(yīng)用,并搭建我之前寫(xiě)的 王者榮耀官網(wǎng)爬蟲(chóng) 獲取數(shù)據(jù),它們都需要leancloud.config.js 文件。

總結(jié)

簡(jiǎn)單來(lái)說(shuō)說(shuō)微信小程序的開(kāi)發(fā)吧,有段時(shí)間在網(wǎng)上炒得沸沸揚(yáng)揚(yáng),然后抽空看了看開(kāi)發(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看起來(lái)都挺像,但還是有明顯區(qū)別的:

  • 小程序是單向數(shù)據(jù)綁定,不提供類似vue的v-model指令
  • 數(shù)據(jù)綁定的表達(dá)式只支持在雙大括號(hào)中,如果寫(xiě)成 wx:for="item in list" 就會(huì)報(bào)錯(cuò)
  • 操作數(shù)據(jù)對(duì)象需要調(diào)用setData方法觸發(fā)更新,而不是vue那樣直接賦
  • 綁定事件需要模板指令聲明是否冒泡

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

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

該項(xiàng)目開(kāi)源代碼僅供學(xué)習(xí)參考,禁止商業(yè)用途。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/18322.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢