微信小程序

小程序

一種新的應用形態

特性

• 並非HTML5/CSS3的技術
• 拋棄了臃腫的WebView
• 採用了JavaScriptCode動態解析
• C/S架構，不會出現跨域問題
• 大量借鑑React.js + ReactNative.js思想

開放的API

• 視圖容器：視圖(View)、滾動視圖、Swiper
• 基礎內容：圖標、文本、進度條
• 表單組件：按鈕、表單等等
• 操做反饋 導航
• 媒體組建：音頻、圖片、視頻。
• 地圖 畫布 文件操做能力
• 網絡：上傳下載能力、WebSocket
• 數據：數據緩存能力
• 位置：獲取位置、查看位置
• 設備：網絡狀態、系統信息、重力感應、羅盤
• 界面：設置導航條、導航、動畫、繪圖等等
• 開放接口：登陸，包括簽名加密，用戶信息、微信支付、模板消息

開發環境

小程序官網

安裝微信官方微信web開發者工具

項目結構

App
- app.js // 處理全局邏輯
- app.json // 公共配置
- app.wxss // 公共樣式表
pages // 頁面目錄
    index
    - xxx.js // 頁面邏輯
    - xxx.wxml // 頁面視圖
    - xxx.wxss // 頁面樣式
    - xxx.json // 配置文件
utils // 工具庫目錄

---

wxml - WXML -> WeiXin Markup Language 
wxss - WXSS -> Weixin Style Sheet

Page函數

• Page裏面data屬性
• Page.setData函數進行刷新界面數據
• 不能經過this.data = {text: ''}修改data中的所有數據

app.json

pages // 設置頁面路徑，路由
window // 設置默認頁面的窗口
tabBar // 設置底部tab
networkTimeout // 設置網絡超時時間
debug // 開啓debugger

視圖

事件

• 事件是視圖層到邏輯層的通信方式
• 事件能夠將用戶的行爲反饋到邏輯層進行處理
• 事件能夠綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數
• 事件對象能夠攜帶額外信息。 如id，dataset，touches

// 點擊事件
<view bindtap="eventName"></view>

數據修改

this.setData({dataKey: newValue})

// 獲取
this.data.dataName

條件

wx:if

<view wx:if="data"></view>
<view wx:else></view>

循環

wx:for

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

模板

template
模板不會在界面中顯示.

<!-- 定義 -->
<template name="staffName">
  <view>{{name}}</view>
</template>
<!-- 使用 -->
<template is="staffName" data="{{...nameArr}}"></template>

wxml中的引用

<import src="item.wxml" />
<template is="item" data="...dataValue" />

生命週期

Page({

  /**
   * 頁面的初始數據
   */
  data: {
  
  },

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

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

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

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

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
  
  },

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

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

API

wx.request()

請求數據

wx.showLoading()

顯示loading

wx.showToast()

模態框

wx.showLoading({
  title: '加載中'
}) 
wx.request({
  url: '',
  data: {},
  success (res) {
    wx.hideLoading()
  },
  error () {
    wx.hideLoading()
    wx.showToast({
      title: '請求錯誤',
      duration: 2000
    })
  }
})

數據緩存

wx.setStorage() // 設置緩存
wx.getStorage() // 獲取緩存

內置組件

視圖

<view></view> // 視圖容器
<scroll-view></scroll-view> // 可滾動視圖區域
<swiper></swiper> // 滑塊視圖容器

文本，圖片，進度條，圖標

<text></text>

<block>
    <icon></icon>
</block>

<progress></progress>
<image></image>

導航

url須要相對路徑，不支持跳轉外鏈.

<navigator url="../../logs/logs"></navigator>

---

// 跳轉
wx.navigateTo() // 跳轉到指定路由
wx.navigateBack({delta: 2}) // 返回到指定路由/歷史記錄