• 微信JSSDK说明文档

    2019-05-24 11:15:00
    微信JSSDK说明文档 转 微信JSSDK说明文档 2015年12月02日 09:41:34 panpanhm91 阅读数:10073 ...

    微信JSSDK说明文档

    微信JSSDK说明文档

    http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E7.BB.91.E5.AE.9A.E5.9F.9F.E5.90.8D

    目录

    概述

    微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

    通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

    此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。

    JSSDK使用步骤

    步骤一:绑定域名

    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

    备注:登录后可在“开发者中心”查看对应的接口权限。

    步骤二:引入JS文件

    在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js

    请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK

    如需使用摇一摇周边功能,请引入 jweixin-1.1.0.js

    备注:支持使用 AMD/CMD 标准模块加载方法加载

    步骤三:通过config接口注入权限验证配置

    所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名,见附录1
        jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
    

    步骤四:通过ready接口处理成功验证

    wx.ready(function(){
    
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    

    });


    步骤五:通过error接口处理失败验证

    wx.error(function(res){
    
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    

    });

    接口调用说明

    所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

    1. success:接口调用成功时执行的回调函数。
    2. fail:接口调用失败时执行的回调函数。
    3. complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
    4. cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
    5. trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。

    备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回


    以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:

    1. 调用成功时:"xxx:ok" ,其中xxx为调用的接口名
    2. 用户取消时:"xxx:cancel",其中xxx为调用的接口名
    3. 调用失败时:其值为具体错误信息

    基础接口

    判断当前客户端版本是否支持指定JS接口

    wx.checkJsApi({
        jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
        success: function(res) {
            // 以键值对的形式返回,可用的api值true,不可用为false
            // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });
    

    备注:checkJsApi接口是客户端6.0.2新引入的一个预留接口,第一期开放的接口均可不使用checkJsApi来检测。

    分享接口

    请注意不要有诱导分享等违规行为,对于诱导分享行为将永久回收公众号接口权限,详细规则请查看:朋友圈管理常见问题

    获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

    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 () { 
            // 用户取消分享后执行的回调函数
        }
    });
    

    图像接口

    拍照或从手机相册中选图接口

    wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
        }
    });
    

    预览图片接口

    wx.previewImage({
        current: '', // 当前显示图片的http链接
        urls: [] // 需要预览的图片http链接列表
    });
    

    上传图片接口

    wx.uploadImage({
        localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {
            var serverId = res.serverId; // 返回图片的服务器端ID
        }
    });
    

    备注:上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 media_id,参考文档../12/58bfcfabbd501c7cd77c19bd9cfa8354.html目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。

    下载图片接口

    wx.downloadImage({
        serverId: '', // 需要下载的图片的服务器端ID,由uploadImage接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {
            var localId = res.localId; // 返回图片下载后的本地ID
        }
    });
    

    音频接口

    开始录音接口

    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,参考文档../12/58bfcfabbd501c7cd77c19bd9cfa8354.html目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。

    下载语音接口

    wx.downloadVoice({
        serverId: '', // 需要下载的音频的服务器端ID,由uploadVoice接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {
            var localId = res.localId; // 返回音频的本地ID
        }
    });
    


    智能接口

    识别音频并返回识别结果接口

    wx.translateVoice({
       localId: '', // 需要识别的音频的本地Id,由录音相关接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {
            alert(res.translateResult); // 语音识别的结果
        }
    });
    

    设备信息

    获取网络状态接口

    wx.getNetworkType({
        success: function (res) {
            var networkType = res.networkType; // 返回网络类型2g,3g,4g,wifi
        }
    });
    


    地理位置

    使用微信内置地图查看位置接口

    wx.openLocation({
        latitude: 0, // 纬度,浮点数,范围为90 ~ -90
        longitude: 0, // 经度,浮点数,范围为180 ~ -180。
        name: '', // 位置名
        address: '', // 地址详情说明
        scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
    });
    

    获取地理位置接口

    wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
        success: function (res) {
            var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
            var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
            var speed = res.speed; // 速度,以米/每秒计
            var accuracy = res.accuracy; // 位置精度
        }
    });
    


    摇一摇周边

    开启查找周边ibeacon设备接口

    wx.startSearchBeacons({
    	ticket:"",  //摇周边的业务ticket, 系统自动添加在摇出来的页面链接后面
    	complete:function(argv){
    		//开启查找完成后的回调函数
    	}
    });
    

    备注:如需接入摇一摇周边功能,请参考:申请开通摇一摇周边

    关闭查找周边ibeacon设备接口

    wx.stopSearchBeacons({
    	complete:function(res){
    		//关闭查找完成后的回调函数
    	}
    });
    

    监听周边ibeacon设备接口

    wx.onSearchBeacons({
    	complete:function(argv){
    		//回调函数,可以数组形式取得该商家注册的在周边的相关设备列表
    	}
    });
    

    备注:上述摇一摇周边接口使用注意事项及更多返回结果说明,请参考:摇一摇周边获取设备信息


    界面操作

    隐藏右上角菜单接口

    wx.hideOptionMenu();
    

    显示右上角菜单接口

    wx.showOptionMenu();
    

    关闭当前网页窗口接口

    wx.closeWindow();
    

    批量隐藏功能按钮接口

    wx.hideMenuItems({
        menuList: [] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
    });
    

    批量显示功能按钮接口

    wx.showMenuItems({
        menuList: [] // 要显示的菜单项,所有menu项见附录3
    });
    

    隐藏所有非基础按钮接口

    wx.hideAllNonBaseMenuItem();
    // “基本类”按钮详见附录3
    

    显示所有功能按钮接口

    wx.showAllNonBaseMenuItem();
    

    微信扫一扫

    调起微信扫一扫接口

    wx.scanQRCode({
        needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
        success: function (res) {
        var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
    }
    });
    

    微信小店

    跳转微信商品页接口

    wx.openProductSpecificView({
        productId: '', // 商品id
        viewType: '' // 0.默认值,普通商品详情页1.扫一扫商品详情页2.小店商品详情页
    });
    


    微信卡券

    微信卡券接口中使用的签名凭证api_ticket,与步骤三中config使用的签名凭证jsapi_ticket不同,开发者在调用微信卡券JS-SDK的过程中需依次完成两次不同的签名,并确保凭证的缓存。

    获取api_ticket

    api_ticket 是用于调用微信卡券JS API的临时票据,有效期为7200 秒,通过access_token来获取。

    开发者注意事项:

    1.此用于卡券接口签名的api_ticket与步骤三中通过config接口注入权限验证配置使用的jsapi_ticket不同。

    2.由于获取api_ticket 的api 调用次数非常有限,频繁刷新api_ticket 会导致api调用受限,影响自身业务,开发者需在自己的服务存储与更新api_ticket。

    接口调用请求说明

    http请求方式: GET
    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=wx_card
    

    参数说明

    参数 是否必须 说明
    access_token 调用接口凭证

    返回数据

    数据示例:

     {
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKdvsdshFKA",
    "expires_in":7200
    }
    
    参数名 描述
    errcode 错误码
    errmsg 错误信息
    ticket api_ticket,卡券接口中签名所需凭证
    expires_in 有效时间

    拉取适用卡券列表并获取用户选择信息

    wx.chooseCard({
        shopId: '', // 门店Id
        cardType: '', // 卡券类型
        cardId: '', // 卡券Id
        timestamp: 0, // 卡券签名时间戳
        nonceStr: '', // 卡券签名随机串
        signType: '', // 签名方式,默认'SHA1'
        cardSign: '', // 卡券签名
        success: function (res) {
            var cardList= res.cardList; // 用户选中的卡券列表信息
        }
    });
    
    参数名 必填 类型 示例值 描述
    shopId string(24) 1234 门店ID。shopID用于筛选出拉起带有指定location_list(shopID)的卡券列表,非必填。
    cardType string(24) GROUPON 卡券类型,用于拉起指定卡券类型的卡券列表。当cardType为空时,默认拉起所有卡券的列表,非必填。
    cardId string(32) p1Pj9jr90_SQRaVqYI239Ka1erk 卡券ID,用于拉起指定cardId的卡券列表,当cardId为空时,默认拉起所有卡券的列表,非必填。
    timestamp string(32) 14300000000 时间戳。
    nonceStr string(32) sduhi123 随机字符串。
    signType string(32) SHA1 签名方式,目前仅支持SHA1
    cardSign string(64) abcsdijcous123 签名。

    cardSign详见附录4。开发者特别注意:签名错误会导致拉取卡券列表异常为空,请仔细检查参与签名的参数有效性。

    特别提醒

    拉取列表仅与用户本地卡券有关,拉起列表异常为空的情况通常有三种:签名错误、时间戳无效、筛选机制有误。请开发者依次排查定位原因。

    批量添加卡券接口

    wx.addCard({
        cardList: [{
            cardId: '',
            cardExt: ''
        }], // 需要添加的卡券列表
        success: function (res) {
            var cardList = res.cardList; // 添加的卡券列表信息
        }
    });
    

    cardExt详见附录4,值得注意的是,这里的card_ext参数必须与参与签名的参数一致,格式为字符串而不是Object,否则会报签名错误。

    查看微信卡包中的卡券接口

    wx.openCard({
        cardList: [{
            cardId: '',
            code: ''
        }]// 需要打开的卡券列表
    });
    

    微信支付

    发起一个微信支付请求

    wx.chooseWXPay({
        timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: '', // 支付签名随机串,不长于 32 位
        package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
        signType: '', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
        paySign: '', // 支付签名
        success: function (res) {
            // 支付成功后的回调函数
        }
    });
    

    备注:prepay_id 通过微信支付统一下单接口拿到,paySign 采用统一的微信支付 Sign 签名生成方法,注意这里 appId 也要参与签名,appId 与 config 中传入的 appId 一致,即最后参与签名的参数有appId, timeStamp, nonceStr, package, signType。

    微信支付开发文档:https://pay.weixin.qq.com/wiki/doc/api/index.html

    附录1-JS-SDK使用权限签名算法

    jsapi_ticket

    生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket

    1. 参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html
    2. 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

    成功返回如下JSON:

    {
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
    "expires_in":7200
    }
    

    获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。


    签名算法

    签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。


    即signature=sha1(string1)。示例:

    • noncestr=Wm3WZYTPz0wzccnW
    • jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
    • timestamp=1414587457
    • url=http://mp.weixin.qq.com?params=value


    步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:

    jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value
    


    步骤2. 对string1进行sha1签名,得到signature:

    0f9de62fce790f9a083d5c99e95740ceb90c27ed
    

    注意事项

    1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
    2. 签名用的url必须是调用JS接口页面的完整URL。
    3. 出于安全考虑,开发者必须在服务器端实现签名的逻辑


    如出现invalid signature 等错误详见附录5常见错误及解决办法。

    附录2-所有JS接口列表

    版本1.0.0接口

    • 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

    附录3-所有菜单项列表

    基本类

    • 举报: "menuItem:exposeArticle"
    • 调整字体: "menuItem:setFont"
    • 日间模式: "menuItem:dayMode"
    • 夜间模式: "menuItem:nightMode"
    • 刷新: "menuItem:refresh"
    • 查看公众号(已添加): "menuItem:profile"
    • 查看公众号(未添加): "menuItem:addContact"

    传播类

    • 发送给朋友: "menuItem:share:appMessage"
    • 分享到朋友圈: "menuItem:share:timeline"
    • 分享到QQ: "menuItem:share:qq"
    • 分享到Weibo: "menuItem:share:weiboApp"
    • 收藏: "menuItem:favorite"
    • 分享到FB: "menuItem:share:facebook"
    • 分享到 QQ 空间/menuItem:share:QZone

    保护类

    • 编辑标签: "menuItem:editTag"
    • 删除: "menuItem:delete"
    • 复制链接: "menuItem:copyUrl"
    • 原网页: "menuItem:originPage"
    • 阅读模式: "menuItem:readMode"
    • 在QQ浏览器中打开: "menuItem:openWithQQBrowser"
    • 在Safari中打开: "menuItem:openWithSafari"
    • 邮件: "menuItem:share:email"
    • 一些特殊公众号: "menuItem:share:brand"

    附录4-卡券扩展字段及签名生成算法

    JSSDK使用者请读这里,JSAPI用户可以跳过

    卡券签名和JSSDK的签名完全独立,两者的算法和意义完全不同,请不要混淆。JSSDK的签名是使用所有JS接口都需要走的一层鉴权,用以标识调用者的身份,和卡券本身并无关系。其次,卡券的签名考虑到协议的扩展性和简单的防数据擅改,设计了一套独立的签名协议。另外由于历史原因,卡券的JS接口先于JSSDK出现,当时的JSAPI并没有鉴权体系,所以在卡券的签名里也加上了appsecret/api_ticket这些身份信息,希望开发者理解。


    卡券 api_ticket

    卡券 api_ticket 是用于调用卡券相关接口的临时票据,有效期为 7200 秒,通过 access_token 来获取。这里要注意与 jsapi_ticket 区分开来。由于获取卡券 api_ticket 的 api 调用次数非常有限,频繁刷新卡券 api_ticket 会导致 api 调用受限,影响自身业务,开发者必须在自己的服务全局缓存卡券 api_ticket

    1. 参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html
    2. 用第一步拿到的access_token 采用http GET方式请求获得卡券 api_ticket(有效期7200秒,开发者必须在自己的服务全局缓存卡券 api_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=wx_card


    卡券扩展字段cardExt说明

    cardExt本身是一个JSON字符串,是商户为该张卡券分配的唯一性信息,包含以下字段:

    字段 是否必填 说明
    code 指定的卡券code码,只能被领一次。use_custom_code字段为true的卡券必须填写,非自定义code不必填写
    openid 指定领取者的openid,只有该用户能领取。bind_openid字段为true的卡券必须填写,bind_openid字段为false不必填写
    timestamp 时间戳,商户生成从1970年1月1日00:00:00至今的秒数,即当前的时间,且最终需要转换为字符串形式;由商户生成后传入,不同添加请求的时间戳须动态生成,若重复将会导致领取失败!
    nonce_str 随机字符串,由开发者设置传入,加强签名的安全性。随机字符串,不长于32位。推荐使用大小写字母和数字,不同添加请求的nonce须动态生成,若重复将会导致领取失败!
    signature 签名,商户将接口列表中的参数按照指定方式进行签名,签名方式使用SHA1,具体签名方案参见下文;由商户按照规范签名后传入。

    签名说明

    1. 将 api_ticket(特别说明:api_ticket 相较 appsecret 安全性更高,同时兼容老版本文档中使用的 appsecret 作为签名凭证。)、timestamp、card_id、code、openid、nonce_str的value值进行字符串的字典序排序。
    2. 将所有参数字符串拼接成一个字符串进行sha1加密,得到signature。
    3. signature中的timestamp,nonce字段和card_ext中的timestamp,nonce_str字段必须保持一致。
    4. code=jonyqin_1434008071,timestamp=1404896688,card_id=pjZ8Yt1XGILfi-FUsewpnnolGgZk, api_ticket=ojZ8YtyVyr30HheH3CM73y7h4jJE ,nonce_str=jonyqin 则signature=sha1(1404896688jonyqinjonyqin_1434008071ojZ8YtyVyr30HheH3CM73y7h4jJE pjZ8Yt1XGILfi-FUsewpnnolGgZk)=6b81fbf6af16e856334153b39737556063c82689。

    强烈建议开发者使用卡券资料包中的签名工具SDK进行签名或使用debug工具进行校验http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign

    卡券签名cardSign说明

    1. 将 api_ticket(特别说明:api_ticket 相较 appsecret 安全性更高,同时兼容老版本文档中使用的 appsecret 作为签名凭证。)、app_id、location_id、timestamp、nonce_str、card_id、card_type的value值进行字符串的字典序排序。
    2. 将所有参数字符串拼接成一个字符串进行sha1加密,得到cardSign。

    附录5-常见错误及解决方法

    调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息。以下为常见错误及解决方法:

    1. invalid url domain当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,如果使用了端口号,则配置的绑定域名也要加上端口号(一个appid可以绑定三个有效域名,见 目录1.1.1)。
    2. invalid signature签名错误。建议按如下顺序检查:
      1. 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
      2. 确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。
      3. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。
      4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
      5. 确保一定缓存access_token和jsapi_ticket。
      6. 确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败
    3. the permission value is offline verifying这个错误是因为config没有正确执行,或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查:
      1. 确认config正确通过。
      2. 如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。
      3. 确认config的jsApiList参数包含了这个JSAPI。
    4. permission denied该公众号没有权限使用这个JSAPI,或者是调用的JSAPI没有传入config的jsApiList参数中(部分接口需要认证之后才能使用)。
    5. function not exist当前客户端版本不支持该接口,请升级到新版体验。
    6. 为什么6.0.1版本config:ok,但是6.0.2版本之后不ok(因为6.0.2版本之前没有做权限验证,所以config都是ok,但这并不意味着你config中的签名是OK的,请在6.0.2检验是否生成正确的签名以保证config在高版本中也ok。)
    7. 在iOS和Android都无法分享(请确认公众号已经认证,只有认证的公众号才具有分享相关接口权限,如果确实已经认证,则要检查监听接口是否在wx.ready回调函数中触发)
    8. 服务上线之后无法获取jsapi_ticket,自己测试时没问题。(因为access_token和jsapi_ticket必须要在自己的服务器缓存,否则上线后会触发频率限制。请确保一定对token和ticket做缓存以减少2次服务器请求,不仅可以避免触发频率限制,还加快你们自己的服务速度。目前为了方便测试提供了1w的获取量,超过阀值后,服务将不再可用,请确保在服务上线前一定全局缓存access_token和jsapi_ticket,两者有效期均为7200秒,否则一旦上线触发频率限制,服务将不再可用)。
    9. uploadImage怎么传多图(目前只支持一次上传一张,多张图片需等前一张图片上传之后再调用该接口)
    10. 没法对本地选择的图片进行预览(chooseImage接口本身就支持预览,不需要额外支持)
    11. 通过a链接(例如先通过微信授权登录)跳转到b链接,invalid signature签名失败(后台生成签名的链接为使用jssdk的当前链接,也就是跳转后的b链接,请不要用微信登录的授权链接进行签名计算,后台签名的url一定是使用jssdk的当前页面的完整url除去'#'部分)
    12. 出现config:fail错误(这是由于传入的config参数不全导致,请确保传入正确的appId、timestamp、nonceStr、signature和需要使用的jsApiList)
    13. 如何把jsapi上传到微信的多媒体资源下载到自己的服务器(请参见文档中uploadVoice和uploadImage接口的备注说明)
    14. Android通过jssdk上传到微信服务器,第三方再从微信下载到自己的服务器,会出现杂音(微信团队已经修复此问题,目前后台已优化上线)
    15. 绑定父级域名,是否其子域名也是可用的(是的,合法的子域名在绑定父域名之后是完全支持的)
    16. 在iOS微信6.1版本中,分享的图片外链不显示,只能显示公众号页面内链的图片或者微信服务器的图片,已在6.2中修复
    17. 是否需要对低版本自己做兼容(jssdk都是兼容低版本的,不需要第三方自己额外做更多工作,但有的接口是6.0.2新引入的,只有新版才可调用)
    18. 该公众号支付签名无效,无法发起该笔交易(请确保你使用的jweixin.js是官方线上版本,不仅可以减少用户流量,还有可能对某些bug进行修复,拷贝到第三方服务器中使用,官方将不对其出现的任何问题提供保障,具体支付签名算法可参考 JSSDK微信支付一栏
    19. 目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题已在Android6.2中修复
    20. uploadImage在chooseImage的回调中有时候Android会不执行,Android6.2会解决此问题,若需支持低版本可以把调用uploadImage放在setTimeout中延迟100ms解决
    21. require subscribe错误说明你没有订阅该测试号,该错误仅测试号会出现
    22. getLocation返回的坐标在openLocation有偏差,因为getLocation返回的是gps坐标,openLocation打开的腾讯地图为火星坐标,需要第三方自己做转换,6.2版本开始已经支持直接获取火星坐标
    23. 查看公众号(未添加): "menuItem:addContact"不显示,目前仅有从公众号传播出去的链接才能显示,来源必须是公众号
    24. ICP备案数据同步有一天延迟,所以请在第二日绑定

    附录6-DEMO页面和示例代码

    DEMO页面

    http://demo.open.weixin.qq.com/jssdk

    Jssdk demo001.png


    示例代码

    http://demo.open.weixin.qq.com/jssdk/sample.zip

    备注:链接中包含php、java、nodejs以及python的示例代码供第三方参考,第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。


    原文地址: https://blog.csdn.net/panpanhm91/article/details/50143891/

    展开全文
  • 微信开发jssdk

    2020-06-02 23:32:44
    微信开发jssdk
  • PHP获取微信公众号JSSDK,拿到签名,返回前端,前端调用JSSDk,
  • 微信网页jssdk选择图片,然后将本地图片转成file上传到后台处理
  • 那一抹淡淡的忧伤—–微信开发基础 2. 用纯js是不可能用纯js了,这辈子都不用纯js了 —– 微信JSSDK开发以及问题解答 3. 要你命3000 —— 微信支付开发系列问题解决导语 微信JS-SDK是微信公众平台面向网页...

    目录 List

    1. 那一抹淡淡的忧伤—–微信开发基础
    2. 用纯js是不可能用纯js了,这辈子都不用纯js了 —– 微信JSSDK开发以及问题解答
    3. 要你命3000 —— 微信支付开发系列问题解决

    导语

    微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
    通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
    本文重点讲最新的JSSDK版本1.2,关于1.2版本的说明可以参考这里
    尤其注意从1.2版本开始微信针对IOS系统WKWebview内核做出了重大改变,所以广大开发者当以最新JSSDK1.2版本为开发源码,否则可能造成IOS部分功能无效


    开发前准备

    步骤一:绑定域名

    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
    备注:登录后可在“开发者中心”查看对应的接口权限。


    步骤二:引入JS文件
    在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js


    步骤三:通过config接口注入权限验证配置

    wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: ”, // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: ”, // 必填,生成签名的随机串
    signature: ”,// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 });

    直接用代码演示

    //加载微信JSSDK config
    wx.config({
            debug: false,
            appId: 'APPID',
            timestamp: time,
            nonceStr: 'NONCESTR',
            signature: 'SIGNATURE',
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone',
                'hideMenuItems',
                'showMenuItems',
                'hideAllNonBaseMenuItem',
                'showAllNonBaseMenuItem',
                'translateVoice',
                'startRecord',
                'stopRecord',
                'onVoiceRecordEnd',
                'playVoice',
                'onVoicePlayEnd',
                'pauseVoice',
                'stopVoice',
                'uploadVoice',
                'downloadVoice',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'getNetworkType',
                'openLocation',
                'getLocation',
                'hideOptionMenu',
                'showOptionMenu',
                'closeWindow',
                'scanQRCode',
                'chooseWXPay',
                'openProductSpecificView',
                'addCard',
                'chooseCard',
                'openCard',
            ]
        });
        //JSSDK错误报告
        wx.error(function(res){
            console.log(location.href.split('#')[0]);
        });

    config里面所涉及到的参数我们通过JSSDK官方demo来提供数据,我对官方的demo进行了再次封装,直接在这里贴出来:

    class Jssdk{
        private $appId;
        private $appSecret;
    
        public function __construct($appId, $appSecret) {
            $this->appId = $appId;
            $this->appSecret = $appSecret;
        }
    
        public function getSignPackage() {
            $jsapiTicket = $this->getJsApiTicket();
    
            // 注意 URL 一定要动态获取,不能 hardcode.
            $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
            $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    
            $timestamp = time();
            $nonceStr = $this->createNonceStr();
    
            // 这里参数的顺序要按照 key 值 ASCII 码升序排序
            $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
    
            $signature = sha1($string);
    
            $signPackage = array(
                "appId"     => $this->appId,
                "nonceStr"  => $nonceStr,
                "timestamp" => $timestamp,
                "url"       => $url,
                "signature" => $signature,
                "rawString" => $string
            );
            return $signPackage;
        }
    
        private function createNonceStr($length = 16) {
            $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
            $str = "";
            for ($i = 0; $i < $length; $i++) {
                $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
            }
            return $str;
        }
    
        private function getJsApiTicket() {
            // jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
            $data = json_decode($this->get_php_file("jsapi_ticket.php"));
            if ($data->expire_time < time()) {
                $accessToken = $this->getAccessToken();
                // 如果是企业号用以下 URL 获取 ticket
                // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
                $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
                $res = json_decode($this->httpGet($url));
                $ticket = $res->ticket;
                if ($ticket) {
                    $data->expire_time = time() + 7000;
                    $data->jsapi_ticket = $ticket;
                    $this->set_php_file("jsapi_ticket.php", json_encode($data));
                }
            } else {
                $ticket = $data->jsapi_ticket;
            }
    
            return $ticket;
        }
    
        private function getAccessToken() {
            // access_token 应该全局存储与更新,以下代码以写入到文件中做示例
            $data = json_decode($this->get_php_file("access_token.php"));
            if ($data->expire_time < time()) {
                // 如果是企业号用以下URL获取access_token
                // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
                $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
                $res = json_decode($this->httpGet($url));
                $access_token = $res->access_token;
                if ($access_token) {
                    $data->expire_time = time() + 7000;
                    $data->access_token = $access_token;
                    $this->set_php_file("access_token.php", json_encode($data));
                }
            } else {
                $access_token = $data->access_token;
            }
            return $access_token;
        }
    
        private function httpGet($url) {
            $curl = curl_init();
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($curl, CURLOPT_TIMEOUT, 500);
            // 为保证第三方服务器与微信服务器之间数据传输的安全性,所有微信接口采用https方式调用,必须使用下面2行代码打开ssl安全校验。
            // 如果在部署过程中代码在此处验证失败,请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
            curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
            curl_setopt($curl, CURLOPT_URL, $url);
    
            $res = curl_exec($curl);
            curl_close($curl);
    
            return $res;
        }
    
        private function get_php_file($filename) {
            return trim(substr(file_get_contents($filename), 15));
        }
        private function set_php_file($filename, $content) {
            $fp = fopen($filename, "w");
            fwrite($fp, "<?php exit();?>" . $content);
            fclose($fp);
        }
    }

    务必先拿到数据后注册给JSconfig,否则微信JSSDK是无效的

    等你一切准备得当的时候请打开网页调试里的console来查看效果

    正确调用的情况:
    这里写图片描述

    到这里所有的准备工作就完成了


    图片选择

    调用JSSDK的图片接口

    wx.chooseImage({
                count: 1,
                success: function (res) {
                    //选择图片成功后
                    images.localId = res.localIds;//安卓可以直接使用localIds 预览图片
                    if(res.localIds.indexOf("wxlocalresource") != -1){
                        res.localIds = res.localIds.replace("wxlocalresource", "wxLocalResource");
                    }
                  )};  
                   //以下的适配IOS
                   //先使用阅览接口(适配IOSWKWebview版本)
                        wx.getLocalImgData({
                            localId: images.localId[i], // 图片的localID
                            success: function (res) {
                                var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
                                $("#chooseImage").parent().before("<li class='upload_action'><img src='"+localData+"'/></li>");
                            }
    
                        });

    图片上传

    直接采用递归方法来上传多张图片

    function upload() {
        wx.uploadImage({
                            localId: images.localId[i].toString(),
                            isShowProgressTips: 1, // 默认为1,显示进度提示
                            success: function (res) {
                                i++;
                                var media_id = res.serverId;
    
                                images.serverId.push(res.serverId);//上传到了服务器的ID
    
                                if (i < length) {
                                    upload();
                                }
                            },
                            fail: function (res) {
                                alert(JSON.stringify(res));
                            }
                        });
    
    }

    将上传到服务器的图片下载到本地项目

    public function getmedia(){
            $media_id = get.sevrid;//前端返回的上传后的媒体id
            $weixin = new Weixinpay(); //实例化微信类
            $access_token = $weixin->getToken(); //获取token
    
            $url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id;
            //获取微信“获取临时素材”接口返回来的内容(即刚上传的图片)
            $a = file_get_contents($url);
            //echo $a;
            $filename = date('YmdHis').rand(1000,9999).'.jpg';
            //以读写方式打开一个文件,若没有,则自动创建
            $resource = fopen($_SERVER["DOCUMENT_ROOT"].'/Uploads/User_img/'.$filename, 'w+');
            //将图片内容写入上述新建的文件
            fwrite($resource, $a);
            //关闭资源
            fclose($resource);
            echo '/Car/Common/Uploads/User_img/'.$filename;
        }

    通过以上方法我们能达到 用户用微信自带的上传图片系统上传到我们自己服务器上


    完整代码

    var images = {
            localId: [],
            serverId: []
        };
        choose.onclick = function(){
            wx.chooseImage({
                count: 1,
                success: function (res) {
                    //选择图片成功后
                    images.localId = res.localIds;
                    if(res.localIds.indexOf("wxlocalresource") != -1){
                        res.localIds = res.localIds.replace("wxlocalresource", "wxLocalResource");
                    }
                    var i = 0, length = images.localId.length;
    
                    function upload() {
                        //先使用阅览接口(适配IOSWKWebview版本)
                        wx.getLocalImgData({
                            localId: images.localId[i], // 图片的localID
                            success: function (res) {
                                var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
                                $("#chooseImage").parent().before("<li class='upload_action'><img src='"+localData+"'/></li>");
                            }
    
                        });
                        wx.uploadImage({
                            localId: images.localId[i].toString(),
                            isShowProgressTips: 1, // 默认为1,显示进度提示
                            success: function (res) {
                                i++;
                                var media_id = res.serverId;
    
                                images.serverId.push(res.serverId);
                                $.ajax({
                                    url:'getmedia.php',
                                    data:{'mid':res.serverId.toString()},
                                    type:'get',
                                    success:function(res){
                                        $("input[name='qu_img']").val(res);
                                        $("#chooseImage").hide();
                                    }
    
                                });
                                if (i < length) {
                                    upload();
                                }
                            },
                            fail: function (res) {
                                alert(JSON.stringify(res));
                            }
                        });
    
                    }
                    upload();
                }
            });
    
        }

    演示

    这里写图片描述

    讨论和询问可以加QQ

    1577452412

    展开全文
  • 微信开发JSSDK调用

    2016-11-22 17:03:13
    由于项目需要,需要接触微信开发,并要调用微信的JS-SDK里面的接口。 因为经验缺乏,我百度一下关于微信开发的资料,但收集的资料都不尽人意。网上的主流的微信开发是采用PHP开发的,而本人学的Java。所以对PHP微信...

               由于项目需要,需要接触微信开发,并要调用微信的JS-SDK里面的接口。

           因为经验缺乏,我百度一下关于微信开发的资料,但收集的资料都不尽人意。网上的主流的微信开发是采用PHP开发的,而本人学的Java。所以对PHP微信开发只能看懂思路。更有的是,网上一些微信开发视频,也是和PHP有关的,关于用Java开发的甚少。

           无奈之下,我只好苦啃微信开发文档。大家都知道,微信官方给的开发文档真的有点那个啥,一个功能实现非要分几个地方来说,看完这块,又得点击另一个页面看完另一块,甚是麻烦。这样的设定也让我走了好多坑。

    但功夫不负有心,在研究透了微信开发文档之后,我顺利在在项目中完成微信开发。现在我将微信开发的经验分享一下,希望对大家有所帮助。

           微信JS-SDK是微信公众号平台面向网页开发这提供基于微信内的网页开发工具包。接口大类分为:基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地址位置、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡劵和微信支付。一般使用频率高的就是分享接口、地理微信、微信扫一扫和微信支付。

    接下来,我将主要讲解如何调用微信分享接口。

    第一步,准备内网映射工具,ngrok。不清楚这个的同学可以去百度一下。https://ngrok.com为ngrok官网。要进行微信开发,内网映射工具是不可少。毕竟,我们程序员进行开发,要测试开发的产品是否能用,都先在自己的电脑跑一下。但由于ngrok的服务器在外国的,鉴于天朝的墙太高,访问可能不稳定。所以我推荐的是国内的natapp,免费和收费的都有,服务毕竟稳定可靠,只不过要想自定义二级域名就得交费成为VIP咯。

    第二步,配置JS接口安全域名。登录要进行开发的公众号,点击公众设置--->功能设置。设置JS接口安全域名,要注意三点:①填写域名前面不需加上http://,例如你的域名是http://test.com,直接填写test.com即可;②域名默认80端口,只支持80和443端口,所以域名后面不能添加端口号。③该域名为你调用微信JS-SDK接口域名。

    第三步,引用JS文件。在需要调用JS接口的页面引入http://res.wx.qq.com/open/js/jweixin-1.0.0.js 。


    第四步,通过config接口注入权限验证配置 。具体参数有什么用处,在截图都有注释讲解。其中jsApiList为我们要使用的接口,我在下面共引用了五个接口,分别为微信好友分享、QQ好友分享、腾讯微博分享、QQ空间分享和朋友圈分享。调用的都是分享的接口。至于其他接口列表,可以去微信开发文档那浏览一下。这里就不详说。

            第五步,在服务器生成相关参数传到调用JS-SDK页面,完成授权。这是最重要的一步。如上图所示,appId,timestamp,nonceStr,signature都为必填参数。下面我将会详细说说如何生成这些参数并传回页面。

    appId为开发的微信公众号的AppID(应用ID),我们可以在登录微信公众号,在开发选项中点击基本配置来查看。

    timestamp为系统生成的时间戳。


    nonceStr为服务器随机生成的字符串。



    signature为微信JS-SDK使用权限算法。在生成signature之前,我们要拿到jsapi_ticket。官方文档是这样解释的:


    我们要注意三个地方。jsapi_ticket要缓存两个小时,每过两个小时,向微信那边请求一次。获取jsapi_ticket要通过access_token。那么我们该如何获取access_token呢?


    从文档可以看出,access_token需要AppID和AppSercet两个参数。而且access_token和jsapi_ticket一样,有效期皆为两小时。这就要求我们服务器要缓存access_token和jsapi_ticket,当有效期一过,就重新请求。有的人采用是用数据库来存取这两个参数,而我采用的是用Quartz定时器。关于Quartz定时器的使用,可浏览我上篇博客《SSH与Quartz集成》,里面有关于Quartz的使用方法。

    AppSercet可在与APPID同一页面获取。接下来,调用接口,获取access_token。



    接下来,我们用access_token去获取jsapi_ticket。


    获取jsapi_ticket,就可以进行生成签名。在此之前,先看一下官方文档的签名算法。



    用代码实现。


    第六步,传生成的参数给网页。



    第七步,调用已授权的JS接口。


    第八步,利用微信Web开发者工具调试,看看是否授权成功。(微信web开发者工具可在微信开发下载)。



    展开全文
  • 最近公司开发了几款用于宣传的微信页面,里面主要用到了JSSDK,以及如何用它进行分享到朋友圈和好友的时候,实现小图标和文字描述。 首先需要一个认证了的服务号,在公众号设置-&gt;功能设置-&gt;JS接口...

    最近公司开发了几款用于宣传的微信页面,里面主要用到了JSSDK,以及如何用它进行分享到朋友圈和好友的时候,实现小图标和文字描述。

    首先需要一个认证了的服务号,在公众号设置->功能设置->JS接口安全域名下,添加自己的服务器路径。

    之后在路径下加入微信的文本文件

    最后在页面引入JS文件

    下面就可以在页面进行使用了,首先在页面头部引入jssdk.php:

    <?php
    require_once "php/jssdk.php";
    $jssdk = new JSSDK("微信APPID", "微信密码");
    $signPackage = $jssdk->GetSignPackage();
    ?>

    jssdk.php的文件可以在微信demo文件中获取。

    如果是HTML就用JS来调用。

           var content = "云产烟品牌周年庆新疆分中心本香活动";
    
            wx.config({
                // 配置信息, 即使不正确也能使用 wx.ready
                debug: false,
                appId: '<?php echo $signPackage["appId"];?>',
                timestamp: '<?php echo $signPackage["timestamp"];?>',
                nonceStr: '<?php echo $signPackage["nonceStr"];?>',
                signature: '<?php echo $signPackage["signature"];?>',
                jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage']
            });
    
    
        function autoPlayAudio1() {
            wx.ready(function(res) {
    
                 //分享给朋友
            wx.onMenuShareAppMessage({
                title: '天山环秀,香自云中',       // 分享标题
                desc: content, // 分享描述
                link: 'http://www.域名.com/JS/index1.php',                 // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://www.域名.com/JS/logo1.png',                             // 分享图标
                type: '',                               // 分享类型,music、video或link,不填默认为link
                dataUrl: '',                            // 如果type是music或video,则要提供数据链接,默认为空
                trigger: function(res) {},
                success: function(res) {},
                cancel: function(res) {},
                fail: function(res) {}
            }); 
    
           //分享到朋友圈
           wx.onMenuShareTimeline({
                title: '天山环秀,香自云中', // 分享标题
                link: 'http://www.域名.com/JS/index1.php', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://www.域名.com/JS/logo1.png', // 分享图标
                trigger: function(res) {},
                success: function(res) {},
                cancel: function(res) {},
                fail: function(res) {}
            });  
                
           
            });
    
            wx.checkJsApi({
                jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'], // 需要检测的JS接口列表
                success: function(res) {
                        // alert(res);
                }
            });
    
            wx.error(function(res){
    
             });
        
            }

    这里的注意点是:

    一,imgUrl必须是https开头,不然IOS系统不支持小图标。

    二,MP_verify_IQ2J5O8aSzoYj2g4.txt,文件必须放在http://www.域名.com/JS/下面描述才会生效。

    展开全文
  • 微信网页jssdk调用demo

    2020-07-04 00:18:40
    一个web项目,tomcat6,jdk1.7直接运行即可,初始页面index.jsp里面有接入列子,以及调用其他的接口的列子,
  • 最近在做微信公众号网页开发,遇到两个需要用到微信JSSDK,上传图片和自动定位,微信开发者文档有详细的步奏内容,链接点击进入微信开发者文档,也可以看看我这篇文章,看我是如何实现的。 首先第一步,需要在...

    最近在做微信公众号网页开发,遇到两个需要用到微信的JSSDK,上传图片和自动定位,微信开发者文档有详细的步奏内容,链接点击进入微信开发者文档 ,也可以看看我这篇文章,看我是如何实现的。

    首先第一步,需要在页面引入微信的JS文件(http和https都行)

    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    第二步,获取签名

    后台会给前端一个接口,前端通过这个接口发送请求获取必要的签名信息,并进行配置

    sendAjax.weixin.getSdkSign({'传入参数'},function(msg){
        let sdkSign = msg.sdkSgin; // 后台返回的值
          wx.config({
            debug: false, // 因为在手机上测试没法打印,当debug为true时,所有的返回值都会在手机上alert出来
            appId: sdkSign.appId, // 必填,公众号唯一标识
            timestamp: sdkSign.timestamp, // 必填,生成签名的时间戳
            nonceStr: sdkSign.nonceStr, // 必填,生成签名的随机串
            signature: sdkSign.signature,// 必填,签名
            jsApiList: ['chooseImage','uploadImage'] // 必填,需要使用的JS接口列表,需要用到什么接口就去开发者文档查看相应的字段名
          });
            wx.ready(function(){
                wx.getLocation({
                  type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                  success: function (res) {
                    let latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                    let longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                  }
                });
           });
    });

     

    其中,sendAjax.weixin.getSdkSign 是我个人自己封装的ajax请求,不用多在意。

     

    进页面就需要进行定位,但是we.getLocation需写在we.ready里面,就是需要wx.config配置完成后才能进行下一步。微信端给你返回的是经纬度,并不是具体的地址,所以可以借用高德地图的请求,通过经纬度获取具体地址。

    高德地图参考网址高德开放平台

    至此,利用微信JSSDK实现自动定位功能基本就实现了,有疑问或者不对的地方欢迎留言。

    展开全文
  • 微信6.0之后JSSDK的调用,微信分享功能的实现,傻瓜教程
  • 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、...
  • 微信开发入门教程 jssdk,通过config接口注入权限验证配置java+jsp微信开发教程,功能:扫描二维码,拍照、本地选图,图片预览,上传图片,下载图片,获取当前网络状态,查看地理位置,获取当前地理位置打开地图,...
  • 这些代码如果你是新手可能第一眼有懵,但是耐心点,就会很清楚,(高手肯定一看就会),里面有些 代码也是网上来的,微信这个东西我也是被坑了好多回。实在想不出什么说的了 PHP端代码 直接上代码 代码片. <?php ...
  • 微信开发jssdk入门

    2019-08-14 18:58:37
    一个项目需要在微信里获得当前位置,于是就开始了我的微信开发之旅... 微信JSSDK说明文档http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html JSSDK使用步骤步骤一:绑定域名绑定域名要求是一级...
  • 集成微信jssdk的所有功能,填写appid和appsecret就可以使用
  • 总结微信jssdk使用

    2019-04-11 11:55:20
    总结微信jssdk使用 在实际项目中调用微信jssdk,这篇博客主要做一个总结记录    首先是关于微信jssdk调用步骤 1.在公众号内部的“公众号设置”的“功能设置”里填写“JS接口安全域名”。    备注:登录后可在...
  • 微信分享jssdk实例

    2015-04-02 16:40:03
    $jssdk = new JSSDK("Yourkey", "YourSecret"); $signPackage = $jssdk->GetSignPackage(); ?> 雅姿hydra水润保湿系列-手机瑞丽网 /* * 注意: * 1. 所有的JS接口只能在公众号绑定的域
  • 3.一定需要仔细看企业微信开发文档,不然很多自己意想不到的bug。企业微信jsSdk的说明 4.关于 应用注意事项wx.agentConfig调用的说明 5.配置问题(下载说明中的文件配置到自己的根目录) 6,其实...
  • 2015年初,微信向互联网界投了一颗重磅核武器——全面支持... 本书适合所有微信开发人员使用,尤其适合目前从事Web开发工作的人员,本书定位基础,用案例结合API应用,是目前市场上仅有的一本介绍微信JSSDK的书。
1 2 3 4 5 ... 20
收藏数 3,896
精华内容 1,558