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 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
小程序实现抽奖动画
Apr 16 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
js实现上下左右键盘控制div移动
Jan 16 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电台频率大全 - 9 上海市
2020/03/11 无线电
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php数组合并的二种方法
2014/03/21 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
详解javascript void(0)
2020/07/13 Javascript
python插入排序算法实例分析
2015/07/03 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python程序需要编译吗
2020/06/19 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
python SOCKET编程基础入门
2021/02/27 Python
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
部队万能检讨书
2014/02/20 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
护士个人总结范文
2015/02/13 职场文书
施工安全保证书
2015/05/09 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python
python 学习GCN图卷积神经网络
2022/05/11 Python