第一步：装置 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>