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和C#的异同
May 31 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
js获取php变量的实现代码
Aug 10 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
原生JS实现音乐播放器
Jan 26 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
详解Python编程中包的概念与管理
2015/10/16 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python读写csv文件实例代码
2019/07/05 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Python logging模块handlers用法详解
2020/08/14 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
师说教学反思
2014/02/07 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
考试诚信承诺书
2014/05/23 职场文书
实习协议书范本
2014/09/25 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android