文章目錄

• 一、app.json的配置
• 1. 決定頁面檔案路徑
• 2. 配置視窗表現
• 3. 配置tab標籤導航
• 4. 設定網路超時時間
• 5. 配置debug模式
• 二、App()函式使用
• 三、Page()函式使用
• 四、資料繫結
• 1. 元件屬性繫結
• 2. 控制屬性繫結
• 3. 關鍵詞繫結
• 五、wx:if條件判斷
• 1. 判斷單個元件
• 2. 判斷多個元件
• 六、wx:for列表渲染
• 1. 判斷單個元件
• 2. 判斷多個元件
• 七、定義和使用模板
• 1. 定義模板
• 2. 使用模板
• 八、include引用檔案

一、app.json的配置

1. 決定頁面檔案路徑

微信小程式的頁面路徑都需要在app.json配置檔案中配置一下。配置完頁面路徑後，會自動生成對應的資料夾及檔案。

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/icon/icon"
  ]

2. 配置視窗表現

"window":{
    "backgroundColor":"#000",                    //視窗的背景色
    "backgroundTextStyle":"light",               //下拉背景字型、loading圖樣式，僅dark/light
    "navigationBarBackgroundColor": "#fff",      //導航欄背景顏色
    "navigationBarTitleText": "Ocean",           //導航欄標題文字
    "navigationBarTextStyle":"black"             //導航欄標題文字顏色，僅black/white
    "enablePullDownRefresh":true                 //是否開啟下拉重新整理
  }
 

3. 配置tab標籤導航

"tabBar":{
    "color":"#000000",                           //tab上的文字預設顏色
    "backgroundColor":"#ffffff",                 //tab的背景色
    "selectedColor": "#3cc51f",                  //tab上的文字選中時的顏色
    "position":"bottom",
    "borderStyle":"black",
    "list": [{
        "pagePath": "pages/index/index",
        "iconPath": "image/首頁.png",
        "selectedIconPath": "image/首頁.png",
        "text": "首頁"
      },{
      "pagePath": "pages/logs/logs",
      "text": "日誌",
      "iconPath": "image/遊記.png",
      "selectedIconPath": "image/遊記.png"
    },{
        "pagePath": "pages/icon/icon",
        "iconPath": "image/想去.png",
        "selectedIconPath": "image/想去.png",
        "text": "圖示"
      } 
    ]
  }

注意： pages裡面的第一個頁面必須在list裡面，否則標籤導航不會顯示。

4. 設定網路超時時間

"networkTimeout": {
    "request": 10000,                        //wx.request的超時時間，預設60000ms
    "downloadFile": 10000                    //wx.downloadFile的超時時間
    "uploadFile": 10000 
    "connectSocket":10000         
  },

5. 配置debug模式

"debug": true,

注意： 開啟debug模式時，除錯資訊會更加詳細，方便除錯。如果小程式正常執行時，則需要將debug模式關閉。

二、App()函式使用

App() 函式用來註冊一個小程式，被放在一個app.js全域性檔案中。接受一個 Object 引數，其指定小程式的生命週期回撥、全域性函式、全域性資料等。

App({
  onLaunch: function () {
    // 展示本地儲存能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登入
    wx.login({
      success: res => {
        // 傳送 res.code 到後臺換取 openId, sessionKey, unionId
      }
    })
    // 獲取使用者資訊
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 傳送給後臺解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

注意：

1. App()函式必須在app.js中註冊，且不能註冊多個。
2. 不要在定義App()函式中呼叫getApp(),使用this就可以拿到App例項。
3. 不要在onLaunch的時候呼叫getCurrentPages()，此時pages還沒有生成。
4. 通過getApp()獲得例項後，不要私自呼叫生命週期函式。

三、Page()函式使用

Page(Object) 函式用來註冊一個頁面。接受一個 Object 型別引數，其指定頁面的初始資料、生命週期回撥、事件處理函式等。

Page({

  /**
   * 頁面的初始資料
   */
  data: {
   
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
    
  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   * wx.stopPullDownRefresh可以停止當前頁面的下拉重新整理
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
    
  },

  /**
   * 使用者點選右上角分享
   * 
   */
  onShareAppMessage: function () {
    
  }
})

四、資料繫結

data物件可以初始化頁面要用到的函式，data會以JSON的形式由邏輯層傳至渲染層，所以其物件必須是可以轉成JSON的格式：字串、陣列、布林值、物件和陣列。

Page({
  data: {
    name:"jenny"
  })

<view>{{name}}</view>

1. 元件屬性繫結

Page({
  data: {
    id:1
  })

<view id="item-{{id}}">hhh</view>

2. 控制屬性繫結

Page({
  data: {
    condition：true
  })

<view wx:if="{{condition}}">hhh</view>

3. 關鍵詞繫結

<checkbox checked="{{false}}">hhh</checkbox>

注意： 不要直接寫checked=“false”

五、wx:if條件判斷

1. 判斷單個元件

<view wx:if="{{lenth>50}}">hhh</view>
<view wx:elif="{{lenth>20}}">heiheihei</view>
<view wx:else>xixixi</view>

2. 判斷多個元件

<block wx:if="{{true}}">
<view>姓名</view>
<view>學號</view>
</block>

六、wx:for列表渲染

1. 判斷單個元件

wx:for繫結一個數組。陣列的當前項下標變數名預設為index，當前項的變數名預設為item。

<view wx:for="{{students}}">
	{{index}}:{{item.name}}
</view>

Page({
	data:{
		students:[{
			name='Jenny'
		},{
			name='Peter'
		}]
	}
})

可以更改變數名。

<view wx:for="{{students}}" wx:for-index="idx" wx:for-item="student">
	{{idx}}:{{student.name}}
</view>

2. 判斷多個元件

<block wx:for="{{[100,200,300]}}">
<view>{{index}}:</view>
<view>{{item.name}}</view>
</block>

七、定義和使用模板

模板是為了解決頁面裡的程式碼重複的問題，提供了模板機制，把一些可以重複使用的程式碼放置在模板裡進行定義，定義後就可以在介面裡使用。

1. 定義模板

模板是通過name屬性來標識的。下面定義了一個以student為名的模板。

<template name="student">
	<text>{{name}}</text>
</template>

2. 使用模板

import引用可以將有模板功能的頁面檔案引入到要使用的模板的頁面裡。通過is屬性來查詢head這個模板並使用，data屬性傳入需要傳入的值。

<import src="template.wxml"/>
<template is="student" data="{{student}}">
<block wx:for="{{[1,2,3,4]}}">
	<template is="{{item%2==0? student,color}}"/>
</block>

八、include引用檔案

include的引用功能是引用除template模板程式碼之外的全部程式碼，相當於把引用檔案的程式碼複製過來

<include src="navigator.wxml"/>
<view>這裡是正文</view>
<include src="footer.wxml"/>