หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

เอ็มปาปิ

mpapi (miniProgram API) ปลั๊กอินที่เข้ากันได้กับ API ของโปรแกรมขนาดเล็ก เขียนเพียงครั้งเดียวและทำงานบนเทอร์มินัลหลายเครื่อง

⏰ วันที่อัปเดต: 31-05-2019 ฟังก์ชั่นมินิโปรแกรมได้รับการอัปเดตอย่างต่อเนื่อง เวอร์ชันใหม่อาจแตกต่างกัน โปรดทราบ

ปัญหาที่โปรเจ็กต์นี้แก้ไขได้ : ค้นหาความแตกต่างระหว่าง Mini Program API ต่างๆ และลอง ใช้ชุด API เพื่อให้เข้ากันได้กับ Mini Program หลายตัว

คุณสมบัติ

  • เขียนครั้งเดียว ทำงานบนเทอร์มินัลหลายเครื่อง รองรับ: มินิโปรแกรม WeChat, มินิโปรแกรม Alipay, มินิโปรแกรมอัจฉริยะ Baidu, มินิโปรแกรม ByteDance
  • รองรับสัญญา (รวมเฉพาะการโทรกลับที่สำเร็จ)
  • ปรับให้เหมาะสมสำหรับการใช้งาน API บางอย่าง เช่น api.showToast สามารถส่ง string ได้โดยตรง api.setStorageSync ไม่จำเป็นต้องเรียก try catch 等
  • รองรับการประมวลผลเหตุการณ์ของ API พิเศษ เช่น: request , downloadFile , detail
  • รองรับการตัดสินที่ปลายที่แตกต่างกัน api.isWechat , api.isAlipay , api.isSwan , api.isTt

ติดตั้ง 

npm install mpapi --save

วิธีการติดตั้งที่ไม่ใช่ npm เพียงแนะนำ mpapi.js ในไดเร็กทอรี lib ลงในโปรเจ็กต์โดยตรง

ใช้ 

 const api = require ( 'mpapi' )

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

ดูอย่างรวดเร็ว

  • รายการ API ที่เข้ากันได้
  • API อื่นๆ ที่ได้รับการบรรจุเป็น Promise
  • ความแตกต่างของ API
  • คำแนะนำสำหรับการใช้งาน
  • การประมวลผลเหตุการณ์ API พิเศษ, request , downloadFile , uploadFile ฯลฯ
  • เอกสาร API อย่างเป็นทางการ: มินิโปรแกรม WeChat, มินิโปรแกรม Alipay, มินิโปรแกรมอัจฉริยะ Baidu, มินิโปรแกรม ByteDance

รายการ 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

API อื่นๆ ที่ได้รับการบรรจุเป็น Promise

รองรับเฉพาะมินิโปรแกรมเฉพาะเท่านั้น

แอพเพล็ต WeChatwx , แอพเพล็ต Alipay ของฉัน , แอพเพล็ตอัจฉริยะ Baiduหงส์ , แอพเพล็ต ByteDanceทีที หากมีไอคอน แสดงว่ารองรับเฉพาะแอปเพล็ตที่เกี่ยวข้องเท่านั้น หากไม่มีไอคอน แสดงว่ารองรับทั้งหมด

  • ปฏิสัมพันธ์

    • hideToast
    • hideLoading
    • showModal %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • prompt %= ปอนด์ %>

  • แคช

    • getStorage
    • setStorage
    • removeStorage
    • getStorageInfo

  • การกำหนดเส้นทาง

    • reLaunch
    • switchTab
    • redirectTo
    • navigateTo
    • navigateBack

  • ที่ตั้ง

    • getLocation
    • openLocation
    • chooseLocation %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>

  • ไฟล์รูปภาพ

    • saveImage %= ปอนด์ %>
    • getImageInfo
    • chooseVideo %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • chooseMessageFile %= ปอนด์ %>
    • saveVideoToPhotosAlbum %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • openDocument %= ปอนด์ %> %= ปอนด์ %>

  • เสียง

    • stopVoice %= ปอนด์ %>
    • playVoice %= ปอนด์ %>
    • getAvailableAudioSources %= ปอนด์ %>
    • stopBackgroundAudio %= ปอนด์ %>
    • playBackgroundAudio %= ปอนด์ %>
    • seekBackgroundAudio %= ปอนด์ %>
    • pauseBackgroundAudio %= ปอนด์ %>
    • getBackgroundAudioPlayerState %= ปอนด์ %>
    • setInnerAudioOption %= ปอนด์ %> %= ปอนด์ %>
    • startRecord %= ปอนด์ %>
    • stopRecord %= ปอนด์ %>
    • stopRecord %= ปอนด์ %>

  • แถบนำทาง

    • getTitleColor %= ปอนด์ %>
    • setNavigationBar %= ปอนด์ %>
    • showNavigationBarLoading %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • hideNavigationBarLoading %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>

  • พื้นหลัง

    • setBackgroundTextStyle %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • setBackgroundColor %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • showTabBar %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • hideTabBar %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • setTabBarItem %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • setTabBarStyle %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • showTabBarRedDot %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • hideTabBarRedDot %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • setTabBarBadge %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • removeTabBarBadge %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>

  • ดึงลงเพื่อรีเฟรช

    • startPullDownRefresh
    • stopPullDownRefresh

  • เลื่อน

    • pageScrollTo
    • sendSocketMessage %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • connectSocket
    • closeSocket %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • startLocalServiceDiscovery %= ปอนด์ %>
    • stopLocalServiceDiscovery %= ปอนด์ %>

  • ปักหมุดไว้ด้านบน

    • setTopBarText %= ปอนด์ %>

  • ผ้าใบ

    • canvasGetImageData %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • canvasPutImageData %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • canvasToTempFilePath %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>

  • แบ่งปันและส่งต่อ

    • getShareInfo %= ปอนด์ %>
    • updateShareMenu %= ปอนด์ %>
    • showShareMenu %= ปอนด์ %> %= ปอนด์ %>
    • hideShareMenu %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • showFavoriteGuide %= ปอนด์ %>
    • openShare %= ปอนด์ %>

  • การเข้าสู่ระบบ การอนุญาต ข้อมูลผู้ใช้

    • login %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • checkSession %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • getUserInfo %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • getAuthCode %= ปอนด์ %>
    • getAuthUserInfo %= ปอนด์ %>
    • getPhoneNumber %= ปอนด์ %>
    • authorize %= ปอนด์ %> %= ปอนด์ %>

  • จ่าย

    • tradePay %= ปอนด์ %>
    • requestPayment %= ปอนด์ %> %= ปอนด์ %>
    • requestPolymerPayment %= ปอนด์ %>

  • อินเตอร์เฟซแบบเปิด

    • getSetting
    • openSetting
    • reportAnalytics
    • chooseInvoiceTitle %= ปอนด์ %> %= ปอนด์ %>
    • navigateToMiniProgram %= ปอนด์ %> %= ปอนด์ %>
    • navigateBackMiniProgram %= ปอนด์ %> %= ปอนด์ %>

  • เปิดอินเทอร์เฟซ - แอปเพล็ต WeChat

    • addCard %= ปอนด์ %>
    • openCard %= ปอนด์ %>
    • chooseInvoice %= ปอนด์ %>
    • startSoterAuthentication %= ปอนด์ %>
    • checkIsSoterEnrolledInDevice %= ปอนด์ %>
    • checkIsSupportSoterAuthentication %= ปอนด์ %>
    • getWeRunData %= ปอนด์ %>

  • เปิดอินเทอร์เฟซ - แอพเพล็ต Alipay

    • startZMVerify %= ปอนด์ %>
    • textRiskIdentification %= ปอนด์ %>
    • addCardAuth %= ปอนด์ %>
    • getRunScene %= ปอนด์ %>
    • chooseCity %= ปอนด์ %>
    • datePicker %= ปอนด์ %>
    • optionsSelect %= ปอนด์ %>
    • multiLevelSelect %= ปอนด์ %>
    • rsa %= ปอนด์ %>

  • เปิดอินเทอร์เฟซ - แอปเพล็ตอัจฉริยะ Baidu

    • getSwanId %= ปอนด์ %>
    • navigateToSmartProgram %= ปอนด์ %>
    • navigateBackSmartProgram %= ปอนด์ %>
    • setPageInfo %= ปอนด์ %>
    • setMetaDescription %= ปอนด์ %>
    • setMetaKeywords %= ปอนด์ %>
    • setDocumentTitle %= ปอนด์ %>
    • loadSubPackage %= ปอนด์ %>

  • ผู้ติดต่อ

    • chooseAddress %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • chooseContact %= ปอนด์ %>
    • choosePhoneContact %= ปอนด์ %>
    • chooseAlipayContact %= ปอนด์ %>
    • addPhoneContact %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>

  • กำลังโหลดแบบอักษร

    • loadFontFace %= ปอนด์ %> %= ปอนด์ %>

  • ข้อมูลระบบ

    • getSystemInfo
    • getBatteryInfo %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • getNetworkType
    • setKeepScreenOn %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • startAccelerometer %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • stopAccelerometer %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • startCompass %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • stopCompass %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • startDeviceMotionListening %= ปอนด์ %> %= ปอนด์ %>
    • stopDeviceMotionListening %= ปอนด์ %> %= ปอนด์ %>
    • startGyroscope %= ปอนด์ %> %= ปอนด์ %>
    • stopGyroscope %= ปอนด์ %> %= ปอนด์ %>
    • vibrate %= ปอนด์ %>
    • vibrateShort
    • vibrateLong
    • watchShake %= ปอนด์ %>
    • setEnableDebug %= ปอนด์ %> %= ปอนด์ %>
    • getServerTime %= ปอนด์ %>
    • scan %= ปอนด์ %>

  • บลูทูธไร้สาย

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

  • แพลตฟอร์มของบุคคลที่สาม

    • getExtConfig %= ปอนด์ %> %= ปอนด์ %>

  • API ระดับลึก หมายเหตุ: วิธีการจะขึ้นต้นด้วย $

    • api.ap ของฉัน
      • api.ap.$faceVerify
      • api.ap.$navigateToAlipayPage
      • ...
    • api.aiหงส์
      • api.ai.$ocrIdCard
      • api.ai.$ocrBankCard
      • ...

  • อินสแตนซ์ใหม่ของออบเจ็กต์ที่อยู่เหนือ API

    • createMapContext %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • createVideoContext %= ปอนด์ %> %= ปอนด์ %>
    • createAudioContext %= ปอนด์ %>
    • createCameraContext %= ปอนด์ %> %= ปอนด์ %>
    • createInnerAudioContext %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • createLivePusherContext %= ปอนด์ %>
    • createLivePlayerContext %= ปอนด์ %>
    • getBackgroundAudioManager %= ปอนด์ %> %= ปอนด์ %>
    • getRecorderManager %= ปอนด์ %> %= ปอนด์ %>%= ปอนด์ %>
    • createSelectorQuery
    • getFileSystemManager %= ปอนด์ %>
    • createARCameraContext %= ปอนด์ %>

ตัวอย่างเช่น: หมายเหตุ: วิธีการนี้นำหน้าด้วย $ 

 let ctx = api . createMapContext ( 'maper' )

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

ความแตกต่างของ API ระหว่างแอปเพล็ต

1. การส่งพารามิเตอร์ไม่สอดคล้องกัน

ตัวอย่างเช่น: วิธี showLoading , สำเนาการแสดงผลที่โหลด, พารามิเตอร์ title ใน WeChat และ Baidu และพารามิเตอร์ content ใน Alipay ดังนี้ 

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

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

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

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

2. พารามิเตอร์ส่งคืนไม่สอดคล้องกัน

ตัวอย่างเช่น: วิธี showActionSheet หลังจากดำเนินการแล้ว ให้รับดัชนีที่เลือก ใน WeChat และ Baidu มันคือ res.tapIndex ใน Alipay มันคือ 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. ไม่รองรับ แต่เข้ากันได้

ตัวอย่างเช่น: Alipay มี my.alert แต่ WeChat และ Baidu ไม่มีวิธีนี้ อย่างไรก็ตาม คุณสามารถสรุปวิธี alert ผ่าน wx.showModal ของ WeChat หรือ swan.showModal ของ Baidu ได้ดังนี้ 

 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. พารามิเตอร์ที่ส่งและส่งคืนในวิธีที่เข้ากันได้ นั้นอยู่ภายใต้การเรียกแอปเพล็ต WeChat พารามิเตอร์ที่เข้ากันไม่ได้กับเทอร์มินัลอื่นจะไม่ได้รับการประมวลผล (พารามิเตอร์บางตัวไม่สามารถประมวลผลได้และไม่รองรับโดยมินิโปรแกรมเฉพาะ) นักพัฒนาจำเป็นต้องให้ความสนใจ เช่น 

 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

ปัญหา

หากคุณพบข้อบกพร่องระหว่างการใช้งานหรือมีข้อเสนอแนะที่ดี โปรดรายงานข้อผิดพลาดเหล่านั้นได้ตามสบาย

บันทึกการเปลี่ยนแปลง

บันทึกการเปลี่ยนแปลง

ใบอนุญาต

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด