微信推出小程序后,有人看好,有人吃瓜觀望.奔著對(duì)新事物保持好奇心的原則,嘗嘗鮮.
1.對(duì)象:移動(dòng)端工程師(安卓,iOS,H5).
2.目標(biāo):一小時(shí)了解微信小程序基本開(kāi)發(fā)
一.基本回顧
1.前景
首先當(dāng)然是要腦補(bǔ)一下微信小程序的前景,給你打點(diǎn)雞血,以便能看完此文.
1).非技術(shù)角度:請(qǐng)君回望微信公眾號(hào).
2).技術(shù)角度:對(duì)移動(dòng)端跨平臺(tái)解決方案的一種嘗試,畢竟OCS都出來(lái)了.
2.基礎(chǔ)
1.如何開(kāi)始?
從列表開(kāi)發(fā)入手
移動(dòng)端開(kāi)發(fā)的基礎(chǔ)是UI開(kāi)發(fā),而UI開(kāi)發(fā)中最基本的技能便是對(duì)列表(UITableView,UICollectionView,ListView,GridView)的使用.因此能夠熟練使用列表,基本上已算是入門(mén).
2.需要技能
在安卓,iOS,WP,H5任何一個(gè)平臺(tái)開(kāi)發(fā)過(guò)列表頁(yè)面
二.準(zhǔn)備工作
1.注冊(cè)小程序號(hào)
2.下載開(kāi)發(fā)工具
3.下載Demo源碼
4.簡(jiǎn)易教程
三.微信小程序開(kāi)發(fā)
1. 目標(biāo):入門(mén)小程序
途徑:編程實(shí)現(xiàn)一個(gè)列表頁(yè)和跳轉(zhuǎn)到響應(yīng)的詳情頁(yè)
2. 基礎(chǔ)知識(shí)
- 項(xiàng)目目錄
小程序包含一個(gè)描述整體程序的 app(由三個(gè)文件組成小程序邏輯--app.js,小程序公共設(shè)置--app.json,小程序公共樣式表--app.wxss,必須放在項(xiàng)目的根目錄) 和多個(gè)描述各自頁(yè)面的 page。
圖1.png - 頁(yè)面組成
一個(gè)小程序頁(yè)面由四個(gè)文件組成,分別為:頁(yè)面邏輯--index.js(必須),頁(yè)面結(jié)構(gòu)--index.wxml(必須),頁(yè)面樣式表--index.wxss(非必須),頁(yè)面配置--index.json(非必須)
圖2.png - 頁(yè)面的生命周期(js文件中)
1).onLoad: 頁(yè)面加載,2).onShow: 頁(yè)面顯示,3).onReady: 頁(yè)面初次渲染完成,4).onHide: 頁(yè)面隱藏,5).onUnload: 頁(yè)面卸載
3. 實(shí)現(xiàn)模塊
網(wǎng)絡(luò)數(shù)據(jù)->列表頁(yè)渲染->跳轉(zhuǎn)到詳情頁(yè)
4. 具體實(shí)現(xiàn)方式
在index.js中獲取網(wǎng)絡(luò)數(shù)據(jù)->將網(wǎng)絡(luò)返回?cái)?shù)據(jù)傳遞到wxml->wxml接收并使用數(shù)據(jù)
- 邏輯層獲取數(shù)據(jù)
在index.js的onShow中調(diào)用wx.request()獲取網(wǎng)絡(luò)數(shù)據(jù) - 邏輯層發(fā)送數(shù)據(jù)
通過(guò)調(diào)用this.setData()data 將會(huì)以 JSON 的形式由邏輯層傳至渲染層.如圖3,其中傳遞的數(shù)據(jù)格式為JSON{xxx:res.data}
圖3.png - 渲染層接收數(shù)據(jù)
如圖4,獲取數(shù)據(jù)方式:{{xxx}}
圖4.png - 渲染層列表的實(shí)現(xiàn)
如圖4,homelist便是列表,scrollviewcell為列表中的每一個(gè)item(根據(jù)數(shù)據(jù)的不同,可以定義多個(gè)樣式)
wx:for(包括wx:for-item,wx:for-index),wx:if為wxml的循環(huán)和判斷控制語(yǔ)句
- 跳轉(zhuǎn)詳情頁(yè)
如圖4. 在item中<navigator></navigator>可以實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面功能,其中url為將要跳轉(zhuǎn)到頁(yè)面的js文件路徑,id,pic為攜帶的參數(shù),下級(jí)頁(yè)面的邏輯層可接收該信息.如圖5.onLoad:function(options){}中的options存放的url參數(shù)(上個(gè)頁(yè)面,<navigator></navigator>中url的參數(shù))
圖5.png - 詳情頁(yè)中傳遞點(diǎn)擊事件
如圖5.實(shí)現(xiàn)一個(gè)testTap:方法,在相應(yīng)的渲染層綁定bindtap="testTap",如圖6.
圖6.png
四.總結(jié)
基本的入門(mén)只需要了解UI如何布局,數(shù)據(jù)如何傳遞,列表如何實(shí)現(xiàn),頁(yè)面上如何綁定點(diǎn)擊事件.Demo源碼
- UI布局需要了解XML和CSS相關(guān)的基本知識(shí)
- 數(shù)據(jù)傳遞
(1). 從網(wǎng)絡(luò)到app的邏輯層,調(diào)用wx.request()
(2). 從邏輯層到渲染層,調(diào)用this.setData()- 列表的實(shí)現(xiàn)
類(lèi)比iOS開(kāi)發(fā)中的UITableView,或者安卓中的ListView- 綁定點(diǎn)擊事件
bindtap="xxxxx"
后續(xù)工作可以有:封裝網(wǎng)絡(luò)層, 緩存, 制作通用wxml,wxss模板, 性能優(yōu)化, 動(dòng)效, 架構(gòu)等.
