微信小程序開發教程-從零開始（1）

前言

微信小程序暫時處於內測期間，公司大的版本恰好上線了，閒來無事，看看微信小程序的文檔，順便學習學習，在此但願和你們一塊兒共勉，發現本身愈來愈懶惰了，越活越沒上進心了，有點危險，給本身敲下警鐘吧。廢話很少說，開始記錄下這些天學習到的一些知識，但願對正在閱讀的你有所幫助！
本文爲iOS開發者Bison自學微信小程序所寫，因此不少東西都和iOS進行了一下對比。

開搞

建立項目在此濾過，相信你們看着官方文檔就能夠搞定

首先咱們先把整個app的架構搭起來

通常市面上的app都已tabbar展現的方式爲主，今天我就仿原生的IT Blog下面讓咱們看下IT blog長什麼樣吧！

首先是tabbar

下面我將簡單的介紹一下微信小程序一些不可缺的目錄結構。

• 下面借用官方的解釋

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。

WXSS 用來決定 WXML 的組件應該怎麼顯示。爲了適應廣大的前端開發者，咱們的 WXSS 具備 CSS 大部分特性。 同時爲了更適合開發微信小程序，咱們對 CSS 進行了擴充以及修改。

app.json 文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。至關於iOS開發中的AppDelegate

app.js 是小程序邏輯部分

根據上面的目錄結構的解釋不難看出，咱們的tabbar是寫在哪的，沒錯就是app.json，下面讓咱們看下代碼

{
  "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": "個人"
    }]
  }
}複製代碼

上圖框出來的地方就是咱們的tabbar，tabbar裏面能夠傳一個數組list，想顯示多少個tab就到這裏加就行，固然個數是有限制的最多5個，一個的話就不必了。這點和iOS開發裏面頗爲類似。
下面咱們按下com + s 再 編譯一下，就能夠看到以下結果了

iconPath爲默認圖片路徑，selectedIconPath爲點擊時的圖片路徑，text的話我想不說你們也已經猜到了，對，沒錯就是圖片下面顯示的title了。

咱們這暫時只寫了倆個Tab，在此主要也就是實現咱們的首頁效果。
由咱們的效果圖能夠看出，iOS開發中咱們的佈局主要用的是tabview，而在微信小程序中相似tabviewCell的佈局又是怎麼寫的呢？下面咱們先寫貼下代碼再作下解說。

<!--文章列表模板 begin-->
<template name="itmes"> <view class="imgs"><image src="{{imgURL}}" class="in-img" background-size="cover" model="scaleToFill"></image></view> <view class="infos"> <view class="title">{{title}}</view> <view class="date">{{time}}</view> <view class="classification">{{classification}}</view> </view> </template>
<!--文章列表模板 begin-->複製代碼

在這段代碼中<template name="items">...</template>是微信小程序中的模板，那什麼是模板呢？官方文檔是這樣解釋的。

模板

WXML提供模板（template），能夠在模板中定義代碼片斷，而後在不一樣的地方調用。

個人理解這個至關於iOS開發中的cell，cell有了的話， 那就只缺乏一個數據源了，下面咱們暫時作一個本地的數據源。

數據主要是寫在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爲咱們的數據源,數組裏麪包含多個字典，字典裏面有咱們所須要的5個字段。
cell 和數據源都有了，那就只差一個顯示了， 顯示在微信小程序當中用的是列表渲染

列表渲染

在組件上使用wx:for控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。
默認數組的當前項的下標變量名默認爲index，數組當前項的變量名默認爲item

下面咱們來看看這個列表渲染是怎麼作的,首先切換到index.wxml中，代碼以下。

<!--循環渲染列表 begin-->
<block wx:for="{{newList}}"> <template is="itmes" data="{{...item}}" /> </block> <!--循環渲染列表 end-->複製代碼

com + s 再 編譯一下能夠看到以下的效果

到此微信小程序的列表功能已經作完了，固然咱們看到的佈局都是很亂的，下一篇咱們將優化UI讓他和咱們的效果圖同樣。

首發連接
第一時間收到文章推送