微信小程式教程04：API（完結）

LeeChen發表於2019-01-27
微信小程式API

閱讀更多系列文章請訪問我的GitHub部落格，示例程式碼請訪問這裡。

該教程示例程式碼：/lesson04/pages/index/index.js、/lesson04/pages/index/index.wxml

wx.showLoading

wx.showLoading用來顯示一個loading提示框，但它不提供duration設定，需主動呼叫 wx.hideLoading 才能關閉提示框，可以通過title屬性顯示loading文字。

wx.showLoading({
  title: 'loading'
})
setTimeout(function () {
  wx.hideLoading()
}, 2000)
複製程式碼

wx.showToast

wx.showToast方法用來顯示一個提示框，title屬性可指定顯示內容，icon屬性指定顯示的圖示型別，為none時即不顯示圖示，duration屬性用來設定提示框顯示的時長。

  wx.showToast({
    title: 'toast',
    icon: 'none',
    duration: 1000
  })
複製程式碼

wx.showActionSheet

wx.showActionSheet方法用來顯示操作選單，在itemList屬性中指定按鈕文案，最大長度為6。

wx.showActionSheet方法有3種回撥方式，分別為success（選中選單時）、fail（點選取消按鈕和背景色）、complete（彈窗收起時），都會傳入結果引數，如{errMsg: "showActionSheet:ok", tapIndex: 0}或{errMsg: "showActionSheet:ok", tapIndex: 0}。

wx.showShareMenu

wx.showShareMenu方法用於顯示當前頁的轉發按鈕，它接受一個withShareTicket引數，為true時會生成一個分享id，可以在小程式後臺追蹤分享結果。

  wx.showShareMenu({
    withShareTicket: true
  })
複製程式碼

wx.getUserInfo

wx.getUserInfo用於獲取使用者資訊，可以在success回撥中獲取使用者資訊。

wx.getUserInfo({
  success(res) {
    console.log(res)
  }
})
複製程式碼

wx.login

wx.login方法與wx.getUserInfo方法不同，它的success回撥資料中的code屬性是使用者的token，如{errMsg: "login:ok", code: "081qfzoj2LluFC0feOlj2gQboj2qfzo5"}。

token每次請求返回都不同，需要將token傳到服務端，由服務端通過code2Session介面獲取到使用者的session_key、openid和unionid，其中是否返回unionid需要看使用者的設定。

code2Session請求地址為：

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
複製程式碼

其中需要的APPID和SECRET，可以在小程式的開發設定頁面中找到。

微信小程式教程04：API（完結）

code2Session的返回值中，session_key主要用來驗證使用者身份，請求使用者的資訊，使用者每次登入時，session_key的值都不同。

openid是僅在當前小程式中唯一的，當前使用者的id，也就是說openid在其他小程式中是不同的。

unionid指的是開發者的多個公眾號和小程式等應用中，對同一個使用者的唯一標識。developers.weixin.qq.com/miniprogram…

wx.scanCode

wx.scanCode方法是用來呼叫微信的掃碼功能，可用scanType屬性指定掃碼型別，在success回撥中接收掃碼結果。

wx.scanCode({
  scanType: ['barCode', 'qrCode'],
  success(res) {
    console.log(res)  // {errMsg: "scanCode:ok", result: "google", scanType: "QR_CODE", charSet: "UTF-8"}
  }
})
複製程式碼

wx.setKeepScreenOn

wx.setKeepScreenOn方法用來使螢幕保持常量狀態，可將keepScreenOn引數設定為true，開啟保持常量。

wx.setKeepScreenOn({
  setKeepScreenOn: true
})
複製程式碼

wx.setScreenBrightness

wx.setScreenBrightness可以設定螢幕亮度，引數value屬性由0~1表示亮度， 0最暗，1最亮。

wx.setScreenBrightness({
  value: 1
})
複製程式碼

wx.getBatteryInfo

wx.getBatteryInfo可用來獲取手機點亮，它還有一個同步版本wx.getBatteryInfoSync，在success回撥中可以獲取資料。

wx.getBatteryInfo({
  success(res) {
    console.log(res)  // {isCharging: false, level: 38, errMsg: "getBatteryInfo:ok"}
  }
})
複製程式碼

wx.connectWifi

wx.connectWifi用來連結WIFI，需要傳入WIFI的SSID和password。

wx.connectWifi({
  SSID: '',
  password: '',
  success(res) {
    console.log(res.errMsg)
  }
})
複製程式碼

wx.startSoterAuthentication

wx.startSoterAuthentication可用來呼叫微信的生物認證。可在requestAuthModes中傳入認證方式，目前僅支援fingerPrint指紋識別。challenge挑戰因子屬性用於校驗呼叫者身份，將作為 resultJSON 的一部分返回給呼叫者。

wx.startSoterAuthentication({
  requestAuthModes: ['fingerPrint'],
  challenge: '123456',
  authContent: '請用指紋解鎖',
  success(res) {
    wx.showToast({
      title: JSON.stringify(res),
      icon: 'none'
    })
  },
  fail(res) {
    wx.showToast({
      title: JSON.stringify(res),
      icon: 'none',
      duration: 100000
    })
  },
})
複製程式碼

wx.downloadFile

wx.downloadFile將會由客戶端直接發起一個 HTTPS GET 請求，可通過url屬性指定一個下載地址，通過filePath指定下載後的儲存路徑。

wx.downloadFile({
  url: 'https://cn.bing.com/sa/simg/hpc26i_2x.png',
  filePath: 'hpc26i_2x.png',
  success(res) {
    toast(JSON.stringify(res))
  },
  fail(res) {
    toast(JSON.stringify(res))
  },
})
複製程式碼

wx.startBluetoothDevicesDiscovery

wx.startBluetoothDevicesDiscovery方法用來搜尋附近的藍芽裝置，在services屬性中可以設定要搜尋的裝置型別。

由於該方法比較消耗系統資源，搜尋並連結成功後可以呼叫wx.stopBluetoothDevicesDiscovery關閉搜尋。

wx.startBluetoothDevicesDiscovery({
  success(res) {
    toast(JSON.stringify(res))
    wx.stopBluetoothDevicesDiscovery()
  },
  fail(res) {
    toast(JSON.stringify(res))
  },
})
複製程式碼

wx.request

wx.request用於網路請求，注意需要將請求的域名設定為合法域名，否則請求會被攔截，在測試時可以在開發工具中選擇不校驗合法域名。

wx.request({
  url: 'https://cn.bing.com/search',
  data: { q: 'abc', safe: 'off' },
  method: 'get',
  dataType: 'text',
  success(res) {
    toast(JSON.stringify(res))
  },
  fail(res) {
    toast(JSON.stringify(res))
  }
})
複製程式碼

結束語

至此，微信小程式教程完結，在我看來，小程式更像是Vue+React+React Native的混合體，有Vue或React相關開發經驗的話入門很簡單。

但小程式基於微信平臺，能夠實現傳統Web開發不具備的很多功能，而且能夠在微信生態圈內發展，作為前端是不能不掌握的重要技能。

相關文章