在网页实现扫码输入数据

在网页实现扫描二维码或条形码输入数据,需要借助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}&timestamp={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

当然你也可以根须扫描结果合成新的页面地址访问之。


本页地址:http://www.foxtable.com/mobilehelp/topics/0247.htm