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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
点图片上一页下一页翻页效果
Jul 09 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
php异步多线程swoole用法实例
2014/11/14 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
Python判断Abundant Number的方法
2015/06/15 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python imread、newaxis用法详解
2019/11/04 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
new修饰符是起什么作用
2015/06/28 面试题
触摸春天教学反思
2014/02/03 职场文书
给老婆的检讨书
2015/01/27 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript