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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
javascript中this关键字详解
Dec 12 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 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中的cookie不用刷新就生效的方法
2012/02/04 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
Smarty保留变量用法分析
2016/05/23 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
Javascript的闭包
2009/12/31 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
JS常用算法实现代码
2016/11/14 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Django  ORM 练习题及答案
2019/07/19 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
选秀节目策划方案
2014/06/06 职场文书
个人投资合作协议书
2014/10/12 职场文书
群众路线调研报告范文
2014/11/03 职场文书
董事长助理岗位职责
2015/02/11 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
七年级作文之环保作文
2019/10/17 职场文书