[TOC]
## 3.6 設備能力
小程序的宿主環境提供了非常多的操作設備能力來幫助用戶在特定場景下做高效的輸入,例如:掃碼、操控藍牙等等能力。當然也有很多設備能力不是為了解決輸入低效問題而設計的,它們更多的是解決用戶側一些體驗問題,例如:獲取設備網絡狀態;調整屏幕亮度等等,
### 3.6.1 利用微信掃碼能力`wx.scanCode`
為了讓用戶減少輸入,我們可以把復雜的信息編碼成一個二維碼,利用宿主環境wx.scanCode這個API調起微信掃一掃,用戶掃碼之后,wx.scanCode的success回調會收到這個二維碼所對應的字符串信息。
代碼清單4-19 利用wx.scanCode獲取二維碼的數據
~~~
//page.js
Page({
// 點擊“掃碼訂餐”的按鈕,觸發tapScan回調
tapScan: function() {
// 調用wx.login獲取微信登錄憑證
wx.scanCode({
success: function(res) {
var num = res.result // 獲取到的num就是餐桌的編號
}
})
}
})
~~~
應用場景:
1. 通過掃商品上的二維碼做一個商品展示的小程序
2. 通過掃共享單車上的二維碼去開啟單車
3. 餐廳點餐的小程序,我們給餐廳中每個餐桌編號1-100號,把這個數字編碼到二維碼(也可以把其他信息編碼進來,如餐桌人數限制,或者燈光調節等等,為了避免復雜,我們這里只考慮餐桌號)中,掃碼獲得編號之后,就可以知道是哪一桌點的菜,大大提高點餐體驗和效率。
### 3.6.2 獲取網絡狀態`wx.getNetworkType`
我們知道手機連接到互聯網有幾種方式:Wifi、2G、3G、4G,包括很快到來的5G,每種方式的上傳速度和下載速度差異很大,它們的計費方式的差異也導致用戶在使用互聯網服務的時候有不同的使用習慣。
通過小程序提供的獲取網絡狀態的能力,做一些更友好的體驗提示。
代碼清單4-20 利用wx.getNetworkType獲取網絡狀態
~~~
//page.js
Page({
// 點擊“預覽文檔”的按鈕,觸發tap回調
tap: function() {
wx.getNetworkType({
success: function(res) {
// networkType字段的有效值:
// wifi/2g/3g/4g/unknown(Android下不常見的網絡類型)/none(無網絡)
if (res.networkType == 'wifi') {
// 從網絡上下載pdf文檔
wx.downloadFile({
url:'http://test.com/somefile.pdf',
success: function (res) {
// 下載成功之后進行預覽文檔
wx.openDocument({
filePath: res.tempFilePath
})
}
})
} else {
wx.showToast({ title: '當前為非Wifi環境' })
}
}
}
}
})
~~~
### 3.6.3 動態監聽網絡狀態變化`wx.onNetworkStatusChange`
某些情況下,我們的手機連接到網絡的方式會動態變化,例如手機設備連接到一個信號不穩定的Wifi熱點,導致手機會經常從Wifi切換到移動數據網絡。小程序宿主環境也提供了一個可以動態監聽網絡狀態變化的接口`wx.onNetworkStatusChange`,讓開發者可以及時根據網絡狀況去調整小程序的體驗,wx.onNetworkStatusChange這個接口的使用場景留給讀者來思考。
- 微信
- 小程序
- 1. 代碼組成
- 1.1 JSON配置--'*.json'文件
- 1.2 WXML模板--'*.wxml'文件
- 1.3 WXSS樣式--'*.wxss'文件
- 1.4 JavaScript腳本--'*.js'文件
- 2. 客戶端運行
- 2.1 邏輯層和渲染層
- 2.1.1 邏輯層--App Service
- 2.1.2 渲染層/視圖層--View
- 2.1.3 通信模型
- 2.1.4 數據驅動
- 2.1.5 雙線程下的界面渲染
- 2.2 程序與頁面
- 2.3 組件
- 2.4 API
- 2.5 事件
- 2.6 兼容
- 3. 應用設計
- 3.1 Flex布局
- 3.2 界面常見的交互反饋
- 3.3 發起HTTPS網絡通信--wx.request
- 3.4 微信登錄
- 3.5 本地數據緩存
- 3.6 設備能力
- 4. 小程序的協同工作和發布
- 4.1 協同工作
- 4.2 用戶體驗審視
- 4.3 發布
- 4.4 運營
- 5. 底層框架
- 5.1 雙線程模型
- 5.2 組件系統--Exparser框架
- 5.3 原生組件
- 5.4 小程序與客戶端通信原理
- 6. 運行和性能優化
- 6.1 啟動--代碼加載
- 6.2 頁面準備
- 6.3 數據通信
- 6.4 視圖層渲染
- 6.5 原生組件通信
- 7. 小程序基礎庫的更新迭代
- 8. 微信開發者工具
- 騰訊云支持
- wafer
- Wafer2 快速開發 Demo - PHP
- WXAPI
- api列表