一、微信小程式專案基本結構

微信提供了微信小程式專用的開發者工具

必須檔案：app.js/ app.json(配置檔案) /app.wxss(樣式檔案)

pages資料夾存放所有頁面，每個頁面的路徑都要在app.json檔案中配置，寫在pages欄位中

每個頁面由四個檔案構成.js/.json/.wxss/.wxml，放在pages中的一個資料夾下.wxml是頁面結構檔案

二、app.json檔案

app.json配置項如下：

1.page：將所有頁面的路徑寫在其中，不用寫檔案字尾名。第一條為首頁

2.window：設定導航條、狀態列、標題、視窗背景色

navigationBarBackgroundColor 導航欄背景顏色

navigationBarTextStyle                  導航欄標題顏色

navigationBarTitleText             導航欄標題文字內容

backgroundColor                    視窗的背景色

backgroundTextStyle              下拉背景字型、loading 圖的樣式(dark/light)

enablePullDownRefresh       是否開啟下拉重新整理

3.tabBar：配置底部的tab欄

color                  tab上的文字預設顏色

selectedColor  tab上的文字選中時的顏色

backgroundColor      tab 的背景色

borderStyle              tabbar上邊框的顏色(black/white)

list                            tab 的列表

重點的list，其中設定一個數組，陣列每個項都是一個物件，對應著一個tab和其對應的頁面，配置如下：

pagePathtab           對應的頁面檔案路徑（必須在 pages 中先定義）

text                         tab 上按鈕文字

iconPath                 tab上的icon路徑

selectedIconPath   選中時的icon路徑

一個tabBar示例：

"tabBar": {

"list": [{

  "pagePath": "pages/index/index",

  "text": "首頁"

}, {

  "pagePath": "pages/logs/logs",

  "text": "日誌"

}]

}

4.networkTimeout：設定各種微信請求的網路超時時間

request            wx.request的超時時間

connectSocket       wx.connectSocket的超時時間

uploadFile       wx.uploadFile的超時時間

downloadFile       wx.downloadFile的超時時間

微信小程式-檢視層

1.資料繫結

使用{{}}即可完成資料繫結，{{}}內也可以進行計算、邏輯判斷、字串運算等

也可以為屬性進行資料繫結，在引號內使用，如：

<view id="item-{{id}}"> </view>，在data中定義id＝1，就可以在這裡繫結id為item-1

2.列表渲染

使用wx:for後面接需要渲染的陣列，示例如下：

<!--wxml-->  
<view wx:for="{{array}}"> {{item}} </view>  
// page.js  
Page({  
  data: {  
    array: [1, 2, 3, 4, 5]  
  }  
})

使用列表渲染有預設值index，表示當前下標，如：{{index}}: {{item}}

使用wx:for-index和wx:for-item可以指定當前下標名和元素名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">  
  {{idx}}: {{itemName.message}}  
</view> 

3.條件渲染

使用wx:if/elif/else，示例：

<!--wxml-->  
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>  
<view wx:elif="{{view == 'APP'}}"> APP </view>  
<view wx:else="{{view == 'MINA'}}"> MINA </view>  
// page.js  
Page({  
  data: {  
    view: 'MINA'  
  }  
}) 

上面的程式碼根據data中的view的值判斷到底顯示什麼樣的內容

可以使用<block>結構進行條件渲染多個元件，注意block只是一個包裝元素沒有實際樣式：

<block wx:if="{{true}}">  
  <view> view1 </view>  
  <view> view2 </view>  
</block> 

4.使用模版

<template name="staffName">  
  <view>  
    FirstName: {{firstName}}, LastName: {{lastName}}  
  </view>  
</template>  
<template is="staffName" data="{{...staffA}}"></template>  
<template is="staffName" data="{{...staffB}}"></template>  
<template is="staffName" data="{{...staffC}}"></template>  
// page.js  
Page({  
  data: {  
    staffA: {firstName: 'Hulk', lastName: 'Hu'},  
    staffB: {firstName: 'Shang', lastName: 'You'},  
    staffC: {firstName: 'Gideon', lastName: 'Lin'}  
  }  
}) 

上面的例子首先使用template定義了一個模版，指定name屬性，然後定義了模版的內容。下面就可以直接使用這個模版了，定義data屬性為模版傳遞每個例項化的資料，is指定要使用的是哪個模版

5.事件

分為bind開頭的事件屬性和catch開頭的事件屬性，前者不會阻止冒泡，後者會阻止冒泡

每個事件對應一些屬性，如果把一個event打印出來返回內容如下：

<pre name="code" class="javascript"><view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view> 

Page({  
  tapName: function(event) {  
    console.log(event)  
  }  
}) 

{  
"type": "tap",  //事件型別  
"timeStamp": 1252,  //事件生成的事件戳  
"target": {   //出發事件的源元件  
  "id": "tapTest",  
  "offsetLeft": 0,  
  "offsetTop": 0,  
  "dataset": {  //元件屬性中以data-開頭的屬性集合  
  "hi": "MINA"  
  }  
},  
"currentTarget": {  //事件繫結的當前元件  
  "id": "tapTest",  
  "offsetLeft": 0,  
  "offsetTop": 0,  
  "dataset": {  
    "hi": "MINA"  
  }  
},  
"touches": [{  //觸控資訊，分別是距離文件左上角、出去導航欄的左上角、整個螢幕左上角距離  
  "pageX": 30,  
  "pageY": 12,  
  "clientX": 30,  
  "clientY": 12,  
  "screenX": 112,  
  "screenY": 151  
}],  
"detail": {  
  "x": 30,  
  "y": 12  
}  
}