使用JS-SDK调用微信扫一扫,需要有公众号支持,通过公众号生成JS-SDK使用权限签名。本文直接调用已封装好的接口来获取随机数(noncestr)、时间戳(timestamp)、签名(signature),接口地址:http://xx.xx.com/xxmap/wechat/jsapi/getSignature.do?appId=APPID&url=URL。appId是公众号的标识,url是需要调用微信扫一扫的页面的地址,需要进行encodeURIComponent编码。

调用微信扫一扫前端页面代码:

微信扫一扫

var purl = encodeURIComponent(location.href);

$.ajax({

url:"voucherController.do?getSignature",

data:{"url":purl},

type:"POST",

dataType:"json",

success:function(result){

wx.config({

debug:false,

appId:result.obj.appId,

timestamp:result.obj.timestamp,

nonceStr:result.obj.noncestr,

signature:result.obj.signature,

jsApiList:['scanQRCode']

});

},

error:function(){

alert("请求失败");

}

});

function scanQr(){

var ua = navigator.userAgent.toLowerCase();

var isWeiXin  =ua.indexOf('micromessenger') != -1;

if(!isWeiXin){

alert('请用微信打开链接,才可使用扫一扫!');

}

wx.scanQRCode({

needResult:1,

scanType:["qrCode"],

success:function (res) {

var scan = res.resultStr;

location.href=scan;

},

error:function(res) {

if(res.errMsg.indexOf('function_not_exist') > 0){

alert('当前版本低,请进行升级!');

}

}

});

}

wx.error(function(res){

alert(res.errMsg);

});

//$(function(){

//   setTimeout("scanQr()","1000");

//});

调用微信扫一扫后端代码:

@RequestMapping(params = “getSignature”)

@ResponseBody

public AjaxJson getSignature(String url){

AjaxJson j = new AjaxJson();

String sigUrl = “http://xx.xx.com/xxmap/wechat/jsapi/getSignature.do?appId=APPID&url=” + url;

//Get请求接口,获取随机数、时间戳、签名

JSONObject jsonObject = HttpRequest.sendGet(sigUrl);

JSONObject jsonObj = JSON.parseObject(jsonObject.getString(“result”));

jsonObj.put(“appId” ,APPID);//公众号appid

j.setObj(jsonObj);

return j;

}

注意:jweixin-1.0.0.js的引用,使用vConsole调试,IOS系统可能会出现找不到变量:wx异常,这个时候可以直接把整个jweixin-1.0.0.js复制到你的JS中,就可以解决。

html自动拿微信扫描,HTML——微信浏览器H5页面调用微信扫一扫相关推荐

  1. HTML——微信浏览器H5页面调用微信扫一扫

    使用JS-SDK调用微信扫一扫,需要有公众号支持,通过公众号生成JS-SDK使用权限签名.本文直接调用已封装好的接口来获取随机数(noncestr).时间戳(timestamp).签名(signatu ...

  2. H5页面调用微信支付

    1.H5页面使用微信支付,首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名.支付功能页面需在此域名链接下的页面. 2.加入域名后,就 ...

  3. 微信小程序web-view 外部引用h5页面调用摄像头录制视频 配有提示音

    微信小程序web-view 外部引用h5页面调用摄像头录制视频 配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...

  4. 微信小程序webview(H5页面)调用微信小程序支付

    1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...

  5. 手把手安排 --- JavaH5微信支付(移动端浏览器H5拉起微信支付)

    Java项目接入H5微信支付 开发环境 前期准备 申请微信公众平台及微信支付 准备内网穿透域名 微信支付开发配置 开始撸代码 成功案例 总结 公司项目需要接入微信支付,因为主要是在移动端的网页进行支付 ...

  6. 微信中无法下载APP h5页面在微信中下载APP的解决方案

    很多朋友都已经习惯在微信内分享网页链接和二维码了,通过扫描二维码下载APP或打开网页也成为大家惯用且非常方便的方式了.如此微信就成为了扫描二维码重要的工具,因为对于用户来说,说到二维码大家第一反应就是 ...

  7. 公众号开发-移动端h5页面调用微信扫一扫

    前言: 大家好,我是前端小陈.今天为大家讲一下微信公众号开发,调用微信的JSSDK的案例. 前不久,接到这么一个需求:在H5网页实现扫一扫功能.  要求:微信端以及浏览器均可以实现扫一扫功能,而且不能 ...

  8. 企业微信 引入微信api扫一扫(vue)【h5页面调用微信jssdk】

    引入(两种方式) (1)第一种方式 <script type="text/javascript" src="http://res.wx.qq.com/open/js ...

  9. 微信小程序内嵌H5页面实现微信支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了.说干就干,在小程序中设置好基本信息后,一预览 ...

  10. iOS H5页面调用微信或者支付宝进行支付

    一说支付,大多数人都会理解支付方式是下载微信和支付宝SDK进行支付,但是其实还有其他的方式,就是H5调用系统支付宝和微信进行支付. H5支付可能很多人认为是加载完页面剩下的就是页面完成即可,但是实际没 ...

最新文章

  1. [JS][编程题]括号匹配
  2. python 判断中文标点符号_Python入门编程题库27--生成随机密码
  3. 助你打造纯键盘流系统——Launchy
  4. 分布式锁 基于Redis
  5. Linux debian ubuntu安装GIMP软件
  6. 谈谈python enumerate()函数的用法_python enumerate函数的使用方法总结
  7. Silverlight 2.5D RPG游戏技巧与特效处理:(十八)开场卷轴与动态窗口
  8. Ubuntu中软件安装与卸载
  9. 网络工程师试题(二)2020-12-8
  10. matlab根据脉冲计算转速,求不规则脉冲之前的时间间隔,进而求出电机转速
  11. N卡驱动版本与NVCUDA驱动版本和CUDA toolkit的关系
  12. 千博日志索引,收录了带头大哥、laok、王国强、严为民等人的博客
  13. 第一章 数字图像基础知识(图像的空间分辨率和幅度分辨率)
  14. 20170605——login页面(代码知识点分析)
  15. 网易上线短视频创作平台“网易知识公路“
  16. 使用iVMS-4200 存储录像数据时的设置
  17. 使用Chrome DevTools的Timeline分析页面性能
  18. Java04--运算符+分支结构+循环
  19. C语言界杠把子的书籍,你读过几本?
  20. 如何使应用保持后台运行

热门文章

  1. wincc变量数据归档(案例)
  2. Zabbix3.4监控Linux主机CPU温度
  3. android 11.0 12.0Launcher3去掉默认的google搜索栏
  4. access如何设置定期报表汇总_创建分组报表或汇总报表
  5. java绘图-常用条形码类型组成及使用说明
  6. JavaScript 中 typeof 和 instanceof 的区别及如何判断数组
  7. HDU 3709 平衡数 数位dp(Java版)
  8. 单片机中断程序详解(转)
  9. 微信小程序获取用户绑定手机号码完整版
  10. 测试中 Fakes、Mocks 以及 Stubs 概念明晰