第一步：安裝weixin-js-sdk
npm install 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;
}
第三步：調用
import wx from 'weixin-js-sdk'
export const wxConfig = (config: wx.ConfigOptions) => {
wx.config({
debug: false, // true:調試時候彈窗
appId: config.appId, // 微信appid
timestamp: config.timestamp, // 時間戳
nonceStr: config.nonceStr, // 隨機字符串
signature: config.signature, // 簽名
jsApiList: [],
beta: false
})
wx.ready(() => {
// 1
})
wx.error((err) => {
console.log(err)
})
}(好用記得回來給我點贊)
參考：
微信JSSDK使用ts時的類<weixin-js-sdk>
