JS 调用微信扫一扫功能


Posted in Javascript onDecember 22, 2016

1.第一步:

设置调用微信js安全域名,就可以在该域名下调用微信的js接口

JS 调用微信扫一扫功能

2.第二步:

将下面的js附在需要调用微信扫一扫的页面上,前提是需要引入微信的js[]

JS 调用微信扫一扫功能

3.第三步:

参考官方文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=876521668&lang=zh_CN

通过后台获取js权限签名jsapi_ticket【参考文档:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.99.84.E5.BD.951-JS-SDK.E4.BD.BF.E7.94.A8.E6.9D.83.E9.99.90.E7.AD.BE.E5.90.8D.E7.AE.97.E6.B3.95】

后台获取签名代码:

package com.epoch.wap.common;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Formatter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import com.epoch.common.utils.JsonUtil;
/** 
 * 官方给的使用js的验证工具 
 * @author Administrator 
 * 
 */ 
public class JsSignUtil { 
  public static String accessToken = null; 
  public static Map<String, Object> sign(String url) {  
    String sendUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=**appid**&secret= **secret**";
    String result = getHttpResult(sendUrl);
    Object accessResult = JsonUtil.getValueFromJson(result, "access_token");
    String signUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+accessResult.toString()+"&type=jsapi";
    String resultSign = getHttpResult(signUrl);
    Object ticket = JsonUtil.getValueFromJson(resultSign, "ticket");
    Map<String, Object> ret = new HashMap<String, Object>(); 
    String nonce_str = create_nonce_str(); 
    String timestamp = create_timestamp(); 
    String string1; 
    String signature = ""; 
    //注意这里参数名必须全部小写,且必须有序 
    string1 = "jsapi_ticket=" + ticket +
         "&noncestr=" + nonce_str + 
         "×tamp=" + 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("nonceStr", nonce_str); 
    ret.put("timestamp", timestamp); 
    ret.put("signature", signature); 
    ret.put("jsapi_ticket", ticket); 
    ret.put("appId", "wx154f74654ae04891");
    return ret; 
  } 
  /** 
   * 随机加密 
   * @param hash 
   * @return 
   */ 
  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 getHttpResult(String url) {
    String result = "";
    HttpGet httpRequest = new HttpGet(url);
    try {
      HttpResponse httpResponse = HttpClients.createDefault().execute(httpRequest);
      if (httpResponse.getStatusLine().getStatusCode() == 200) {
        result = EntityUtils.toString(httpResponse.getEntity());
      }
    } catch (ClientProtocolException e) {
      e.printStackTrace();
      result = e.getMessage().toString();
    } catch (IOException e) {
      e.printStackTrace();
      result = e.getMessage().toString();
    }
    return result;
  }
  /** 
   * 产生随机串--由程序自己随机产生 
   * @return 
   */ 
  private static String create_nonce_str() { 
    return UUID.randomUUID().toString(); 
  } 
  /** 
   * 由程序自己获取当前时间 
   * @return 
   */ 
  private static String create_timestamp() { 
    return Long.toString(System.currentTimeMillis() / 1000); 
  } 
}

官方文档示例:

参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html

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

4 第四步:

前台进入页面:`

@RequestMapping(value = "/tiaoma")
public String tiaoma( HttpServletRequest request,GoodsVO goods) throws Exception {
  String Url=request.getRequestURL()+"?"+request.getQueryString().toString();;
  Map<String, Object> resMap = new HashMap<String, Object>();
  resMap = JsSignUtil.sign(Url);
  request.setAttribute("nonceStr", resMap.get("nonceStr"));
  request.setAttribute("timestamp", resMap.get("timestamp"));
  request.setAttribute("signature", resMap.get("signature"));
  request.setAttribute("appId", resMap.get("appId"));
  request.setAttribute("url", resMap.get("url"));
  request.setAttribute("jsapi_ticket",                 resMap.get("jsapi_ticket"));
  return "index/tiaoma";
}`

以上所述是小编给大家介绍的JS 调用微信扫一扫功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery isType() 类型判断代码
Feb 14 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
微信小程序input抖动问题的修复方法
Mar 03 Javascript
Vue实现双向绑定的方法
Dec 22 #Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 #Javascript
Vue.js双向绑定实现原理详解
Dec 22 #Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 #Javascript
JS实现的简单轮播图运动效果示例
Dec 22 #Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 #Javascript
详解js的事件代理(委托)
Dec 22 #Javascript
You might like
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php数组随机排序实现方法
2015/06/13 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
javascript几个易错点记录
2014/11/26 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
24式加速你的Python(小结)
2019/06/13 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
俄罗斯游戏商店:Buka
2020/03/01 全球购物
工程款申请报告
2015/05/15 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
Python中异常处理用法
2021/11/27 Python
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis