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中的escape及unescape函数的php实现代码
Sep 04 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
python安装以及IDE的配置教程
2015/04/29 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python异常处理和日志处理方式
2019/12/24 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
班主任新年寄语
2014/04/04 职场文书
运动员口号
2014/06/09 职场文书
教师节倡议书2015
2015/04/27 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书