在网页实现扫码输入数据
在网页实现扫描二维码或条形码输入数据,需要借助JS-SDK。
关于公众号JS-SDK的说明参考:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
可以看到JS-SDK的内容非常多,对于Foxtable用户而言,最有用的莫过于在网页实现扫描二维码或条形码输入 (或提交)数据的功能了,下面我们就以此功能为例,介绍一下JS-SDK的使用方法。
本节的任务是设计一个下图所示的页面(只能在微信中浏览此页面),点击“扫码输入”后,能调用微信扫码功能,对二维码或条形码进行扫描,并将扫描结果填入编号输入框:
提示:本节的例子只能在微信访问。
设计步骤
1、在微信管理后台设置JS安全域名,只能在该域名下调用JS-SDK,测试号可以使用IP,正式的公众号只能使用经过备案的域名 ;我们必须通过设置好的安全域名访问网页,才能调用JS-SDK。
2、新增一个自定义函数,函数名为"GetJsSignature",用于生成JS-SDK的授权签名,代码为:
Static
CreateTime As
Date
'记录最近一次生成Ticket 的时间
Static
Ticket As
String
'记录最近一次生成的Ticket
Dim
tp As
TimeSpan = Date.Now
- CreateTime
Dim
ul As
String =
"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type=jsapi"
If
tp.TotalSeconds
> 3600 Then
Dim hc
As New
HttpClient(CExp(ul,Functions.Execute("GetAccessToken")))
Dim ret
As String =
hc.GetData()
If ret =
"" Then
'如果失败,再尝试一次
hc.GetData()
End If
CreateTime =
Date.Now()
Dim jo
As JObject =
JObject.Parse(ret)
If jo("errcode")
= "0" Then
Ticket =
jo("ticket")
Else
MessageBox.show("获取jsapi_ticket,原因:"
& vbcrlf
& jo.ToString)
End
If
End
If
Dim
signature As
String = CExp("jsapi_ticket={0}&noncestr={1}×tamp={2}&url={3}",Ticket,args(0),args(1),args(2))
Return
Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(signature,
"SHA1").ToLower()
2、在d:\web\lib目录下新建一个文本文件jssdk.js,内容为:
wx.ready(function
() {
document.getElementById('scan').onclick
= function () {
wx.scanQRCode({
needResult: 1,
scanType: ['qrCode','barCode'],
success: function (res) {
document.getElementById('number').value
= res.resultStr;
}
});
};
});
wx.error(function (res) {
//alert(res.errMsg);
});
实际开发的时候,你要变化的只有红色的两处,scan为网页中扫码输入按钮的id,number为网页中产品编号输入框的id。
3、最后将HttpRequest事件代码设置为:
Select
Case e.Path
Case "test.htm",""
Dim
wb As New
weui
wb.AppendHTML("<script
src='https://res.wx.qq.com/open/js/jweixin-1.6.0.js'></script>",True)
'引入JS-SDK库
wb.AppendHTML("<script
src='./lib/jssdk.js'></script>")
'引入脚本文件
'在页面注入权限验证配置
Dim st
As New
Date(1970,1,1,8,0,0)
Dim appid
As String =
"wx8acdb7df5beb68fd"
'开发者ID
Dim
timestamp As
Integer = CInt((Date.Now
- st).TotalSeconds())
'时间戳
Dim noncestr
As String =
Rand.NextString(16)
'随机字符
Dim url
As String
= e.Request.URL.ToString
'当前页面地址
Dim
signature As
String =
Functions.Execute("GetJsSignature",
noncestr, timestamp,
url)
'生成权限验证签名
Dim cfg
As String =
"wx.config({appId:'{0}',timestamp:{1},nonceStr:'{2}',signature:'{3}',jsApiList:['scanQRCode']});"
wb.AppendHTML("<script>"
& CExp(cfg,appid,timestamp,noncestr,signature)
& "</script>",True)
'开始正常生成网页内容
wb.AddForm("","form1","test.htm")
With wb.AddInputGroup("form1","ipg1","产品输入")
.AddInput("product","产品","text")
With .AddInputCell("ic1")
.AddLabel("lbh","编号",0)
.AddInput("number","text",1)
.AddVcodeButton("scan","扫码输入",2)
'增加二维码扫描按钮,2表示显示在右边
End With
End
With
With
wb.AddButtonGroup("form1","btg1",True)
.Add("btn1",
"确定",
"submit")
End With
e.WriteString(wb.Build)
'生成网页
End
Select
至此,我们的网页扫码输入功能就算设置完成,可以看到JS-SDK的使用并不复杂。
如果你希望直接将扫码得到的结果发送到Foxtable进行处理,而不是填入输入框,可以参考:SendAjaxText
当然你也可以根须扫描结果合成新的页面地址访问之。