项目里面需要用到用户通过网址来进行授权

需要用到微信的扫码(请用微信打开

看效果
http://lg.kezir.com/testSaoMa/jsDemo.html?a=1
微信JS-SDK说明文档

概述

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

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

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

JSSDK使用步骤

步骤一:绑定域名

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

注意不需要写端口号

2可以看到图中第三步要将

放到服务器的tomcat根目录下 注意放在

/usr/java/tomcat7/webapps/ROOT目录下就可以保存

【因为默认访问的就是root目录】

步骤二:引入JS文件

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

如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/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可以在这里更新签名。

});

具体的实现

新建项目(项目的目录)
将相应的js放进去不要忘了init.js
一:写jsDemo.html
  
<!DOCTYPE html>
<!-- saved from url=(0029)http://www.duomeina.com/d.asp -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>微信JS-SDK Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" href="./some/style2.css">
</head>
<body ontouchstart="">
<div class="wxapi_container">
    <div class="lbox_close wxapi_form">
      <button class="btn btn_primary" id="scanQRCode1" style="display:none;">点击扫描二维码</button>
      <div id="result"></div>
    </div>
  </div>
<script src="./some/jweixin-1.js"></script>
<script src="./some/jquery-1.8.3.min.js"></script>
<script>
   var appId = '';
   var timestamp = 0;//为了让后台传过来的timetamp是数字类型 否则字符串 估计又会报config fail错误
   var nonceStr = '';
   var signature = '';
    $(document).ready(function(){
        init({//用init.js去请求服务器获得相应的数据 这里是我自己封装的ajax请求 就不贴出来了
            url:"/testSaoMa/getticket",//这是servlet 具体的请根据自己的servlert地址去填写
            dataType:"json",
            showType:"return",
            Deferred:false,
            Callback:function(dta){//获取数据
                appId = dta.appId;
                timestamp = dta.timestamp;
                nonceStr = dta.nonceStr;
                signature = dta.signature;
                  /*
                   * 注意:
                   * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
                   * 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
                   * 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
                   *
                   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:
                   * 邮箱地址:weixin-open@qq.com
                   * 邮件主题:【微信JS-SDK反馈】具体问题
                   * 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。
                   */
                  wx.config({//开始微信的配置 将获取的数据拿去请求
                      debug: false,
                      appId: appId,
                      timestamp: timestamp,
                      nonceStr: nonceStr,
                      signature: signature,
                      jsApiList: [//可以调用下面的接口 我们这里只是调用scanQRCode 也就是扫码接口
                        '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'
                      ]
                  });
                    wx.ready(function () {
                      // 9.1.2 扫描二维码并返回结果
                        wx.scanQRCode({
                          needResult: 1,
                          desc: 'scanQRCode desc',
                          success: function (res) {
                            //alert(JSON.stringify(res));
                            //document.getElementById("result").innerHtml=JSON.stringify(res);
                            //$("#result").html(JSON.stringify(res));
                            $("#result").html(res.resultStr);
                          }
                        });
                    });
                    wx.error(function (res) {//错误时调用
                        alert(res.errMsg);
                    });
            }
       });
    })
</script>
<script src="./some/zepto.js"></script>
<script src="init.js"></script>
</body></html>

上面颜色不同的部分就是配置微信的过程那是固定不变的

二:写服务器获取相应的数据
我们现在要管的就是数据的得到 就是获取它所需要的
 appId // 必填,公众号的唯一标识 不用获取直接去微信拿
 timestamp // 必填,生成签名的时间戳不用获取程序可以生成
 nonceStr  // 必填,生成签名的随机串 不用获取程序可以生成
 signature// 必填,签名 这是我们要获取的
  

而这些我就直接在服务器端获取得了

首先 appId 直接去你的微信开发者平台上面找    ( 注意是订阅号的appid不是测试号的的appid)
其次获 timestamp nonceStr  signature
  
微信JSSdk里面给出了一个方法 不需要导入任何的包 能获得 timestamp nonceStr
package com.weixin.util;
import java.util.UUID;
import com.alibaba.fastjson.JSONObject;
import java.util.Map;
import java.util.HashMap;
import java.util.Formatter;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.io.UnsupportedEncodingException;  
class Sign {
/**
* 获取nonce_str timestamp signature的方法
* @param jsapi_ticket 传入的ticket
* @param url 传入需要在微信中打开扫码的url
* @return map
*/

public static Map<String, String> sign(String jsapi_ticket, String url) {
Map<String, String> ret = new HashMap<String, String>();
String nonce_str = create_nonce_str();
String timestamp = create_timestamp();
String string1;
String signature = "";
//注意这里参数名必须全部小写,且必须有序
string1 = "jsapi_ticket=" + jsapi_ticket +
"&noncestr=" + nonce_str +
"&timestamp=" + timestamp +
"&url=" + url;
try
{
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(string1.getBytes("UTF-8"));
signature = byteToHex(crypt.digest());
}
catch (NoSuchAlgorithmException e)
{
e.printStackTrace();
}
catch (UnsupportedEncodingException e)
{
e.printStackTrace();
}
ret.put("url", url);
ret.put("jsapi_ticket", jsapi_ticket);
ret.put("nonceStr", nonce_str);
ret.put("timestamp", timestamp);
ret.put("signature", signature);
return ret;
}
private static String byteToHex(final byte[] hash) {
Formatter formatter = new Formatter();
for (byte b : hash)
{
formatter.format("%02x", b);
}
String result = formatter.toString();
formatter.close();
return result;
}
private static String create_nonce_str() {
return UUID.randomUUID().toString();
}
private static String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}
}

三:写Servlet(spring里面的Controller也行)来控制
Servlet代码
package com.weixin.util;
import java.io.IOException;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.annotations.Since;
/**
* Servlet implementation class getticket
*/
@WebServlet("/getticket")
public class getticket extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public getticket() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//        response.getWriter().append("Served at: ").append(request.getContextPath());
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//        doGet(request, response);
String jsapi_ticket = HttpUtil.getJsTicket();
String jsonstr = "{\"appId\":\""+WX_Token.APPID+"\",";
// 注意 URL 一定要动态获取
String url = "http://lg.kezir.com/testSaoMa/jsDemo.html";
Map<String, String> ret = Sign.sign(jsapi_ticket, url);
for (Map.Entry entry : ret.entrySet()) {
jsonstr += "\""+entry.getKey() + "\":\"" + entry.getValue()+"\",";
}
jsonstr = jsonstr.substring(0,jsonstr.length()-1);
jsonstr +="}";
System.out.println(jsonstr);
response.getWriter().println(jsonstr);
}
}

图解
现在就只剩下方法Http.getJsTicket()没讲了(url直接设置分享的网址就行了)
这是用来获取ticket的
1先根据appId和appSecret获取access_token
2再根据access_token获取ticket

获取ticket接口调用请求说明

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

package com.weixin.util;
import java.io.IOException;
import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
public class HttpUtil {
private static String access_Token = "";
/**
* get请求获取网址
* @param url
* @param charset
* @return
*/
public static String sendGet(String url,String charset){
CloseableHttpClient httpClient=HttpClients.createDefault();
HttpGet get=new HttpGet(url);
CloseableHttpResponse response = null;  
String result=null;
try {
response=httpClient.execute(get);
HttpEntity entity=response.getEntity();
//System.out.println(entity.getContentType().getValue());
result=EntityUtils.toString(entity,charset);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return result;
}
//获取tickect
public static String getJsTicket(){
JSONObject jsonObject = new JSONObject();
String ticket = "";
if(access_Token ==""){//如果是第一次获取就直接去请求新的
ticket = getTicket();
}else{//否则就请求旧的
String result = sendGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+access_Token+"&type=jsapi","UTF-8");
jsonObject = JSON.parseObject(result);
String resultCode = jsonObject.getString("errcode");
if(resultCode !="0"){//请求旧的如果不行
ticket = getTicket();//再去请求新的
}
else{//如果请求的新的ok
ticket = jsonObject.getString("ticket");//直接获取
}
}
return ticket;
}
/**
* 获取最新的ticket
* @return
*/
public static String getTicket(){
JSONObject jsonObject = new JSONObject();
access_Token = WX_Token.getAccessTokenByNet().getAccess_token();//获取Access_token代码就不贴了
String result = sendGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+WX_Token.getAccessTokenByNet().getAccess_token()+"&type=jsapi","UTF-8");
jsonObject = JSON.parseObject(result);
return jsonObject.getString("ticket");
}
}

微信开发系列(六)_js调用微信扫码相关推荐

  1. 钉钉开发系列(十一)钉钉网页扫码登录

    在<钉钉开发系列(八)二维码扫描登录的实现>介绍了一种扫码登录的方式,该方式是自己产生二维码,二维码中的URL指到自身的服务器页面,在该页面中以JSSDK的方式来获取钉钉用户的信息.钉钉官 ...

  2. 微信开发系列之九 - 在微信里直接创建SAP C4C的社交媒体消息

    标题:Wechat development series 9 – Create C4C Social Media Message and Service within Wechat app 文章系列目 ...

  3. 微信开发系列之二 - 在微信公众号里开发一个自动应答的图灵机器人

    In previous blog Wechat development series 1 – setup your development environment I introduce the ne ...

  4. php公众号获取code,微信开发系列——公众号内嵌H5页面获取code,拿到openID

    如果在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 我们要进行授权,先要经过用户授权(静默授权和授权页弹出授权两种,具体看文档中scope解析)拿 ...

  5. deepinV20一路艰辛系列六:更新微信到最新版本

    deepinV20一路艰辛系列六:更新微信到最新版本 关闭deepin微信进程 从Windows下的WeChat目录(一定记得先升级到最新版) 替换deepin的WeChat目录 重新打开微信就会发现 ...

  6. vue如何通过NodeJs本地获取微信access_token及签名,并调用微信接口

    一直都想搞一下微信公众号网页开发,公司忙没有时间自己也没开发过所以也没有头绪,前两天通过自己的摸索以及自行查找的资料,终于通过nodejs在本地成功的获取到了微信的access_token及签名,以及 ...

  7. 微信个性化菜单 java_java微信开发API第四步 微信自定义个性化菜单实现

    微信如何实现自定义个性化菜单,下面为大家介绍 一.全局说明 详细说明请参考前两篇文章. 二.本文说明 本文分为五部分: * 工具类AccessTokenUtils的封装 * 自定义菜单和个性化菜单文档 ...

  8. 微信小程序使用场景延伸:扫码登录、扫码支付

    微信小程序使用场景延伸:扫码登录.扫码支付 小程序最适合的使用场景有哪些?相比大家能列举出来很多,但这个场景,大家可能多数没想到_^ 笔者团队近期接到了一个PC项目:转转游戏租号PC官网,该项目要求在 ...

  9. flutter 刷脸_GitHub - hqwlkj/wechat_face_payment: 微信刷脸支付、刷脸认证、扫码支持等 Flutter 插件....

    wechat_face_payment 微信刷脸支付.刷脸认证.扫码支持等 Flutter 插件. 说明 该插件目前官方只提供了 Android SDK 和 Windows SDK 的文档,为提供IO ...

  10. 微信开发本地调试工具(模拟微信客户端)

    微信开发本地调试工具(模拟微信客户端) 开源免费微信管家系统(java)源码下载 微信部署需要依靠80端口,如何快速有效的调试本地微信开发程序, 捷微团队(jeewx-java微信开源系统),采用微信 ...

最新文章

  1. unigui的页面布局使用
  2. ngx_http_redis_module配置使用
  3. mockjs针对name的value设置生成规则语法示例
  4. luogu P3244 [HNOI2015]落忆枫音
  5. 三:大型网站的核心架构要素
  6. 『震惊』秘密报告披露转基因食品危害
  7. HTTP笔记-SOAP基本概念
  8. 嵌入式Linux入门2:工具掌握(Windows篇)
  9. 虚拟机上的linux作为服务器吗,linux ftp服务器 虚拟机做服务器如何实现
  10. 问题 K: n个数的最大值和最小值
  11. Android之远程图片获取和本地缓存
  12. ModuleNotFoundError: No module named ‘Crypto‘ 踩坑
  13. Mac Mysql 基本操作命令
  14. ubuntu 15.10 升级 到Ubuntu 16.04.3 LTS
  15. 跨数据库跨系统,数据脱敏有新招
  16. WIKI系统 ScrewTurn WIKI
  17. 32. Make Sure public inheritance models is-a.
  18. 基于SSM学生学籍管理系统
  19. 如何扩充C盘容量(在不重装系统或删除其他盘内容的条件下)
  20. 接口测试 - 从0不到1的心路历程 (二)

热门文章

  1. Python计算两个字符串的相似度代码示例
  2. 新网店怎么免费引流?新开的淘宝店铺前期如何引流?
  3. 怎样配置Java开发环境?步骤详解
  4. mysql实验3_MySQL实验(三) 过程式数据库对象的使用
  5. 进阶-1-深度剖析数据在内存中的存储
  6. 飞凌linux ip修改,[新手指导]imx6开发板 IP及MAC地址修改
  7. 开一家水果店需要学习哪些内容,想以后开水果店去哪里学习工作
  8. 赛效:A4Word双面打印要多少钱?
  9. 帆软 V9 Getshell 漏洞
  10. 可以用代理ip做什么。