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正则控制input标签只允许输入的值
Jul 29 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php项目打包方法
2008/02/18 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php树型类实例
2014/12/05 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
Python读写Excel文件的实例
2013/11/01 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Python requests接口测试实现代码
2020/09/08 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
质检的岗位职责
2013/11/17 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
小学新学期寄语
2014/04/02 职场文书
消防安全宣传口号
2014/06/10 职场文书
高中校园广播稿
2014/10/21 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
2015年司法所工作总结
2015/04/27 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis