微信推出小程序后,有人看好,有人吃瓜觀望.奔著對(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。

頁(yè)面組成

一個(gè)小程序頁(yè)面由四個(gè)文件組成,分別為:頁(yè)面邏輯--index.js(必須),頁(yè)面結(jié)構(gòu)--index.wxml(必須),頁(yè)面樣式表--index.wxss(非必須),頁(yè)面配置--index.json(非必須)

頁(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}

渲染層接收數(shù)據(jù)

如圖4,獲取數(shù)據(jù)方式:{{xxx}}

渲染層列表的實(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中可以實(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è)面,中url的參數(shù))

詳情頁(yè)中傳遞點(diǎn)擊事件

如圖5.實(shí)現(xiàn)一個(gè)testTap:方法,在相應(yīng)的渲染層綁定bindtap="testTap",如圖6.

四.總結(jié)

基本的入門(mén)只需要了解UI如何布局,數(shù)據(jù)如何傳遞,列表如何實(shí)現(xiàn),頁(yè)面上如何綁定點(diǎn)擊事件.Demo源碼，源碼下載：wxdemo-master.zip

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)等.

參考:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html