微信小程式並不支援async,寫起程式碼來太不舒服了.
各種回呼會造成回呼地獄的問題,回呼函數一層套著一層,程式碼難以閱讀,後期難以維護的問題
解決方法:
使用regenerator-runtime
生成器函數、async、await函數經babel編譯後,regenerator-runtime模組用來提供功能實作。
在 app.js中引入,並註冊全域物件中.
app.js
import regeneratorRuntime from './lib/runtime' App({ ... regeneratorRuntime, onLaunch(){}, onShow() {}, onHide() {}, ... })
登入後複製
request.js
const METHOD = { GET: 'GET', POST: 'POST', PUT: 'PUT', DELETE: 'DELETE' } let baseUrl = '' const interceptors = [] class Request { /** * response interceptor */ intercept(res, resolve, reject) { return interceptors .filter((f) => typeof f === 'function') .every((f) => f(res, resolve, reject)) } /** * request */ request(option) { const header = { 'content-type': 'application/x-www-form-urlencoded' } const { url, method, data = {} } = option return new Promise((resolve, reject) => { try { wx.request({ url: baseUrl + url, method: method || METHOD.GET, data, header, success: (res) => this.intercept(res, resolve, reject), fail: (err) => { if ( err && err.errMsg && err.errMsg.indexOf('request:fail') !== -1 ) { console.error('wx request error: ', err) } else { wx.showToast({ title: JSON.stringify(err), icon: 'none', duration: 10000 }) } } }) } catch (err) { wx.showToast({ title: err.message, icon: 'none' }) } }) } get(url, data) { return this.request({ url, method: METHOD.GET, data }) } post(url, data) { return this.request({ url, method: METHOD.POST, data }) } put(url, data) { return this.request({ url, method: METHOD.PUT, data }) } delete(url, data) { return this.request({ url, method: METHOD.DELETE, data }) } all(tasks) { return Promise.all(tasks) } } /** * 设置base URL */ function setBaseUrl(url) { baseUrl = url } /** * 默认response拦截器 */ function addDefaultInterceptor() { interceptors.push((res, resolve, reject) => { const status = res.statusCode if (status !== 200) { return reject(new Error(`internet error: ${status}`)) } const body = res.data if (body.errno !== 0) { return reject({ message: body.error, body }) } return resolve(body.data) }) } const request = new Request() export { setBaseUrl, addDefaultInterceptor, request }
登入後複製
import { request, setBaseUrl, addDefaultInterceptor } from './lib/request' addDefaultInterceptor() App({ ... async onLaunch() { const userInfo = await request.get('/user/info') console.log(userInfo) } ... })
登入後複製
/** * promise微信API方法 */ function wxPromise(api) { function func(options, ...params) { return new Promise((resolve, reject) => { api( Object.assign({}, options, { success: (res) => { resolve(res) }, fail: reject }), ...params ) }) } return func } export default { // 界面交互 showToast: wxPromise(wx.showToast), showLoading: wxPromise(wx.showLoading), showModal: wxPromise(wx.showModal), showActionSheet: wxPromise(wx.showActionSheet), // 导航条 setNavigationBarTitle: wxPromise(wx.setNavigationBarTitle), setNavigationBarColor: wxPromise(wx.setNavigationBarColor), setTopBarText: wxPromise(wx.setTopBarText), // 导航 navigateTo: wxPromise(wx.navigateTo), redirectTo: wxPromise(wx.redirectTo), switchTab: wxPromise(wx.switchTab), reLaunch: wxPromise(wx.reLaunch), // 用户相关 login: wxPromise(wx.login), checkSession: wxPromise(wx.checkSession), authorize: wxPromise(wx.authorize), getUserInfo: wxPromise(wx.getUserInfo), // 支付 requestPayment: wxPromise(wx.requestPayment), // 图片 chooseImage: wxPromise(wx.chooseImage), previewImage: wxPromise(wx.previewImage), getImageInfo: wxPromise(wx.getImageInfo), saveImageToPhotosAlbum: wxPromise(wx.saveImageToPhotosAlbum), // 文件 uploadFile: wxPromise(wx.uploadFile), downloadFile: wxPromise(wx.downloadFile), // 录音 startRecord: wxPromise(wx.startRecord), // 音频播放 playVoice: wxPromise(wx.playVoice), // 音乐播放 getBackgroundAudioPlayerState: wxPromise(wx.getBackgroundAudioPlayerState), playBackgroundAudio: wxPromise(wx.playBackgroundAudio), seekBackgroundAudio: wxPromise(wx.seekBackgroundAudio), // 视频 chooseVideo: wxPromise(wx.chooseVideo), saveVideoToPhotosAlbum: wxPromise(wx.saveVideoToPhotosAlbum), // 文件 saveFile: wxPromise(wx.saveFile), getFileInfo: wxPromise(wx.getFileInfo), getSavedFileList: wxPromise(wx.getSavedFileList), getSavedFileInfo: wxPromise(wx.getSavedFileInfo), removeSavedFile: wxPromise(wx.removeSavedFile), openDocument: wxPromise(wx.openDocument), // 数据缓存 setStorage: wxPromise(wx.setStorage), getStorage: wxPromise(wx.getStorage), getStorageInfo: wxPromise(wx.getStorageInfo), removeStorage: wxPromise(wx.removeStorage), // 位置 getLocation: wxPromise(wx.getLocation), chooseLocation: wxPromise(wx.chooseLocation), openLocation: wxPromise(wx.openLocation), // 设备 getSystemInfo: wxPromise(wx.getSystemInfo), getNetworkType: wxPromise(wx.getNetworkType), startAccelerometer: wxPromise(wx.startAccelerometer), stopAccelerometer: wxPromise(wx.stopAccelerometer), startCompass: wxPromise(wx.startCompass), stopCompass: wxPromise(wx.stopCompass), // 打电话 makePhoneCall: wxPromise(wx.makePhoneCall), // 扫码 scanCode: wxPromise(wx.scanCode), // 剪切板 setClipboardData: wxPromise(wx.setClipboardData), getClipboardData: wxPromise(wx.getClipboardData), // 蓝牙 openBluetoothAdapter: wxPromise(wx.openBluetoothAdapter), closeBluetoothAdapter: wxPromise(wx.closeBluetoothAdapter), getBluetoothAdapterState: wxPromise(wx.getBluetoothAdapterState), startBluetoothDevicesDiscovery: wxPromise(wx.startBluetoothDevicesDiscovery), stopBluetoothDevicesDiscovery: wxPromise(wx.stopBluetoothDevicesDiscovery), getBluetoothDevices: wxPromise(wx.getBluetoothDevices), getConnectedBluetoothDevices: wxPromise(wx.getConnectedBluetoothDevices), createBLEConnection: wxPromise(wx.createBLEConnection), closeBLEConnection: wxPromise(wx.closeBLEConnection), getBLEDeviceServices: wxPromise(wx.getBLEDeviceServices), // iBeacon startBeaconDiscovery: wxPromise(wx.startBeaconDiscovery), stopBeaconDiscovery: wxPromise(wx.stopBeaconDiscovery), getBeacons: wxPromise(wx.getBeacons), // 屏幕亮度 setScreenBrightness: wxPromise(wx.setScreenBrightness), getScreenBrightness: wxPromise(wx.getScreenBrightness), setKeepScreenOn: wxPromise(wx.setKeepScreenOn), // 振动 vibrateLong: wxPromise(wx.vibrateLong), vibrateShort: wxPromise(wx.vibrateShort), // 联系人 addPhoneContact: wxPromise(wx.addPhoneContact), // NFC getHCEState: wxPromise(wx.getHCEState), startHCE: wxPromise(wx.startHCE), stopHCE: wxPromise(wx.stopHCE), sendHCEMessage: wxPromise(wx.sendHCEMessage), // Wi-Fi startWifi: wxPromise(wx.startWifi), stopWifi: wxPromise(wx.stopWifi), connectWifi: wxPromise(wx.connectWifi), getWifiList: wxPromise(wx.getWifiList), setWifiList: wxPromise(wx.setWifiList), getConnectedWifi: wxPromise(wx.getConnectedWifi), // 第三方平台 getExtConfig: wxPromise(wx.getExtConfig), // 转发 showShareMenu: wxPromise(wx.showShareMenu), hideShareMenu: wxPromise(wx.hideShareMenu), updateShareMenu: wxPromise(wx.updateShareMenu), getShareInfo: wxPromise(wx.getShareInfo), // 收货地址 chooseAddress: wxPromise(wx.chooseAddress), // 卡券 addCard: wxPromise(wx.addCard), openCard: wxPromise(wx.openCard), // 设置 openSetting: wxPromise(wx.openSetting), getSetting: wxPromise(wx.getSetting), // 微信运动 getWeRunData: wxPromise(wx.getWeRunData), // 打开小程序 navigateToMiniProgram: wxPromise(wx.navigateToMiniProgram), navigateBackMiniProgram: wxPromise(wx.navigateBackMiniProgram), // 获取发票抬头 chooseInvoiceTitle: wxPromise(wx.chooseInvoiceTitle), // 生物认证 checkIsSupportSoterAuthentication: wxPromise(wx.checkIsSupportSoterAuthentication), startSoterAuthentication: wxPromise(wx.startSoterAuthentication), checkIsSoterEnrolledInDevice: wxPromise(wx.checkIsSoterEnrolledInDevice) }
登入後複製
以上為小程式基本的api整理,貼出來供大家使用~
import wxp from './lib/wxp'
App({
...
wxp,
async onLaunch() {
const res = await wxp.getSystemInfo()
console.log(res)
}
...
})
登入後複製
import wxp from './lib/wxp' App({ ... wxp, async onLaunch() { const res = await wxp.getSystemInfo() console.log(res) } ... })
登入後複製