微信推出小程序后,有人看好,有人吃瓜觀望.奔著對新事物保持好奇心的原則,嘗嘗鮮.

1.對象:移動端工程師(安卓,iOS,H5).

2.目標:一小時了解微信小程序基本開發

一.基本回顧

1.前景

首先當然是要腦補一下微信小程序的前景,給你打點雞血,以便能看完此文.

1).非技術角度:請君回望微信公眾號.

2).技術角度:對移動端跨平臺解決方案的一種嘗試,畢竟OCS都出來了.

2.基礎

1.如何開始?

從列表開發入手

移動端開發的基礎是UI開發,而UI開發中最基本的技能便是對列表(UITableView,UICollectionView,ListView,GridView)的使用.因此能夠熟練使用列表,基本上已算是入門.

2.需要技能

在安卓,iOS,WP,H5任何一個平臺開發過列表頁面

二.準備工作

1.注冊小程序號

2.下載開發工具

3.下載Demo源碼

4.簡易教程

三.微信小程序開發

1. 目標:入門小程序

途徑:編程實現一個列表頁和跳轉到響應的詳情頁

2. 基礎知識

項目目錄

小程序包含一個描述整體程序的 app(由三個文件組成小程序邏輯--app.js,小程序公共設置--app.json,小程序公共樣式表--app.wxss,必須放在項目的根目錄) 和多個描述各自頁面的 page。

頁面組成

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

頁面的生命周期(js文件中)

1).onLoad: 頁面加載,2).onShow: 頁面顯示,3).onReady: 頁面初次渲染完成,4).onHide: 頁面隱藏,5).onUnload: 頁面卸載

3. 實現模塊

網絡數據->列表頁渲染->跳轉到詳情頁

4. 具體實現方式

在index.js中獲取網絡數據->將網絡返回數據傳遞到wxml->wxml接收并使用數據

邏輯層獲取數據

在index.js的onShow中調用wx.request()獲取網絡數據

邏輯層發送數據

通過調用this.setData()data 將會以 JSON 的形式由邏輯層傳至渲染層.如圖3,其中傳遞的數據格式為JSON{xxx:res.data}

渲染層接收數據

如圖4,獲取數據方式:{{xxx}}

渲染層列表的實現

如圖4,homelist便是列表,scrollviewcell為列表中的每一個item(根據數據的不同,可以定義多個樣式)

wx:for(包括wx:for-item,wx:for-index),wx:if為wxml的循環和判斷控制語句

跳轉詳情頁

如圖4. 在item中可以實現跳轉頁面功能,其中url為將要跳轉到頁面的js文件路徑,id,pic為攜帶的參數,下級頁面的邏輯層可接收該信息.如圖5.onLoad:function(options){}中的options存放的url參數(上個頁面,中url的參數)

詳情頁中傳遞點擊事件

如圖5.實現一個testTap:方法,在相應的渲染層綁定bindtap="testTap",如圖6.

四.總結

基本的入門只需要了解UI如何布局,數據如何傳遞,列表如何實現,頁面上如何綁定點擊事件.Demo源碼，源碼下載：wxdemo-master.zip

UI布局需要了解XML和CSS相關的基本知識

數據傳遞(1). 從網絡到app的邏輯層,調用wx.request()(2). 從邏輯層到渲染層,調用this.setData()

列表的實現

類比iOS開發中的UITableView,或者安卓中的ListView

綁定點擊事件

bindtap="xxxxx"

后續工作可以有:封裝網絡層,緩存,制作通用wxml,wxss模板,性能優化,動效,架構等.

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