微信小程序學習

1、基礎介紹

小程序是什麼

小程序能夠視爲只能用微信打開和瀏覽的網站。小程序和網頁的技術模型是同樣的，用到的 JavaScript 語言和 CSS 樣式也是同樣的，只是網頁的 HTML 標籤被修改爲了 WXML 標籤，CSS標籤被修改爲了WXSS標籤。css

小程序最大的優點就是基於微信，也不須要考慮iOS和Android不一樣平臺間的差別，同時微信也提供了豐富的API接口，例如拍攝、錄音、語音識別、二維碼等，小程序能夠利用原生能力，快速進行開發。html

開發準備

去微信公衆平臺註冊，申請一個AppId。android
下載小程序開發工具，微信開發者工具。git

建立一個項目

調試運行項目

小程序支持實時預覽，代碼修改後，左邊預覽窗口就能夠直接看到修改後的效果。github

也能夠點擊預覽按鈕，經過微信的掃一掃在手機上體驗。web

2、小程序項目結構

小程序包含一個描述總體程序的 app 和若干個描述頁面的 page 組成。json

一個小程序主體部分由三個文件組成，必須放在項目的根目錄，以下：小程序

文件	必需	做用
app.js	是	小程序邏輯
app.json	是	小程序公共配置
app.wxss	否	小程序公共樣式表

一個小程序頁面由四個文件組成，分別是：微信小程序

文件類型	必需	做用
js	是	頁面邏輯
wxml	是	頁面結構
json	否	頁面配置
wxss	否	頁面樣式表

註冊小程序

每一個小程序都須要在 app.js 中調用 App 方法註冊小程序實例，綁定生命週期回調函數、錯誤監聽和頁面不存在監聽函數等。詳細的參數含義和使用請參考 App 參考文檔。api

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})
複製代碼

整個小程序只有一個 App 實例，是所有頁面共享的。開發者能夠經過 getApp 方法獲取到全局惟一的 App 實例，獲取App上的數據或調用開發者註冊在 App 上的函數。它的做用有些相似Android 中的 Application。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
複製代碼

全局配置

app.json 小程序的全局配置，用於聲明頁面文件的路徑、窗口顯示、設置多tab等。完整配置項說明請參考小程序全局配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日誌"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
複製代碼

註冊頁面

小程序的每一個頁面，都須要在頁面對應的js文件中進行註冊，同時能夠指定頁面的初始數據、生命週期回調、事件處理函數等。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 頁面建立時執行
  },
  onShow: function() {
    // 頁面出如今前臺時執行
  },
  onReady: function() {
    // 頁面首次渲染完畢時執行
  },
  onHide: function() {
    // 頁面從前臺變爲後臺時執行
  },
  onUnload: function() {
    // 頁面銷燬時執行
  },
  onPullDownRefresh: function() {
    // 觸發下拉刷新時執行
  },
  onReachBottom: function() {
    // 頁面觸底時執行
  },
  onShareAppMessage: function () {
    // 頁面被用戶分享時執行
  },
  onPageScroll: function() {
    // 頁面滾動時執行
  },
  onResize: function() {
    // 頁面尺寸變化時執行
  },
  onTabItemTap(item) {
    // tab 點擊時執行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})
複製代碼

詳細的參數含義和使用請參考 Page 參考文檔。

頁面配置

每個小程序頁面也可使用同名 .json 文件來對本頁面的窗口表現進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

完整配置項說明請參考小程序頁面配置

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}
複製代碼

3、頁面

WXML 模板

wxml文件用來描述頁面展現的代碼：

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像暱稱 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
複製代碼

它和html頁面主要有如下兩個區別：

標籤名字不太同樣，微信小程序提供了豐富的組件供開發者使用，因此不須要使用相似 div、p、span的基礎標籤。
多了一些wx:if="{{!hasUserInfo && canIUse}}"這種{{}}的表達式，用的是 MVVM 的開發模式，將頁面渲染和邏輯進行分離。經過 {{ }} 的語法把一個變量綁定到界面上，稱爲數據綁定。僅僅經過數據綁定還不夠完整的描述狀態和界面的關係，還須要 if/else, for等控制能力，在小程序裏邊，這些控制能力都用 wx: 開頭的屬性來表達。

JS交互邏輯

小程序爲組件提供了不少交互屬性，且使用很是簡單：

//xxx.wxml
<view>{{ msg }}</view>
<button bindtap="clickMe">點擊我</button>

//xxx.js
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})
複製代碼

更詳細的事件能夠參考文檔 WXML - 事件。

這裏須要注意的是，直接修改 this.data 而不調用 this.setData 是沒法改變頁面的狀態的。

頁面跳轉

框架以棧的形式維護了當前的全部頁面。當發生頁面切換的時候，頁面棧的表現以下：

路由方式	頁面棧表現	API
打開新頁面	新頁面入棧	wx.navigateTo
頁面重定向	當前頁面出棧，新頁面入棧	wx.redirectTo
頁面返回	頁面不斷出棧，直到目標返回頁	wx.navigateBack
Tab 切換	頁面所有出棧，只留下新的 Tab 頁面	wx.switchTab
重加載	頁面所有出棧，只留下新的頁面	wx.reLaunch

開發者可使用 getCurrentPages() 函數獲取當前頁面棧。

具體使用：

//跳轉到test界面
  skipTest(event) {
    wx.navigateTo({
      url: '../test/test',
    })
  }
複製代碼

4、API 使用

存儲

每一個微信小程序都有本身的本地緩存，能夠經過 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync 對本地緩存進行讀寫和清理。

其中以 Sync 結尾的表明同步操做，兩者的區別在於，異步不會阻塞當前任務。

具體使用：

setStorageTest(event) {
    wx.setStorage({
      key: 'name',
      data: 'huangm',
      success(res) {
        console.log("storage success")
      }
    })
    console.log("storage end")
  }, 
  getStorageTest(event) {
    const that = this
    wx.getStorage({
      key: 'name',
      success (res) {
        that.setData({
          name: res.data
        })
        console.log(res.data)
      }
    })
    console.log('get Storage end')
  },
  deleteStorageTest(event) {
    const that = this
    wx.removeStorage({
      key: 'name',
      success(res) {
        that.getStorageTest()
      }
    })
  }
複製代碼

隔離策略

同一個微信用戶，同一個小程序 storage 上限爲 10MB。storage 以用戶維度隔離，同一臺設備上，A 用戶沒法讀取到 B 用戶的數據；不一樣小程序之間也沒法互相讀寫數據。

網絡請求

小程序支持普通 HTTPS 請求（wx.request）、上傳文件（wx.uploadFile）、下載文件（wx.downloadFile) 和 WebSocket 通訊（wx.connectSocket）。

具體使用：

wx.request({
      url: 'https://www.wanandroid.com/banner/json',
      success (res) {
        console.log(res.data.data)
        that.setData({
          bannerList: res.data.data
        })
      }
    })
複製代碼

調用Native方法

小程序提供不少設備相關API，如日曆、聯繫人、藍牙、電量、掃碼等。

使用以下：

wx.scanCode({
      onlyFromCamera: true,
      success(res) {
        console.log(res)
      },
      fail(res) {
        console.log(res)
      }
    })
複製代碼

5、自定義組件

在現有官方組件沒法知足咱們開發需求的時候，小程序也支持自定義組件。

組件模板

組件模板和頁面相似，也是包含 xxx.js、xxx.wxml、xxx.wxss、xxx.json

建立一個button組件

配置組件，testbutton.json

{
  "component" : true
}
複製代碼

繪製界面和樣式

testbutton.wxml

<view class="test-button" bindtap="onClick">
  {{content}}
</view>
複製代碼

testbutton.wxss

.test-button {
  width: 100%;
  height: 100rpx;
  background-color: burlywood;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center; 
  color: cornflowerblue;
}
複製代碼

構造組件

Component 構造器能夠指定組件的屬性、數據、方法等，具體使用能夠參考 Component 構造器。

testbutton.js

Component({
  //聲明屬性
  properties:{
    content:{
      type: String,
      value: 'test'
    }
    
  },
  methods: {
    onClick: function() {
      console.log('test button onclick')
      var myEventDetail = {
        toastContent: 'This is a test-button'
      }
      var myEventOption = {}
      //聲明事件，組件間傳遞數據
      this.triggerEvent('onClick', myEventDetail, myEventOption)
    }
  }

})
複製代碼

使用自定義組件

使用的界面須要經過 usingComponents 引用該組件

{
  "usingComponents": {   
    "Test-Button": "/component/testbutton/testbutton"
  },
  "navigationBarTitleText": "項目"
}
複製代碼

界面中直接使用該標籤

<Test-Button content="This is a test-button" bindonClick="onClick"></Test-Button>
複製代碼

點擊後彈出一個toast

onClick(event) { 
    console.log(event)   
    wx.showToast({
      title: event.detail.toastContent,
      duration: 2000
    })
  }
複製代碼

6、博客閱讀demo開發

經過開發一個簡單的demo，能夠對以上的內容有更直觀的瞭解。

玩Android API：www.wanandroid.com/blog/show/2

tab主界面，展現最近博客列表

2. 點擊瀏覽具體文章

根據做者，展現文章列表

demo地址

參考：

官方文檔

微信小程序入門教程之一：初次上手

一個漂亮玩安卓小程序版本wanandroid-mini