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

丶Bison發表於2016-10-18
微信小程式

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

前言

微信小程式暫時處於內測期間，公司大的版本剛好上線了，閒來無事，看看微信小程式的文件，順便學習學習，在此希望和大家一起共勉，發現自己越來越懶惰了，越活越沒上進心了，有點危險，給自己敲下警鐘吧。廢話不多說，開始記錄下這些天學習到的一些知識，希望對正在閱讀的你有所幫助！
本文為iOS開發者Bison自學微信小程式所寫，所以很多東西都和iOS進行了一下對比。

開搞

建立專案在此濾過，相信大家看著官方文件就可以搞定

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

一般市面上的app都已tabbar展示的方式為主，今天我就仿原生的IT Blog下面讓我們看下IT blog長什麼樣吧！

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

首先是tabbar

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

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

  • 下面借用官方的解釋
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": "我的"
    }]
  }
}複製程式碼

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

上圖框出來的地方就是我們的tabbar，tabbar裡面可以傳一個陣列list，想顯示多少個tab就到這裡加就行，當然個數是有限制的最多5個，一個的話就沒必要了。這點和iOS開發裡面頗為相似。
下面我們按下com + s 再 編譯一下，就可以看到如下結果了

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

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 再 編譯一下可以看到如下的效果

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

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

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

相關文章