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取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
深入浅析var,let,const的异同点
2018/08/07 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python求解汉诺塔游戏
2020/07/09 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
学院书画协会部门职责
2013/11/28 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
保送生自荐信
2015/03/06 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
Win11 BitLocker 驱动器加密
2022/04/19 数码科技