因為項目使用TS開發原因接入weixin-js-sdk沒有對應的 .d.ts
安裝對應的包
yarn add weixin-js-sdk --save
現新增一對應的.d.ts
在項目目錄下新增 src/model/weixin-js-sdk.d.ts
對應代碼如下：
declare namespace WeixinJsSdk { /** ************************************************************************** * Type definations ****************************************************************************/ type JSApis = 'onMenuShareTimeline' | 'onMenuShareAppMessage' | 'onMenuShareQQ' | 'onMenuShareWeibo' | 'onMenuShareQZone' | 'startRecord' | 'stopRecord' | 'onVoiceRecordEnd' | 'playVoice' | 'pauseVoice' | 'stopVoice' | 'onVoicePlayEnd' | 'uploadVoice' | 'downloadVoice' | 'chooseImage' | 'previewImage' | 'uploadImage' | 'downloadImage' | 'translateVoice' | 'getNetworkType' | 'openLocation' | 'getLocation' | 'hideOptionMenu' | 'showOptionMenu' | 'hideMenuItems' | 'showMenuItems' | 'hideAllNonBaseMenuItem' | 'showAllNonBaseMenuItem' | 'closeWindow' | 'scanQRCode' | 'chooseWXPay' | 'openProductSpecificView' | 'addCard' | 'chooseCard' | 'openCard' | 'checkJsApi' | 'onRecordEnd' | 'openWXDeviceLib' | 'closeWXDeviceLib' | 'configWXDeviceWiFi' | 'getWXDeviceInfos' | 'sendDataToWXDevice' | 'startScanWXDevice' | 'stopScanWXDevice' | 'connectWXDevice' | 'disconnectWXDevice' | 'getWXDeviceTicket' | 'WeixinJSBridgeReady' | 'onWXDeviceBindStateChange' | 'onWXDeviceStateChange' | 'onScanWXDeviceResult' | 'onReceiveDataFromWXDevice' | 'onWXDeviceBluetoothStateChange'; type Menus = 'menuItem:exposeArticle' // 舉報 | 'menuItem:setFont' // 調整字體 | 'menuItem:dayMode' // 日間模式 | 'menuItem:nightMode' // 夜間模式 | 'menuItem:refresh' // 刷新 | 'menuItem:profile' // 查看公眾號（已添加） | 'menuItem:addContact' // 查看公眾號（未添加） | 'menuItem:share:appMessage' // 發送給朋友 | 'menuItem:share:timeline' // 分享到朋友圈 | 'menuItem:share:qq' // 分享到 QQ | 'menuItem:share:weiboApp' // 分享到 Weibo | 'menuItem:favorite' // 收藏 | 'menuItem:share:facebook' // 分享到 Facebook | 'menuItem:share:QZone' // 分享到 QQ 空間 | 'menuItem:editTag' // 編輯標簽 | 'menuItem:delete' // 刪除 | 'menuItem:copyUrl' // 復制鏈接 | 'menuItem:originPage' // 原網頁 | 'menuItem:readMode' // 閱讀模式 | 'menuItem:openWithQQBrowser' // 在QQ瀏覽器中打開 | 'menuItem:openWithSafari' // 在Safari中打開 | 'menuItem:share:email' // 郵件 | 'menuItem:share:brand'; // 一些特殊公眾號 type scanTypes = 'qrCode' // 二維碼 | 'barCode'; // 一維碼 type ImageSize = 'original' | 'compressed'; type SourceType = 'album' | 'camera'; /** ************************************************************************** * Interface definations ****************************************************************************/ interface ConfigOptions { /** * 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數， * 可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 */ debug?: boolean; /** * 公眾號的唯一標識 */ appId: string; /** * 生成簽名的時間戳 */ timestamp: string|number; /** * 生成簽名的隨機串 */ nonceStr: string; /** * 簽名 */ signature: string; /** * 需要使用的JS接口列表 */ jsApiList: JSApis[]; /* beta */ beta: boolean; [x: string]: any; } /** * 所有接口通過wx對象(也可使用jWeixin對象)來調用，參數是一個對象， * 除了每個接口本身需要傳的參數之外，還有以下通用參數 */ interface Callbacks { /** * 接口調用成功時執行的回調函數。 */ success?: (res: any) => void; /** * 接口調用失敗時執行的回調函數。 */ fail?: (res: any) => void; /** * 接口調用完成時執行的回調函數，無論成功或失敗都會執行。 */ complete?: (res: any) => void; /** * 用戶點擊取消時的回調函數，僅部分有用戶取消操作的api才會用到。 */ cancel?: (res: any) => void; } interface MenuCallbacks extends Callbacks { /** * 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。 */ trigger?: (res: any) => void; } interface CheckJsApiOptions extends Callbacks { /** * 需要檢測的JS接口列表 */ jsApiList: JSApis[]; } interface OnMenuShareTimelineOptions extends MenuCallbacks { /** * 分享標題 */ title: string; /** * 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 */ link: string; /** * 分享圖標 */ imgUrl?: string; } interface OnMenuShareAppMessageOptions extends OnMenuShareTimelineOptions { /** * 分享描述 */ desc?: string; /** * 分享類型,music、video或link，不填默認為link */ type?: 'music' | 'video' | 'link'; /** * 如果type是music或video，則要提供數據鏈接，默認為空 */ dataUrl?: string; } interface OnMenuShareQQ extends OnMenuShareTimelineOptions { /** * 分享描述 */ desc?: string; } interface OnMenuShareWeibo extends OnMenuShareTimelineOptions { /** * 分享描述 */ desc?: string; } interface OnMenuShareQZone extends OnMenuShareTimelineOptions { /** * 分享描述 */ desc?: string; } interface ChooseImageOptions extends Callbacks { /** * 一次可選擇圖片數量 * * 默認為 9 */ count?: number; /** * 可以指定是原圖還是壓縮圖，默認二者都有 */ sizeType?: ImageSize[]; /** * 可以指定來源是相冊還是相機，默認二者都有 */ sourceType?: SourceType[]; } interface PreviewImageOptions extends Callbacks { /** * 當前顯示圖片的 http 鏈接 */ current: string; /** * 需要預覽的圖片 http 鏈接列表 */ urls: string[]; } interface UploadImageOptions extends Callbacks { /** * 需要上傳的圖片的本地ID，由chooseImage接口獲得 */ localId: string; /** * 顯示進度提示 */ isShowProgressTips?: boolean; } interface DownloadImageOptions extends Callbacks { /** * 需要下載的圖片的服務器端ID，由uploadImage接口獲得 */ serverId: string; /** * 顯示進度提示 */ isShowProgressTips?: boolean; } interface GetLocalImgDataOptions extends Callbacks { /** * 圖片的localID */ localId: string; } interface LocalVoiceOptions extends Callbacks { /** * 本地ID，由 stopRecord 接口獲得 */ localId: string; } interface UploadVoiceOptions extends LocalVoiceOptions { /** * 顯示進度提示 */ isShowProgressTips?: boolean; } interface DownloadVoiceOptions extends Callbacks { /** * 需要下載的音頻的服務器端ID，由uploadVoice接口獲得 */ serverId: string; /** * 顯示進度提示 */ isShowProgressTips?: boolean; } interface OpenLocationOptions extends Callbacks { /** * 緯度，浮點數，范圍為90 ~ -90 */ latitude: number; /** * 經度，浮點數，范圍為180 ~ -180。 */ longitude: number; /** * 位置名 */ name: string; /** * 地址詳情說明 */ address: string; /** * 地圖縮放級別,整形值,范圍從1~28。默認為最大 */ scale?: number; /** * 在查看位置界面底部顯示的超鏈接,可點擊跳轉 */ infoUrl?: string; } interface GetLocationOptions extends Callbacks { /** * 默認為wgs84的gps坐標，如果要返回直接給openLocation用的火星坐標，可傳入'gcj02' */ type: 'wgs84' | 'gcj02' } interface StartSearchBeacons { /** * 搖周邊的業務ticket, 系統自動添加在搖出來的頁面鏈接后面 */ ticket: string; } interface MenuOptions { menuList: Menus[]; } interface ScanQRCodeOptions extends Callbacks { /** * 默認為0，掃描結果由微信處理，1則直接返回掃描結果 */ needResult?: 0 | 1; /** * 可以指定掃二維碼還是一維碼，默認二者都有 */ scanType?: scanTypes[]; } interface OpenProductSpecificViewOptions { /** * 商品id */ productId: string; /** * 0.默認值，普通商品詳情頁 * 1.掃一掃商品詳情頁 * 2.小店商品詳情頁 */ viewType: 0 | 1 | 2; } interface ChooseCardOptions extends Callbacks { /** * 門店Id */ shopId?: string; /** * 卡券類型 */ cardType?: string; /** * 卡券Id */ cardId?: string; /** * 卡券簽名時間戳 */ timestamp: number; /** * 卡券簽名隨機串 */ nonceStr: string; /** * 簽名方式，默認'SHA1' */ signType: 'SHA1'; /** * 卡券簽名 */ cardSign: string; } interface AddCard { cardId: string; cardExt: string; } interface AddCardOptions extends Callbacks { cardList: AddCard[]; } interface OpenCard { cardId: string; code: string; } interface OpenCardOptions extends Callbacks { cardList: OpenCard[]; } interface ChooseWXPayOptions extends Callbacks { /** * 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。 * 但最新版的支付后台生成簽名使用的timeStamp字段名需大寫其中的S字符 */ timestamp: string; /** * 支付簽名隨機串，不長於 32 位 */ nonceStr: string; /** * 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***） */ package: string; /** * 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5' */ signType: 'SHA1' | 'MD5'; /** * 支付簽名 */ paySign: string; } /** ************************************************************************** * 配置方法 ****************************************************************************/ /** * 注入權限驗證配置 * 所有需要使用 JS-SDK 的頁面必須先注入配置信息，否則將無法調用。 * （同一個 url 僅需調用一次，對於變化 url 的 SPA 的 web app 可在每次url變化時進行調用, * 目前 Android 微信客戶端不支持 pushState 的 H5 新特性， * 所以使用 pushState 來實現 web app 的頁面會導致簽名失敗， * 此問題會在 Android6.2中修復。） */ function config(options: ConfigOptions): void; /** * 處理成功驗證 * * config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后， * config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口， * 則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口， * 則可以直接調用，不需要放在ready函數中。 */ function ready(callback: () => void): void; /** * 處理失敗驗證 * * config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗， * 具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看， * 對於SPA可以在這里更新簽名。 */ function error(callback: (res: any) => void): void; /** * 判斷當前客戶端版本是否支持指定JS接口 * * 備注：checkJsApi接口是客戶端6.0.2新引入的一個預留接口， * 第一期開放的接口均可不使用checkJsApi來檢測。 */ function checkJsApi(options: CheckJsApiOptions): void; /** ************************************************************************** * 分享接口 ****************************************************************************/ /** * 獲取“分享到朋友圈”按鈕點擊狀態及自定義分享內容接口 */ function onMenuShareTimeline(options: OnMenuShareTimelineOptions): void; /** * 獲取“分享給朋友”按鈕點擊狀態及自定義分享內容接口 */ function onMenuShareAppMessage(options: OnMenuShareAppMessageOptions): void; /** * 獲取“分享到QQ”按鈕點擊狀態及自定義分享內容接口 */ function onMenuShareQQ(options: OnMenuShareQQ): void; /** * 獲取“分享到騰訊微博”按鈕點擊狀態及自定義分享內容接口 */ function onMenuShareWeibo(options: OnMenuShareWeibo): void; /** * 獲取“分享到QQ空間”按鈕點擊狀態及自定義分享內容接口 */ function onMenuShareQZone(options: OnMenuShareQZone): void; /** ************************************************************************** * 圖像接口 ****************************************************************************/ /** * 拍照或從手機相冊中選圖接口 */ function chooseImage(options: ChooseImageOptions): void; /** * 預覽圖片接口 */ function previewImage(options: PreviewImageOptions): void; /** * 上傳圖片接口 * * 備注：上傳圖片有效期3天，可用微信多媒體接口下載圖片到自己的服務器，此處獲得的 serverId 即 media_id。 */ function uploadImage(options: UploadImageOptions): void; /** * 下載圖片接口 */ function downloadImage(options: DownloadImageOptions): void; /** * 獲取本地圖片接口 */ function getLocalImgData(options: GetLocalImgDataOptions): void; /** ************************************************************************** * 音頻接口 ****************************************************************************/ /** * 開始錄音接口 */ function startRecord(): void; /** * 停止錄音接口 */ function stopRecord(options: Callbacks): void; /** * 監聽錄音自動停止接口 */ function onVoiceRecordEnd(options: Callbacks): void; /** * 播放語音接口 */ function playVoice(options: LocalVoiceOptions): void; /** * 暫停播放接口 */ function pauseVoice(options: LocalVoiceOptions): void; /** * 停止播放接口 */ function stopVoice(options: LocalVoiceOptions): void; /** * 監聽語音播放完畢接口 */ function onVoicePlayEnd(options: Callbacks): void; /** * 上傳語音接口 */ function uploadVoice(options: UploadVoiceOptions): void; /** * 下載語音接口 */ function downloadVoice(options: DownloadVoiceOptions): void; /** ************************************************************************** * 智能接口 ****************************************************************************/ /** * 識別音頻並返回識別結果接口 */ function translateVoice(options: UploadVoiceOptions): void; /** ************************************************************************** * 設備信息 ****************************************************************************/ /** * 獲取網絡狀態接口 */ function getNetworkType(options: Callbacks): void; /** ************************************************************************** * 地理信息 ****************************************************************************/ /** * 使用微信內置地圖查看位置接口 */ function openLocation(options: OpenLocationOptions): void; /** * 獲取地理位置接口 */ function getLocation(options: GetLocationOptions): void; /** ************************************************************************** * 搖一搖周邊 ****************************************************************************/ /** * 開啟查找周邊ibeacon設備接口 */ function startSearchBeacons(options: StartSearchBeacons): void; /** * 關閉查找周邊ibeacon設備接口 */ function stopSearchBeacons(options: Callbacks): void; /** * 監聽周邊ibeacon設備接口 * * 備注：上述搖一搖周邊接口使用注意事項及更多返回結果說明，請參考：搖一搖周邊獲取設備信息 */ function onSearchBeacons(options: Callbacks): void; /** ************************************************************************** * 界面操作 ****************************************************************************/ /** * 關閉當前網頁窗口接口 */ function closeWindow(): void; /** * 批量隱藏功能按鈕接口 */ function hideMenuItems(options: MenuOptions): void; /** * 批量顯示功能按鈕接口 */ function showMenuItems(options: MenuOptions): void; /** * 隱藏所有非基礎按鈕接口 */ function hideAllNonBaseMenuItem(): void; /** * 顯示所有功能按鈕接口 */ function showAllNonBaseMenuItem(): void; /** ************************************************************************** * 微信掃一掃 ****************************************************************************/ /** * 調起微信掃一掃接口 */ function scanQRCode(options: ScanQRCodeOptions): void; /** ************************************************************************** * 微信小店 ****************************************************************************/ /** * 跳轉微信商品頁接口 */ function openProductSpecificView(options: OpenProductSpecificViewOptions): void; /** ************************************************************************** * 微信卡券 ****************************************************************************/ /** * 拉取適用卡券列表並獲取用戶選擇信息 */ function chooseCard(options: ChooseCardOptions): void; /** * 批量添加卡券接口 */ function addCard(options: AddCardOptions): void; /** * 查看微信卡包中的卡券接口 */ function openCard(options: OpenCardOptions): void; /** ************************************************************************** * 微信支付 ****************************************************************************/ /** * 發起一個微信支付請求 */ function chooseWXPay(options: ChooseWXPayOptions): void; } declare module 'weixin-js-sdk' { export = WeixinJsSdk; }
至此結束