微信JS-SDK使用步骤(以微信扫一扫为例)

概述:

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

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

JSSDK使用步骤:

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

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

 2.引入js文件(必须)

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

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

3.通过config接口注入权限验证配置

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

  window.wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: sign.appId, // 必填,公众号的唯一标识
    timestamp: sign.timestamp, // 必填,生成签名的时间戳
    nonceStr: sign.nonceStr, // 必填,生成签名的随机串
    signature: sign.signature, // 必填,签名,见附录1
    jsApiList: [
      ‘onMenuShareTimeline‘,
      ‘onMenuShareAppMessage‘,
      ‘hideMenuItems‘,
      ‘showMenuItems‘,
      ‘showAllNonBaseMenuItem‘,
      ‘hideAllNonBaseMenuItem‘,
      ‘startRecord‘,
      ‘stopRecord‘,
      ‘onVoiceRecordEnd‘,
      ‘uploadVoice‘,
      ‘downloadVoice‘,
      ‘playVoice‘,
      ‘onVoicePlayEnd‘,
      ‘pauseVoice‘,
      ‘stopVoice‘,
      ‘openLocation‘,
      ‘getLocation‘,
      ‘chooseWXPay‘,
      ‘onMenuShareQQ‘,
      ‘scanQRCode‘,
    ], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  });

注: sign需要请求后台获取,jsApiList可根据实际需求增减。

3.通过ready接口处理成功验证

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

注:不论config信息验证是否成功,最终都会执行ready方法

4.通过error接口处理失败验证

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

调用微信接口(以扫一扫为例)

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

//如需对扫码结果进行处理,可在此方法外层包裹一层函数,传入回调,形如:
const scanQRCode = (fn) => {
    wx.scanQRCode({
      // 默认为0,扫描结果由微信处理,1则直接返回扫描结果
      needResult: 1,
      desc: ‘scanQRCode desc‘,
      success(res) {
        fn(res.resultStr)
      },
    });
 },

介绍就到这里了,如果想了解更多,请参考微信js-sdk说明文档

原文地址:https://www.cnblogs.com/AllenR/p/8176599.html

时间: 2024-08-04 13:03:41

微信JS-SDK使用步骤(以微信扫一扫为例)的相关文章

实战微信JS SDK开发:贺卡制作与播放(1)

前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细说吧. 最近同事用CanTK开发了一个基于微信的贺卡制作APP,我虽然没有参与开发,但是提供CanTK和GameBuilder的技术支持,觉得有些东西比较有意思,写几篇博客和大家分享吧.这个贺卡APP完全开源,有需要的朋友可以随意修改和发布. CanTK(Canvas ToolKit)是一个开源的游

微信js sdk上传多张图片

微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="11111111111111111111"; $secret="11111111111111111111"; $token = S('access_token'); if (!$token) { $res = file_get_contents("https://api.weixin.qq.c

微信开发SDK使用教程--手机微信个人号移除好友通知服务端

微信开发SDK使用教程--手机微信个人号移除好友通知服务端 case FriendDelNotice: {// 微信个人号移除好友通知 log.debug("socket:msgtype=FriendDelNotice"); friendDelNoticeHandler.handleMsg(ctx, msgVo); break; } package com.jubotech.framework.netty.handler.socket; import org.slf4j.Logger;

微信开发SDK使用教程--手机微信个人号新增好友通知服务端

微信开发SDK使用教程--手机微信个人号新增好友通知服务端 case FriendAddNotice: {// 微信个人号新增好友通知 log.debug("socket:msgtype=FriendAddNotice"); friendAddNoticeHandler.handleMsg(ctx, msgVo); break; } package com.jubotech.framework.netty.handler.socket; import org.slf4j.Logger;

微信开发SDK使用教程--手机微信好友发来聊天消息通知服务端

微信开发SDK使用教程--手机微信好友发来聊天消息通知服务端 case FriendTalkNotice: {// 微信好友发来聊天消息 log.debug("socket:msgtype=FriendTalkNotice"); friendTalkNoticeHandler.handleMsg(ctx, msgVo); break; } package com.jubotech.framework.netty.handler.socket; import org.slf4j.Logg

微信开发SDK使用教程--手机微信有好友请求添加好友的通知服务端

微信开发SDK使用教程--手机微信有好友请求添加好友的通知服务端 case FriendAddReqeustNotice: {//有好友请求添加好友的通知 log.debug("socket:msgtype=FriendAddReqeustNotice"); friendAddReqeustNoticeHandler.handleMsg(ctx, msgVo); break; } package com.jubotech.framework.netty.handler.socket;

微信JS SDK Demo

微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置原文:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html 一.JS部分 wx.ready(function () { // 1 判断当前版本是否支持指定 JS 接口,支持批量判断 document.querySelector('#checkJsApi').onclick = function () { wx.

微信JS SDK配置授权,实现分享接口

微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑,后面看到"config:ok"的时候真的算是石头落地,瞬间感觉世界很美好.. 这篇文章是微信开发的很多前置条件,包括了服务端基于JAVA的获取和缓存全局的access_token,获取和缓存全局的jsapi_ticket,以及前端配置授权组件封装,调用分享组件封装. 配置授权思路:首先根据

微信JS SDK Demo 官方案例

转自:http://my.oschina.net/superkangning/blog/367484 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项. 一:html代码部分 ? 1 2 3 4 5 6 7 8 9

微信JS SDK使用权限签名算法

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