广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
微信小程序并不支持async,写起代码来太不舒服了. 各种回调会造成回调地狱的问题,回调函数一层套着一层,代码难以阅读,后期难以维护的问题
解决办法:使用regenerator-runtime
regenerator-runtime是facebook的regenerator模块 生成器函数、async、await函数经babel编译后,regenerator-runtime模块用于提供功能实现。
引入facebook/regenerator 中的packages/regenerator-runtime/runtime.js
步骤1 引入并注册因全局都要用到,所有在app.js
中引入,并注册全局对象中.
app.js
import regeneratorRuntime from './lib/runtime'App({ ... regeneratorRuntime, onLaunch(){}, onShow() {}, onHide() {}, ...})登录后复制步骤2 封装request
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 }登录后复制步骤3 使用async await
如:
import { request, setBaseUrl, addDefaultInterceptor } from './lib/request'addDefaultInterceptor()App({ ... async onLaunch() { const userInfo = await request.get('/user/info') console.log(userInfo) } ...})登录后复制小程序原生api使用async await
不用再写各种success、fail等回调了,代码清晰很多,易读性更强.
步骤1 封装原生api用Promise化wxp.js
/** * 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) } ...})登录后复制
发表评论