首頁>編程相關>Ai源碼
下載

mpapi

mpapi（miniProgram API），小程式API 相容插件，一次編寫，多端運行。

⏰ 更新日期: 2019-05-31，小程式功能一直在更新，新版本可能有所差異，請留意。

此專案解決的問題：尋找不同小程式API 之間的差異，盡可能透過一套API 相容多個小程式使用。

特點

  • 一次編寫，多端運行，支援: 微信小程式、支付寶小程式、百度智慧小程式、位元組跳動小程式
  • 支援Promise（包含success 回呼的才有）
  • 針對某些API 使用做了最佳化，如： api.showToast可以直接傳string 、 api.setStorageSync無需呼叫try catch 等
  • 支援特殊API 的事件處理，例如： request 、 downloadFile ，詳情
  • 支持不同端的判斷， api.isWechat 、 api.isAlipay 、 api.isSwan 、 api.isTt

安裝

npm install mpapi --save

非npm 安裝方式，直接引入lib目錄下的mpapi.js到專案即可

使用

 const api = require ( 'mpapi' )

api . alert ( { ... } ) . then ( ( res ) => { } )
api . confirm ( { ... } ) . then ( ( res ) => { } )
api . getLocation ( ) . then ( ( res ) => { } )
. . .

快速查看

  • 相容API 列表
  • 其它包裝成Promise 的API
  • API 差異
  • 使用說明
  • 特殊API 的事件處理， request 、 downloadFile 、 uploadFile等
  • 官方API 文件：微信小程式、支付寶小程式、百度智慧小程式、位元組跳動小程式

相容API列表

所有小程式都可以使用的API

  • 互動

    • alert
    • confirm
    • showToast
    • showLoading
    • showActionSheet

  • 導覽列

    • setNavigationBarTitle
    • setNavigationBarColor

  • 文件

    • saveFile
    • getFileInfo
    • getSavedFileInfo
    • getSavedFileList
    • removeSavedFile

  • 圖片

    • chooseImage
    • previewImage
    • compressImage
    • saveImageToPhotosAlbum

  • 請求

    • request
    • uploadFile
    • downloadFile

  • 資料快取

    • setStorageSync
    • getStorageSync
    • clearStorageSync
    • getStorageInfoSync
    • removeStorageSync

  • 系統設備

    • getSystemInfoSync
    • setScreenBrightness
    • getScreenBrightness
    • makePhoneCall
    • scanCode
    • setClipboardData
    • getClipboardData

其它包裝成Promise的API

只在特定小程式下才會支持

微信小程式wx、支付寶小程式my、百度智能小程式swan、位元組跳動小程式tt，有圖標表示只支援對應小程序，沒有圖標表示都支援。

  • 互動

    • hideToast
    • hideLoading
    • showModal%= lbl %> %= lbl %>%= lbl %>
    • prompt%= lbl %>

  • 快取

    • getStorage
    • setStorage
    • removeStorage
    • getStorageInfo

  • 路由

    • reLaunch
    • switchTab
    • redirectTo
    • navigateTo
    • navigateBack

  • 位置

    • getLocation
    • openLocation
    • chooseLocation%= lbl %> %= lbl %>%= lbl %>

  • 文件圖片

    • saveImage%= lbl %>
    • getImageInfo
    • chooseVideo%= lbl %> %= lbl %>%= lbl %>
    • chooseMessageFile%= lbl %>
    • saveVideoToPhotosAlbum%= lbl %> %= lbl %>%= lbl %>
    • openDocument%= lbl %> %= lbl %>

  • 音訊

    • stopVoice%= lbl %>
    • playVoice%= lbl %>
    • getAvailableAudioSources%= lbl %>
    • stopBackgroundAudio%= lbl %>
    • playBackgroundAudio%= lbl %>
    • seekBackgroundAudio%= lbl %>
    • pauseBackgroundAudio%= lbl %>
    • getBackgroundAudioPlayerState%= lbl %>
    • setInnerAudioOption%= lbl %> %= lbl %>
    • startRecord%= lbl %>
    • stopRecord%= lbl %>
    • stopRecord%= lbl %>

  • 導覽列

    • getTitleColor%= lbl %>
    • setNavigationBar%= lbl %>
    • showNavigationBarLoading%= lbl %> %= lbl %>%= lbl %>
    • hideNavigationBarLoading%= lbl %> %= lbl %>%= lbl %>

  • 背景

    • setBackgroundTextStyle%= lbl %> %= lbl %>%= lbl %>
    • setBackgroundColor%= lbl %> %= lbl %>%= lbl %>
    • showTabBar%= lbl %> %= lbl %>%= lbl %>
    • hideTabBar%= lbl %> %= lbl %>%= lbl %>
    • setTabBarItem%= lbl %> %= lbl %>%= lbl %>
    • setTabBarStyle%= lbl %> %= lbl %>%= lbl %>
    • showTabBarRedDot%= lbl %> %= lbl %>%= lbl %>
    • hideTabBarRedDot%= lbl %> %= lbl %>%= lbl %>
    • setTabBarBadge%= lbl %> %= lbl %>%= lbl %>
    • removeTabBarBadge%= lbl %> %= lbl %>%= lbl %>

  • 下拉重新整理

    • startPullDownRefresh
    • stopPullDownRefresh

  • 捲動

    • pageScrollTo
    • sendSocketMessage%= lbl %> %= lbl %>%= lbl %>
    • connectSocket
    • closeSocket%= lbl %> %= lbl %>%= lbl %>
    • startLocalServiceDiscovery%= lbl %>
    • stopLocalServiceDiscovery%= lbl %>

  • 置頂

    • setTopBarText%= lbl %>

  • 畫布

    • canvasGetImageData%= lbl %> %= lbl %>%= lbl %>
    • canvasPutImageData%= lbl %> %= lbl %>%= lbl %>
    • canvasToTempFilePath%= lbl %> %= lbl %>%= lbl %>

  • 分享轉發

    • getShareInfo%= lbl %>
    • updateShareMenu%= lbl %>
    • showShareMenu%= lbl %> %= lbl %>
    • hideShareMenu%= lbl %> %= lbl %>%= lbl %>
    • showFavoriteGuide%= lbl %>
    • openShare%= lbl %>

  • 登入、授權、使用者資訊

    • login%= lbl %> %= lbl %>%= lbl %>
    • checkSession%= lbl %> %= lbl %>%= lbl %>
    • getUserInfo%= lbl %> %= lbl %>%= lbl %>
    • getAuthCode%= lbl %>
    • getAuthUserInfo%= lbl %>
    • getPhoneNumber%= lbl %>
    • authorize%= lbl %> %= lbl %>

  • 支付

    • tradePay%= lbl %>
    • requestPayment%= lbl %> %= lbl %>
    • requestPolymerPayment%= lbl %>

  • 開放介面

    • getSetting
    • openSetting
    • reportAnalytics
    • chooseInvoiceTitle%= lbl %> %= lbl %>
    • navigateToMiniProgram%= lbl %> %= lbl %>
    • navigateBackMiniProgram%= lbl %> %= lbl %>

  • 開放介面- 微信小程式

    • addCard%= lbl %>
    • openCard%= lbl %>
    • chooseInvoice%= lbl %>
    • startSoterAuthentication%= lbl %>
    • checkIsSoterEnrolledInDevice%= lbl %>
    • checkIsSupportSoterAuthentication%= lbl %>
    • getWeRunData%= lbl %>

  • 開放接口- 支付寶小程序

    • startZMVerify%= lbl %>
    • textRiskIdentification%= lbl %>
    • addCardAuth%= lbl %>
    • getRunScene%= lbl %>
    • chooseCity%= lbl %>
    • datePicker%= lbl %>
    • optionsSelect%= lbl %>
    • multiLevelSelect%= lbl %>
    • rsa%= lbl %>

  • 開放介面- 百度智能小程式

    • getSwanId%= lbl %>
    • navigateToSmartProgram%= lbl %>
    • navigateBackSmartProgram%= lbl %>
    • setPageInfo%= lbl %>
    • setMetaDescription%= lbl %>
    • setMetaKeywords%= lbl %>
    • setDocumentTitle%= lbl %>
    • loadSubPackage%= lbl %>

  • 聯絡人

    • chooseAddress%= lbl %> %= lbl %>%= lbl %>
    • chooseContact%= lbl %>
    • choosePhoneContact%= lbl %>
    • chooseAlipayContact%= lbl %>
    • addPhoneContact%= lbl %> %= lbl %>%= lbl %>

  • 字體載入

    • loadFontFace%= lbl %> %= lbl %>

  • 系統資訊

    • getSystemInfo
    • getBatteryInfo%= lbl %> %= lbl %>%= lbl %>
    • getNetworkType
    • setKeepScreenOn%= lbl %> %= lbl %>%= lbl %>
    • startAccelerometer%= lbl %> %= lbl %>%= lbl %>
    • stopAccelerometer%= lbl %> %= lbl %>%= lbl %>
    • startCompass%= lbl %> %= lbl %>%= lbl %>
    • stopCompass%= lbl %> %= lbl %>%= lbl %>
    • startDeviceMotionListening%= lbl %> %= lbl %>
    • stopDeviceMotionListening%= lbl %> %= lbl %>
    • startGyroscope%= lbl %> %= lbl %>
    • stopGyroscope%= lbl %> %= lbl %>
    • vibrate%= lbl %>
    • vibrateShort
    • vibrateLong
    • watchShake%= lbl %>
    • setEnableDebug%= lbl %> %= lbl %>
    • getServerTime%= lbl %>
    • scan%= lbl %>

  • 藍牙無線

    • getBeacons%= lbl %> %= lbl %>
    • startBeaconDiscovery%= lbl %> %= lbl %>
    • stopBeaconDiscovery%= lbl %> %= lbl %>
    • startWifi%= lbl %>
    • stopWifi%= lbl %>
    • setWifiList%= lbl %>
    • getWifiList%= lbl %>
    • connectWifi%= lbl %>
    • getConnectedWifi%= lbl %>
    • getBLEDeviceServices%= lbl %> %= lbl %>
    • getBLEDeviceCharacteristics%= lbl %> %= lbl %>
    • createBLEConnection%= lbl %> %= lbl %>
    • closeBLEConnection%= lbl %> %= lbl %>
    • writeBLECharacteristicValue%= lbl %> %= lbl %>
    • readBLECharacteristicValue%= lbl %> %= lbl %>
    • notifyBLECharacteristicValueChange%= lbl %> %= lbl %>
    • startBluetoothDevicesDiscovery%= lbl %> %= lbl %>
    • stopBluetoothDevicesDiscovery%= lbl %> %= lbl %>
    • openBluetoothAdapter%= lbl %> %= lbl %>
    • getConnectedBluetoothDevices%= lbl %> %= lbl %>
    • getBluetoothDevices%= lbl %> %= lbl %>
    • getBluetoothAdapterState%= lbl %> %= lbl %>
    • closeBluetoothAdapter%= lbl %> %= lbl %>
    • stopHCE%= lbl %>
    • startHCE%= lbl %>
    • getHCEState%= lbl %>
    • sendHCEMessage%= lbl %>

  • 第三方平台

    • getExtConfig%= lbl %> %= lbl %>

  • 深層的API，注意：方法加了$前綴

    • api.apmy
      • api.ap.$faceVerify
      • api.ap.$navigateToAlipayPage
      • ...
    • api.aiswan
      • api.ai.$ocrIdCard
      • api.ai.$ocrBankCard
      • ...

  • 某些新實例的物件上面的API

    • createMapContext%= lbl %> %= lbl %>%= lbl %>
    • createVideoContext%= lbl %> %= lbl %>
    • createAudioContext%= lbl %>
    • createCameraContext%= lbl %> %= lbl %>
    • createInnerAudioContext%= lbl %> %= lbl %>%= lbl %>
    • createLivePusherContext%= lbl %>
    • createLivePlayerContext%= lbl %>
    • getBackgroundAudioManager%= lbl %> %= lbl %>
    • getRecorderManager%= lbl %> %= lbl %>%= lbl %>
    • createSelectorQuery
    • getFileSystemManager%= lbl %>
    • createARCameraContext%= lbl %>

例如：注意：方法加了$前綴

 let ctx = api . createMapContext ( 'maper' )

ctx . $getCenterLocation ( ) . then ( ( res ) => {
  console . log ( 'createMapContext:getCenterLocation' )
  console . log ( res )
} )

小程式之間的API差異

1.傳參不一致

例如： showLoading方法，載入的顯示文案，微信和百度裡面是title參數，支付寶裡面是content參數，如下

 // 微信
wx . showLoading ( {
  title : '加载中'
} )

// 百度
swan . showLoading ( {
  title : '加载中'
} )

// 支付宝
my . showLoading ( {
  content : '加载中'
} )

// 使用 mpapi 之后，多端兼容
api . showLoading ( '加载中' )
api . showLoading ( {
  title : '提示内容'
} )

2、返回參不一致

例如： showActionSheet方法，執行完之後取得選擇的索引，微信和百度裡面是res.tapIndex ，支付寶裡面是res.index ，如下

 // 微信
wx . showActionSheet ( {
  itemList : [ '台球' , '羽毛球' , '篮球' ] ,
  success : ( res ) => {
    // res.tapIndex
  }
} )

// 支付宝
my . showActionSheet ( {
  items : [ '台球' , '羽毛球' , '篮球' ] ,
  success : ( res ) => {
    // res.index
  }
} )

// 使用 mpapi，多端兼容
api . showActionSheet ( {
  itemList : [ '台球' , '羽毛球' , '篮球' ] ,
  success : ( res ) => {
    // res.tapIndex
  }
} )

3、不支持，但可相容

例如：支付寶裡面有my.alert ，而微信和百度裡面沒有此方法，但是可以透過微信的wx.showModal或百度的swan.showModal封裝一個alert方法，如下

 api . alert ( '提示内容' )

api . alert ( {
  content : '提示内容'
} )

// 请求数据，兼容多端
api . request ( { ... } ) . then ( ( res ) => { } )

4.不支持，無法相容

有的API 只在特定端裡面有效，無法相容處理，如下

 // 只在支付宝里面有效，微信和百度小程序里面会报错
api . startZMVerify ( { ... } )

// 建议这样处理
if ( api . isAlipay ) {
  api . startZMVerify ( { ... } )
}

// 只在微信里面有效，支付宝或百度小程序里面会报错
api . setTopBarText ( { ... } )

// 建议这样处理
if ( api . isWechat ) {
  api . setTopBarText ( { ... } )
}

// 百度智能小程序的特殊 API 一样的道理
if ( api . isSwan ) {
  api . getSwanId ( ) . then ( ( res ) => { } )
}

使用說明

1.支持Promise風格

所有小程式的API 只要包含success回調，都已經用Promise封裝過，可以直接使用，兩種寫法都支持，例如

 // 使用回调
api . showActionSheet ( {
  itemList : [ '台球' , '羽毛球' , '篮球' ] ,
  success : ( res ) => {
    // res.tapIndex
  }
} )

// 或者
api . showActionSheet ( {
  itemList : [ '台球' , '羽毛球' , '篮球' ]
} ) . then ( ( res ) => {
    // res.tapIndex
} )

// 其它
api . setStorage ( { ... } ) . then ( ( res ) => { } )
api . chooseImage ( { ... } ) . then ( ( res ) => { } )
. . .

2、相容方法裡的傳參和返回參，以微信小程式呼叫為準。其它端不相容的參數不處理（某些參數也無法處理，特定小程式不支援）開發者需要留意，例如

 api . chooseImage ( {
  count : 1 ,
  sizeType : [ 'original' , 'compressed' ] , // 只在微信可用
  sourceType : [ 'album' , 'camera' ] ,
} ) . then ( ( res ) => {
  // res.tempFilePaths 在微信和支付宝都可用
  // res.tempFiles 只在微信可用
} )

特殊API的事件處理

某些API 既要支援Promise，又要呼叫它的事件，那麼可以採用以下方式：

以前： 

 const downloadTask = wx . downloadFile ( {
  url : 'https://example.com/audio/123' , // 仅为示例，并非真实的资源
  success ( res ) {
    console . log ( res )
  }
} )

downloadTask . onProgressUpdate ( ( res ) => {
  console . log ( res )
} )

downloadTask . abort ( ) // 取消下载任务

使用mpapi之後： 

 const api = require ( 'mpapi' )

const downloadTask = api . downloadFile ( {
  url : 'https://example.com/audio/123' // 仅为示例，并非真实的资源
} ) . then ( ( res ) => {
  console . log ( 'success' )
  console . log ( res )
} )

downloadTask . $event ( 'onProgressUpdate' , ( res ) => {
  console . log ( res )
} )

// downloadTask.$event('abort') // 取消下载任务

其它API 可以類似處理，例如： request 、 uploadFile 、 connectSocket

Issues

如果您在使用過程中發現Bug，或有好的建議，歡迎回報問題。

Changelog

更新日誌

License

展開
附加信息
相關應用
爲您推薦
相關資訊 全部