微信小程序應用介紹

微信小程序介紹從以下幾方面

• 什麼是小程序？怎麼建立一個小程序？
• 小程序的頁面結構？
• 視圖層結構等？
• 組件之間如何通信？
• 頁面跳轉方式有哪些
• 生命週期？
• 小程序如何引入其他ui組件？

小程序

是什麼？

---

微信小程序，簡稱小程序，縮寫XCX，英文名mini program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不需要擔心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。

怎麼建立一個小程序？頁面結構？

---

1、 先下載開發者工具

2、頁面結構如下圖

• App() 必須在 app.js 中註冊，且不能註冊多個。

• 每個頁面需要手動在app.json中進行註冊，否則不能訪問。

• app.json中pages數組的第一項代表小程序的初始頁面，小程序中新增/減少頁面，都需要對 pages 數組進行修改。

• 直接修改 this.data無效，無法改變頁面的狀態，需要setData

• tabBar只能配置最少2個、最多5個，tab 按數組的順序排序。

• 沒有cookie，沒有window變量，沒有a標籤鏈接，不可嵌套iframe。

3、主體由app.js、app.json、app.wxss三個文件組成，放在根目錄。

• app.js
  根目錄的app.js很有用,因爲在它內部註冊的變量或方法，都是可以被所有頁面獲取到。可以監聽並處理小程序的生命週期、聲明全局變量。其餘的.js文 件可以通過var app = getApp() 獲取其實例，調用其中定義的方法和變量，但不可以調用生命週期的方法

• app.json是小程序的全局配置

pages 配置小程序的組成頁面，第一個代表小程序的初始頁面 window 設置小程序的狀態欄、標題欄、導航條、窗口背景顏色 tabBar 配置小程序tab欄的樣式和對應的頁面

"pages": [ //設置頁面的路徑
  "pages/index/index", //不需要寫index.wxml,index.js,index,wxss,框架會自動尋找並整合
  "pages/logs/logs"
],
"window": { //設置默認窗口的表現形式
  "navigationBarBackgroundColor": "#ffffff", //頂部導航欄背景色
  "navigationBarTextStyle": "black", //頂部導航文字的顏色 black/white
  "navigationBarTitleText": "微信接口功能演示", //頂部導航的顯示文字
  "backgroundColor": "#eeeeee", //窗口的背景色
  "backgroundTextStyle": "light", //下拉背景字體、loading 圖的樣式，僅支持 dark/light
  "enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的話就直接不寫！
  "disableScroll": true, //  設置true不能上下滾動，true/false，注意！只能在 page.json 中有效，無法在 app.json 中設置該項。
},
"tabBar": { //底部tab或者頂部tab的表現，是個數組，最少配置2個，最多5個
  "list": [{ //設置tab的屬性，最少2個，最多5個
    "pagePath": "pages/index/index", //點擊底部 tab 跳轉的路徑
    "text": "首頁", //tab 按鈕上的文字
    "iconPath": "../img/a.png", //tab圖片的路徑
    "selectedIconPath": "../img/a.png" //tab 在當前頁，也就是選中狀態的路徑
  }, {
    "pagePath": "pages/logs/logs",
    "text": "日誌"
  }],
  "color": "red", //tab 的字體顏色
  "selectedColor": "#673ab7", //當前頁 tab 的顏色，也就是選中頁的
  "backgroundColor": "#2196f3", //tab 的背景色
  "borderStyle": "white", //邊框的顏色 black/white
  "position": "bottom" //tab處於窗口的位置 top/bottom
  },
"networkTimeout": { //默認都是 60000 秒一分鐘
    "request": 10000, //請求網絡超時時間 10000 秒
    "downloadFile": 10000， //鏈接服務器超時時間 10000 秒
      "uploadFile": "10000", //上傳圖片 10000 秒
    "downloadFile": "10000" //下載圖片超時時間 10000 秒
  },
"debug": true //項目上線後，建議關閉此項，或者不寫此項

• app.wxss 是小程序的公共樣式表，可以在其他.wxss文件中直接使用

4、pages文件夾

pages文件夾裏是小程序的各個頁面，每個界面一般都由.wxml、.wxss、.js、.json四個文件組成，四個文件必須是相同的名字和路徑

• .js 是頁面的腳本代碼，通過Page()函數註冊頁面。可以指定頁面的初始數據、生命週期、事件處理等

• .wxml 是頁面的佈局文件，只能使用微信定義的組件

• .wxss 是樣式表，需要注意

1、尺寸單位：rpx可以根據屏幕的寬帶進行自適應

2、樣式導入：@import導入外聯樣式表，如：@import “test.wxss”;

3、定義在app.wxss中的全局樣式，作用於每個頁面。定義在page的.wxss文件只作用於對應的頁面，會覆蓋app.wxss中相同的選擇器

• .json 是頁面的配置文件，只能設置app.json中的window配置內容，會覆蓋app.json中window的相同配置項

5、utils文件

utils 裏面包含一些公共的代碼抽取的js文件，作爲模塊方便使用。模塊通過module.exports對外暴露接口

• 其他地方使用是var utils = require(’…/…/utils/util.js’) 進行引用

//util裏聲明方法
import UmfLog from '../utils/UmfLog';
/**
 * 調試工具
 */
class DebugUtils {
    /**
     * 初始化加載配置信息
     */
    initConfig() {
        UmfLog.error("[DEBUG]初始化調試工具");
        UmfLog.error("[DEBUG]警告：生產環境請關閉調試環境");
        //初始化環境
        this._setEnv();
    }

}

let debugUtils = new DebugUtils();
module.exports = debugUtils;

//在其他頁面調用
import DebugUtils from './utils/DebugUtils';
  App({
     init: function() {
    //初始化調試工具(生產環境不能打開調試工具)
    if (DebugUtils.isDebug()) {
      DebugUtils.initConfig();
  },
})
 

視圖層 WXML

---

1、數據綁定

那麼微信小程序是通過什麼方法來管理視圖和對象綁定的呢

• 數據流向是單向的，即視圖變化不會影響對象狀態
• .wxml 中的動態數據都來自Page中的data。數據綁定使用數據綁定使用雙大括號將變量包起來，可以作用於內容、組件屬性(需要在雙引號之內)、控制屬性(需要在雙引號之內)、關鍵字(需要在雙引號之內)

<view class='item item-{{myclass===true?"red":"blue"}}'>
  </view>

2、有哪些指令？

• wx:for 循環

<view class='item item-{{myclass===true?"red":"blue"}}'>
    <view wx:for="{{myAry}}" >
      {{index}}: {{item.name}}--{{item.value}}
    </view>
    <view wx:for="{{myAry}}" wx:for-index="ind" wx:for-item="items">
      {{ind}}: {{items.name}}--{{items.value}}
    </view>
  </view>

• wx:if wx:elif wx:else hidden 條件渲染

//hidden爲true時dom結構還在 wx:if爲true時則沒有
<view hidden="{{status ? true : false}}"> Hidden </view>
<view wx:if="{{num > 6}}"> </view>

3、ajax請求

wx.request()方法可以參考wx官方api

 wx.request({
      url: 'url',
      method: "GET",
      header: {
        'content-type': 'json'
      },
      success(res) {
        console.log(res)
     
      }
    });

組件之間通信

---

可以參考wx官方api

子 - Component

child.json

{
  "component": true,
  "usingComponents": {}
}

child.wxml

<view class='template-child'>
  <block wx:for='{{dataFromParent}}'>
    <button data-id='{{item.id}}' bindtap='onTapChild'>{{item.name}}</button>
  </blcok>
</view>

child.js

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    dataFromParent: {
      type: Array,
      value: [],
      observer: function (newVal, oldVal, changedPath) {
        // 屬性被改變時執行的函數（可選），也可以寫成在methods段中定義的方法名字符串
        // 通常 newVal 就是新設置的數據， oldVal 是舊數據
      }
    }
  },

  /**
   * 組件的初始數據
   */
  data: { },

  /**
   * 組件的方法列表
   */
  methods: {

    onTapChild: function(event){

      // detail對象，提供給事件監聽函數
      var myEventDetail = {
        id: event.currentTarget.dataset.id
      } 
      // 觸發事件的選項
      var myEventOption = {} 
      // 使用 triggerEvent 方法觸發自定義組件事件，指定事件名、detail對象和事件選項
      this.triggerEvent('parentEvent', myEventDetail, myEventOption)
    }
  }
})

父 - Page

parent.json

{
  "usingComponents": {
    "child": "../component/child/child"
  }
}

parent.wxml

//可以用 bind:parentEvent  也可以 bindparentEvent 
<view class='parent-wrap'>
  <view>這裏是父容器, dataFromParent是傳遞給子組件的數據， parentEvent是自定義組件可觸發的事件名</view>
  <child dataFromParent='{{contents}}' bind:parentEvent='onParentEvent'/>
</view>

parent.js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    contents: [
      {
        id: 1,
        name: '點擊第 1 個按鈕'
      },
      {
        id: 2,
        name: '點擊第 2 個按鈕'
      }
    ]
  },

  // 當自定義組件觸發 parentEvent 事件時，調用 onParentEvent 方法
  onParentEvent: function (event) {
    // 自定義組件觸發事件時提供的detail對象，用來獲取子組件傳遞來的數據
    var id = event.detail.tag;
    console.log('子組件傳遞來的數據 id:', id);
    // 其他操作...
  }
})

頁面跳轉方式

---

(1)標籤跳轉 可以參考navigator

//
<navigator url="/page/navigate/navigate?title=navigate" open-type="switchTab" hover-class="navigator-hover">跳轉到新頁面</navigator>

• app-id 設置要跳轉的小程序的APPID

• path 配置跳轉後進入的頁面

• extra-data 可以設置要攜帶的數據

• version是要打開的小程序版本

• navigator的open-type屬性 可選值 ‘navigate’、‘redirect’、‘switchTab’，對應於wx.navigateTo、wx.redirectTo、wx.switchTab的功能

• open-type="navigate"等價於API的　wx.navigateTo　而wx.navigateTo的url是需要跳轉的應用內非 tabBar 的頁面的路徑

• open-type="redirect"等價於API的　wx.redirectTo　而wx.redirectTo的url是需要跳轉的應用內非 tabBar 的頁面的路徑

• open-type="switchTab"等價於API的　wx.switchTab而wx.switchTab的url是需要跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面

• 最後一個switchTab事件觸發以後　把前面的頁面都關閉了

(2)wx.navigateTo 方法跳轉 （從跳轉的頁面會回到url頁）

a頁面

// a.wxml 綁定跳轉函數
   <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

//a.js 
 //事件處理函數
  bindViewTap: function() {
    var id = this.data.num; 
    wx.navigateTo({
      url: '../logs/logs?id='+id
    })
  },

b頁面

//b.js 頁面接收參數
  onLoad: function (options) { //options用於接收上個頁面傳遞過來的參數
    console.log('options==', options)//options== {id: "2"}
    this.setData({//this.setData的方法用於把傳遞過來的id轉化成小程序模板語言
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  }

(3)wx.switchTab 方法跳轉只適用於調轉到設置了tabbar的頁面

wx.switchTab({
url: 'pages/index/index'
 })

(4)wx.redirectTo 方法跳轉會關閉當前頁面跳轉到某個頁面

wx.redirectTo({
 url: 'pages/a/a'
 })

(5)wx.reLaunch 方法跳轉會關閉所有打開的頁面，跳轉到某個頁面

wx.reLaunch({
 url: 'pages/a/a'
 })

(6)wx.navigateBack 方法返回到父頁面 ，可以多級返回

 //假如有A、B、C三個頁面 在C頁面內 navigateBack，將返回A頁面
3 wx.navigateBack({
4 delta: 2 //跳轉的級數
5 })

生命週期

---

通常指程序從創建、開始、暫停、喚起、停止、卸載的過程。小程序的生命週期又可分爲應用生命週期和頁面的生命週期

1、應用生命週期

應用生命週期指得是小程序本身的初始化加載、方法以及最終被銷燬的過程。

1、用戶首次打開小程序，觸發onLaunch,用於監聽小程序初始化,整個應用生命週期中只觸發一次；

2、初始化之後，觸發onShow監聽小程序顯示，小程序啓動或從後臺進入前臺顯示，會觸發 onShow；

3、小程序用前臺進入後臺，觸發onHide方法；

4、小程序在後臺允許一定時間，或系統資源佔用過高，會被銷燬；

• 在上面提到的前臺和後臺，給出的解釋是：用戶點擊右上角關閉、按home健離開微信返回主頁，這些情況屬於小程序進入後臺但沒有直接銷燬，只有在小程序進入後臺一段時間，或者系統資源佔用過高的情況纔會被銷燬，就是說小程序的銷燬是需要額外的條件，而非是直接進入後臺就銷燬；當再次打開微信或打開小程序就稱爲從後臺進入前臺；

2、頁面的生命週期

小程序的頁面生命週期是指程序內部某個頁面從進入到離開或某個頁面到另一個頁面的過程

1、小程序註冊完成後，加載頁面，觸發onLoad方法，一個頁面只會調用一次。

2、頁面載入後觸發onShow方法，顯示頁面，每次打開頁面都會調用一次。

3、首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次。

4、當小程序後臺運行或跳轉到其他頁面時，觸發onHide方法。

5、當小程序有後臺進入到前臺運行或重新進入頁面時，觸發onShow方法
。

6、當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload

3、wx.navigateTo跳轉狀態下，頁面A和頁面B的生命週期邏輯

1、進入A頁面：A執行onLoad()–>onShow()–>onReady()；

2、A頁面navigateTo B頁面：A執行onHide()，B執行onLoad()–>onShow()–>onReady()；

3、B頁面返回A頁面：B執行onUnload()，A執行onShow()；

4、退出A頁面：A執行onUnload()。

4、應用生命週期和頁面生命週期

1、小程序初始化完成後，頁面首次加載觸發onLoad，只會觸發一次。

2、當小程序進入到後臺，先執行頁面onHide方法再執行應用onHide方法。

3、當小程序從後臺進入到前臺，先執行應用onShow方法再執行頁面onShow方法。應用生命週期和頁面生命週期不是分開的，兩者一起進行，相互交叉使用，會用到相同的方法，比如onShow和onHide。

小程序如何引入其他ui組件

---

1、在GitHub上 https://github.com/Tencent/weui-wxss 下載程序代碼，解壓後可以看到如下目錄：

2、將weui.wxss文件導入到小程序項目的根目錄下，
在全局app.wxss中加入weui.wxss的引用- @import “weui.wxss”;

3、使用參見文檔
http://jqweui.cn/components#grid

//button
<button class="weui-btn" type="primary">頁面主操作 Normal</button>
//列表
<view class="weui-cells">
  <view class="weui-cell">
    <view class="weui-cell__bd">
      <text>標題文字</text>
    </view>
    <view class="weui-cell__ft">說明文字</view>
  </view>
</view>