项目场景：单纯的h5项目，没办法调用微信等封装好的组件或者js因为有些场景并不在微信自带的浏览器里面
生成条形码使用vue-barcode
使用vue实现h5扫码功能借助百度或者JiaThis，来实现。很简单，复制一下别的网站的代码，轻松解决：比如下面这个网站的：>var a = {name : 'kong'};
awatch("name", function(id, oldVal, newVal){
consolelog(id + '属性由' + oldVal + '变为' + newVal);
return newVal;
})
aname = 'zhang';
delete aname;
aname = 'wang';
//输出name由kong变为zhang
//name由undefined变为wang
aunwatch('name');
//取消监听该属性
微信开发交流群：148540125
欢迎留言、转发、打赏
系列文章参考地址 极速开发微信公众号
项目源码参考地址 点我点我--欢迎Start
服务号、订阅号可以通过登录 微信公众平台 查看 开发>接口权限
使用JSSDK主要包括
1、判断当前客户端版本是否支持指定JS接口、
2、分享接口（微信认证）
3、图像接口
4、音频接口
5、智能接口（识别语音并返回结果）
6、设备信息（获取网络状态）
7、地理位置
8、界面 *** 作
9、微信扫一扫
10、微信小店（服务号必须通过微信认证）
11、微信卡券 （微信认证）
12、微信支付（服务号必须通过微信认证）
官方参考文档
步骤一：绑定域名
先登录微信公众平台进入 公众号设置 的 功能设置 里填写 JS接口安全域名 。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持>
整理一下通过h5做微信分享相关配置。
登录微信公众号， 获取AppID ， 配置白名单 ，然后 配置JS接口安全域名 。
登录公众号后，左侧菜单栏选择：开发 => 基本配置，直接复制开发者ID(AppID)即可：
注意使用公网IP
左侧菜单栏选择：设置 => 公众号设置：
网页授权主要是获取微信openId使用，如果只是用分享 *** 作，本步可以略过。
网页授权介绍
大致步骤是：
在配置完前面AppId、白名单及安全域名后，开始处理网页授权。
网页授权这一块儿内容主要是后端需要处理的内容较多，前端还是很简单的，仅需要跳入微信链接即可。为什么要走这一步呢因为有些 *** 作，例如微信支付、播放微信录音、获取微信地址、微信卡券、商品、小店等等许多功能必须在微信浏览器汇总打开 *** 作才可以，因此需要跳入微信浏览器及微信链接来处理后续 *** 作。当配置后，链接便只有在微信浏览器中打开才会生效了，不然会提示：
链接如下：
> <!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=10, maximum-scale=10">
<link rel="stylesheet" href="css/fonts/font-awesomemincss">
<link rel="stylesheet" href="css/ui-boxcss">
<link rel="stylesheet" href="css/ui-basecss">
<link rel="stylesheet" href="css/ui-colorcss">
<link rel="stylesheet" href="css/appcaniconcss">
<link rel="stylesheet" href="css/appcancontrolcss">
</head>
<body class="um-vp " ontouchstart>
<div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
<!--header开始-->
<div id="header" class="uh bc-text-head ub bc-head">
<div class="nav-btn" id="nav-left">
<div class="fa fa-angle-left fa-2x"></div>
</div>
<h1 class="ut ub-f1 ulev-3 ut-s tx-c"></h1>
<div class="nav-btn nav-bt" id="nav-right"></div>
</div>
<!--header结束-->
<!--content开始-->
<div id="content" class="ub-f1 tx-l">
<input type="hidden" name="hdid" id="hdid" />
活动名称：<span id="spnhdmc"></span><br />
活动内容：<span id="spnhdnr"></span><br />
活动时间：<span id="spnhdsj"></span><br />
组织单位：<span id="spnhddw"></span><br />
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a1" id="btnintiactive">登记提交</div>
</div>
<!--content结束-->
</div>
<script src="js/appcanjs"></script>
<script src="js/appcancontroljs"></script>
</body>
<script>
windowuexOnload = function(){
uexScannercbOpen = ScannerSuccessCallBack;
uexScanneropen();
setData();
}
function setData() {
var jsonData = '{"lineImg":"res://linepng","pickBgImg":"res://pick_bgpng","tipLabel":"对准二维码/条形码,即可自动扫描","title":"扫一下"}';
uexScannersetJsonData(jsonData);
}
function ScannerSuccessCallBack(opCode, dataType, data) {
var obj = eval('('+data+')');
//var jsdata = (new Function("return " + objcode))();
var jsonitem = eval('('+objcode+')');
$('#hdid')val(jsonitemhdid);
$('#spnhdmc')html(jsonitemhdmc);
$('#spnhdnr')html(jsonitemhdnr);
$('#spnhdsj')html(jsonitemhdsj);
$('#spnhddw')html(jsonitemhddw);
}
/
appcanready(function(opCode, dataType, data) {
uexScannercbOpen = function () {
var obj = eval('('+data+')');
//var jsdata = (new Function("return " + objcode))();
var jsonitem = eval('('+objcode+')');
$('#hdid')val(jsonitemhdid);
$('#spnhdmc')html(jsonitemhdmc);
$('#spnhdnr')html(jsonitemhdnr);
$('#spnhdsj')html(jsonitemhdsj);
$('#spnhddw')html(jsonitemhddw);
}
uexScanneropen();
var jsonData = '{"lineImg":"res://linepng","pickBgImg":"res://pick_bgpng","tipLabel":"对准二维码/条形码,即可自动扫描","title":"扫一下"}';
uexScannersetJsonData(jsonData);
})
/
</script>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）