第一步：装置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>
发表回复