微信JS-SDK

微信JS-SDK常见调用接口介绍


1.概述
2.使用步骤
3.几个常见的微信JS-SDK接口介绍


1.概述：
    微信JS-SDK：
            微信公众平台提供
            面向网页开发人员
            基于微信内的网页开发工具包


    使用微信JS-SDK，网页开发者可以借助微信使用手机系统功能以及微信自带功能，例如拍照，选图，语音，位置，微信分享，扫一扫等功能。


    微信JS-SDK说明文档参考链接：https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html


2.使用步骤：
    （1）步骤一：绑定域名
        先登录微信公众平台，进入“公众号设置”的“功能设置”里填写“JS接口安全域名”（为了成功在项目中引入jweixin.js）。
    （2）步骤二：引入JS文件
        在需要调用JS接口的页面引入如下JS文件：
        （支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
        注意：
            （1）如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js
            （2）如需使用摇一摇周边功能，请引入 https://res.wx.qq.com/open/js/jweixin-1.1.0.js
    （3）步骤三：通过config接口注入权限验证配置
        所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '', // 必填，公众号的唯一标识
            timestamp: , // 必填，生成签名的时间戳
            nonceStr: '', // 必填，生成签名的随机串
            signature: '',// 必填，签名
            jsApiList: [] // 必填，需要使用的JS接口列表
        });
    （4）步骤四：通过ready接口处理成功验证
        wx.ready(function(){
        });
        config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
        所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
        对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中（这里建议一并放在ready函数中）。
    （5）步骤五：通过error接口处理失败验证
        wx.error(function(res){
        });
        config信息验证失败会执行error函数，如签名过期导致验证失败，
        具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看。


    接口调用说明：所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：
        success：接口调用成功时执行的回调函数。
        fail：接口调用失败时执行的回调函数。
        complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
        cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
        trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
        以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：
            调用成功时："xxx:ok" ，其中xxx为调用的接口名
            用户取消时："xxx:cancel"，其中xxx为调用的接口名
            调用失败时：其值为具体错误信息
    举例：基础接口
        //通过wx对象调用接口,这里的接口作用是：判断当前客户版本是否支持指定JS接口
        //参数是一个对象
        wx.checkJsApi({
            jsApiList: ['chooseImage'], // 需要检测的JS接口列表,
            success: function(res) {
                // 以键值对的形式返回，可用的api值true，不可用为false
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            }
        });


3.常见接口介绍
    （1）分享接口
        分享到朋友圈
        wx.onMenuShareTimeline({
            title: '', // 分享标题
            link: '', // 分享链接
            imgUrl: '', // 分享图标
            success: function () { 
                // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });
        分享给朋友
        wx.onMenuShareAppMessage({
            title: '', // 分享标题
            desc: '', // 分享描述
            link: '', // 分享链接
            imgUrl: '', // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () { 
                // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });
        分享到QQ
        wx.onMenuShareQQ({
            title: '', // 分享标题
            desc: '', // 分享描述
            link: '', // 分享链接
            imgUrl: '', // 分享图标
            success: function () { 
               // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
               // 用户取消分享后执行的回调函数
            }
        });
        分享到腾讯微博
        wx.onMenuShareWeibo({
            title: '', // 分享标题
            desc: '', // 分享描述
            link: '', // 分享链接
            imgUrl: '', // 分享图标
            success: function () { 
               // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });
        分享到QQ空间
        wx.onMenuShareQZone({
            title: '', // 分享标题
            desc: '', // 分享描述
            link: '', // 分享链接
            imgUrl: '', // 分享图标
            success: function () { 
               // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });
    （2）图像接口
        拍照或从手机相册中选图
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            }
        });
        上传图片接口
        wx.uploadImage({
            localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                var serverId = res.serverId; // 返回图片的服务器端ID
            }
        });
        备注：上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id
            下载多媒体文件
                公众号可调用本接口来获取多媒体文件。请注意，视频文件不支持下载，调用该接口需http协议。
                接口调用请求说明：
                    http请求方式: GET
                    http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID
                    请求示例（示例为通过curl命令获取多媒体文件）
                    curl -I -G "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"
                参数说明
                    参数  是否必须    说明
                    access_token    是   调用接口凭证
                    media_id    是   媒体文件ID
        下载图片接口
        wx.downloadImage({
            serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                var localId = res.localId; // 返回图片下载后的本地ID
            }
        });
        预览图片接口
        wx.previewImage({
            current: '', // 当前显示图片的http链接
            urls: [] // 需要预览的图片http链接列表
        });
    （3）音频接口
        开始录音接口
        wx.startRecord();
        停止录音接口
        wx.stopRecord({
            success: function (res) {
                var localId = res.localId;
            }
        });
        监听录音自动停止接口
        wx.onVoiceRecordEnd({
            // 录音时间超过一分钟没有停止的时候会执行 complete 回调
            complete: function (res) {
                var localId = res.localId; 
            }
        });
        播放语音接口
        wx.playVoice({
            localId: '' // 需要播放的音频的本地ID，由stopRecord接口获得
        });
        暂停播放接口
        wx.pauseVoice({
            localId: '' // 需要暂停的音频的本地ID，由stopRecord接口获得
        });
        停止播放接口
        wx.stopVoice({
            localId: '' // 需要停止的音频的本地ID，由stopRecord接口获得
        });
        监听语音播放完毕接口
        wx.onVoicePlayEnd({
            success: function (res) {
                var localId = res.localId; // 返回音频的本地ID
            }
        });
        上传语音接口
        wx.uploadVoice({
            localId: '', // 需要上传的音频的本地ID，由stopRecord接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                var serverId = res.serverId; // 返回音频的服务器端ID
            }
        });
        备注：上传语音有效期3天，可用微信多媒体接口下载语音到自己的服务器，此处获得的 serverId 即 media_id
            下载多媒体文件
                公众号可调用本接口来获取多媒体文件。请注意，视频文件不支持下载，调用该接口需http协议。
            接口调用请求说明
                http请求方式: GET
                http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID
                请求示例（示例为通过curl命令获取多媒体文件）
                curl -I -G "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"
            参数说明
                参数  是否必须    说明
                access_token    是   调用接口凭证
                media_id    是   媒体文件ID
        下载语音接口
        wx.downloadVoice({
            serverId: '', // 需要下载的音频的服务器端ID，由uploadVoice接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                var localId = res.localId; // 返回音频的本地ID
            }
        });
    （4）微信扫一扫
        调起微信扫一扫接口
        wx.scanQRCode({
            needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            }
        });