微信小程序暫時處於(yu) 內(nei) 測期間，公司大的版本剛好上線了，閑來無事，看看微信小程序的文檔，順便學習(xi) 學習(xi) ，在此希望和大家一起共勉，發現自己越來越懶惰了，越活越沒上進心了，有點危險，給自己敲下警鍾吧。廢話不多說，開始記錄下這些天學習(xi) 到的一些知識，希望對正在閱讀的你有所幫助！ 本文為(wei) ioses開發者Bison自學微信小程序所寫(xie) ，所以很多東(dong) 西都和ioses進行了一下對比。
一般市麵上的app都已tabbar展示的方式為(wei) 主，今天我就仿原生的IT Blog下麵讓我們(men) 看下IT blog長什麽(me) 樣吧！
下麵我將簡單的介紹一下微信小程序一些不可缺的目錄結構。 
WXSS 用來決(jue) 定 WXML 的組件應該怎麽(me) 顯示。為(wei) 了適應廣大的前端開發者，我們(men) 的 WXSS 具有 CSS 大部分特性。 同時為(wei) 了更適合開發微信小程序，我們(men) 對 CSS 進行了擴充以及修改。
文件來對微信小程序進行全局配置，決(jue) 定頁麵文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。相當於(yu) ioses開發中的AppDelegate
根據上麵的目錄結構的解釋不難看出，我們(men) 的tabbar是寫(xie) 在哪的，沒錯就是app.json，下麵讓我們(men) 看下代碼
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "tabBar": { "backgroundColor":"#000000", "list": [{ "iconPath":"image/icon_API.png", "selectedIconPath":"image/icon_API_HL.png", "pagePath": "pages/index/index", "text": "首頁" }, { "iconPath":"image/icon_component.png", "selectedIconPath":"image/icon_component_HL.png", "pagePath": "pages/about/about", "text": "我的" }] } }
上圖框出來的地方就是我們(men) 的tabbar，tabbar裏麵可以傳(chuan) 一個(ge) 數組list，想顯示多少個(ge) tab就到這裏加就行，當然個(ge) 數是有限製的最多5個(ge) ，一個(ge) 的話就沒必要了。這點和ioses開發裏麵頗為(wei) 相似。 下麵我們(men) 按下com + s 再 編譯一下，就可以看到如下結果了
iconPath為(wei) 默認圖片路徑，selectedIconPath為(wei) 點擊時的圖片路徑，text的話我想不說大家也已經猜到了，對，沒錯就是圖片下麵顯示的title了。
我們(men) 這暫時隻寫(xie) 了倆(lia) 個(ge) Tab，在此主要也就是實現我們(men) 的首頁效果。 由我們(men) 的效果圖可以看出，ioses開發中我們(men) 的布局主要用的是tabview，而在微信小程序中類似tabviewCell的布局又是怎麽(me) 寫(xie) 的呢？下麵我們(men) 先寫(xie) 貼下代碼再做下解說。
<!--文章列表模板 begin--> <template name="itmes"> <view class="imgs"><image src="" class="in-img" background-size="cover" model="scaleToFill"></image></view> <view class="infos"> <view class="title"></view> <view class="date"></view> <view class="classification"></view> </view> </template> <!--文章列表模板 begin-->
在這段代碼中<template name="items">…</template>是微信小程序中的模板，那什麽(me) 是模板呢？官方文檔是這樣解釋的。
WXML提供模板（template），可以在模板中定義(yi) 代碼片段，然後在不同的地方調用。
我的理解這個(ge) 相當於(yu) ioses開發中的cell，cell有了的話， 那就隻缺少一個(ge) 數據源了，下麵我們(men) 暫時做一個(ge) 本地的數據源。
數據主要是寫(xie) 在js代碼當中的，下麵來看下代碼
//index.js //獲取應用實例 var app = getApp() Page({ data: { newList:[{url:"baidu***.com",title:"sdsadsadasdas",classification:"ss",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu***.com",title:"sdsadsadasdassss",classification:"ss",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu***.com",title:"sdsadsadasdas",classification:"12",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu***.com",title:"sdsadsadasdas",classification:"333",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu***.com",title:"sdsadsadasdas",classification:"44",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu***.com",title:"sdsadsadasdas",classification:"44",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu***.com",title:"sdsadsadasdas",classification:"32",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu***.com",title:"sdsadsadasdas",classification:"123",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu***.com",title:"sdsadsadasdas",classification:"456",time:"2016-10-17",imgURL:"../../image/wechatHL.png"}, {url:"baidu***.com",title:"sdsadsadasdas",classification:"454",time:"2016-10-17",imgURL:"../../image/wechatHL.png"} ] }, //事件處理函數 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }})
其中的newList為(wei) 我們(men) 的數據源,數組裏麵包含多個(ge) 字典，字典裏麵有我們(men) 所需要的5個(ge) 字段。 cell 和數據源都有了，那就隻差一個(ge) 顯示了， 顯示在微信小程序當中用的是列表渲染
在組件上使用wx:for控製屬性綁定一個(ge) 數組，即可使用數組中各項的數據重複渲染該組件。 默認數組的當前項的下標變量名默認為(wei) index，數組當前項的變量名默認為(wei) item
下麵我們(men) 來看看這個(ge) 列表渲染是怎麽(me) 做的,首先切換到index.wxml中，代碼如下。
<!--循環渲染列表 begin--> <block wx:for=""> <template is="itmes" data="" /> </block> <!--循環渲染列表 end-->
com + s 再 編譯一下可以看到如下的效果
到此微信小程序的列表功能已經做完了，當然我們(men) 看到的布局都是很亂(luan) 的，下一篇我們(men) 將優(you) 化UI讓他和我們(men) 的效果圖一樣。
服務項目
網站首頁
TEL：021-61554458
立即谘詢