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 相关文章推荐
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php mssql 时间格式问题
2009/01/13 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
Python设计实现的计算器功能完整实例
2017/08/18 Python
python字典操作实例详解
2017/11/16 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
深入浅析python with语句简介
2018/04/11 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python实现的特征提取操作示例
2018/12/03 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
网站创业计划书
2014/04/30 职场文书
公关活动策划方案
2014/05/25 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
民事赔偿协议书
2014/11/02 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
消防演习感想
2015/08/10 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
React forwardRef的使用方法及注意点
2021/06/13 Javascript
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Python利用FlashText算法实现替换字符串
2022/03/31 Python