stf二次开发之添加前端扫码并远程打开浏览器访问网页

最新推荐文章于 2021-06-15 14:48:20 发布

harrain

最新推荐文章于 2021-06-15 14:48:20 发布

阅读量1.1k

点赞数 1

分类专栏： STF 文章标签： stf

本文链接：https://blog.csdn.net/harrain/article/details/107297325

版权

STF 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

需求

在前端网页上传二维码图片，js解码后解析出网页链接
控制远程手机启动浏览器访问该网页链接

分析

js解码库确定使用reqrcodejs，使用简单
打开浏览器可以参考stf源码中的browseropen

前端部分

页面UI
如图所示，在手机控制工具栏一侧增加扫码标签页。点击呈现扫码页。

选择二维码文件上传
点击解析二维码并打开手机浏览器访问网页链接按钮，就可解析出二维码包含的链接并在手机浏览器打开。

stf 的前端是用pug(原jade)模板，angularjs 编写, webpack打包构建的。

angularjs的语法可以从相关网站获取。

说下新增文件先：
res/app下是前端部分。
在res/app/control-panes下新建qrscan目录及下一级文件：

qrscan目录
	1  index.js      //载入依赖，加载页面pug模板，设置逻辑控制器
	2  qrscan.pug //页面
	3  qrscan.css
	4  qrscan-controller.js //控制器
	5  qrscan-spec.js       //

当在control-panes添加一个新的模块时，要添加到control-panes依赖中,否则不能被识别到。

//res/app/control-panes/index.js
module.exports = angular.module('control-panes', [
......
require('./qrscan').name
])

UI 图上新增的扫码标签页，在control-panes-controller里添加

//res/app/control-panes/control-pane-controller.js
module.exports =
  function ControlPanesController(......) {
	var sharedTabs = [
	......
	//添加扫码标签页
      {
        title: gettext('Scan'),
        templateUrl: 'control-panes/qrscan/qrscan.pug', //指定渲染的页面
        filters: ['native', 'web']
      }
]
}

在qrscan/index.js里扫码模块的载入依赖，加载页面pug模板，设置逻辑控制器。

//res/app/control-pane/qrscan/index.js
require('./qrscan.css')
require('ng-file-upload') //上传文件所需模块

module.exports = angular.module('stf.qrscan', [
  'angularFileUpload', //上传文件所需依赖
  require('stf/settings').name,
  require('stf/storage').name,
  require('stf/upload').name,
  require('stf/common-ui').name,
  require('stf/image-onload').name,
  require('gettext').name
])
  .run(['$templateCache', function($templateCache) {
    $templateCache.put(
      'control-panes/qrscan/qrscan.pug'
      , require('./qrscan.pug') //渲染页面设置
    )
  }])
  .controller('QrscanCtrl', require('./qrscan-controller')) //QrscanCtrl 为 qrscan-controller的别名。 设置控制器

qrscan.pug 代码

.fill-height(ng-controller="QrscanCtrl").stf-qrscan

  .widget-content.padded
      .drop-area(ng-file-drop='dropFile($files)', ng-file-drag-over-class='dragover').file-input.btn-file
        input(type='file', ng-file-select='uploadQRcode($files)',  ng-model="data.file")#img-input
        i.fa.fa-2x.fa-download.drop-area-icon
        .drop-area-text(translate) Drop Qrcode to upload

  div.picture
      img(ng-src='{{ imgSrc }}').qrscan-image.drop-area

  div(id="tribtn").widget-content.padded.singleline
    button.btn.btn-sm.btn-primary-outline.btn_menu(onclick='openBrowser()'
      title='{{"scan_qrcode"|translate}}')
      i.fa.fa-camera
      span(translate) scan_qrcode

    .clearfix

比较简单，分为四个部分：

ng-controller =“QrscanCtrl” //绑定qrscan-controller
选择图片文件上传
预览图片
button区

可能一开始对pug模板这种类型，写着不熟悉，可以先写好html，再根据Pug的语法再写一遍。

这里提一个 命令行编译pug，编译成html

安装 npm install -g pug-cli
执行 pug index.pug ,输出 "rendered index.html"这就表示编译成功，我们去文件夹中看，就会发现多了一个index.html文件
实时编译 pug -P -w index.pug , 实时编译就是当我们修改index.pug时，index.html也会被改变.

说下这个页面的交互事件：

input(type=‘file’, ng-file-select=‘uploadQRcode($files)’

input选择文件后，触发ng-file-select 标注的 uploadQRcode方法（调用qrscan-controller.js里的($scope.uploadQRcode方法）

$files是文件形参.

img(ng-src=’{{ imgSrc }}’)
接受qrscan-controller.js的$scope.imgSrc变量, 使用imgSrc的值渲染预览图片
οnclick=‘openBrowser()’ ，οnclick=‘pasteToClipboard()’
而这两个button ，调用的是纯Js函数。

上传文件

qrscan-controller.js代码

var Promise = require('bluebird')
Promise.longStackTraces()

module.exports = function QrscanCtrl(
  $scope
  , $filter
  , StorageService
  , $http
  , $upload
) {

  $scope.mReader = new FileReader()//处理二维码文件对象
  $scope.mFiles //保存input标签传入的文件对象

$scope.uploadQRcode = function($file){
	if ($files.length) {
      $scope.mFiles = $files
      /**
       * 处理文件，预览二维码图片
       */
      $scope.mReader.readAsDataURL($files[0])//传入File对象，Blob
      $scope.mReader.onloadend = function(ev) {
        $scope.$apply(function() {
          // $scope.thumb = ev.target.result;
          $scope.imgSrc = ev.target.result//接收base64
        })
      }
      return true
    }
}

$scope.openBrowser = function(url){...}

当用户拖动或选择文件上传时，html的input标签的ng-file-select 标注的 uploadQRcode方法被触发，也就是$scope.uploadQRcode函数。

上述函数先判断参数$files数组长度，通过FileReader (scope.mReader)读取文件数据，然后在onLoadend函数里接受base64赋值给imgSrc, 直接反映在qrscan.pug里的img标签，这样完成对上传图片的预览。

还有一点是保存$files 给 $scope.mFIles, 供后面解码用。

解码

index.pug是stf首页主页面 res/app/views/index.pug

script(src='static/app/views/js/reqrcode.js') #引入reqrcodejs
script.
function scanQrcode(files) {
        //根据文件生成url，供reqrcodejs库的decode方法解析
        var getObjectURL = function(file) {
          var url = null;
          if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
          }
          else if (window.URL != undefined) { // mozilla(firefox)
            try {
              url = window.URL.createObjectURL(file);
            } catch (e) {
            }
          }
          else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
          }
          return url;
        }

        if (files != null && files.length > 0) {
          qrcode.decode(getObjectURL(files[0]));//解析二维码
          return qrcode;
        }
        else {
          alert("请先上传二维码图片文件！")
          return null;
        }
      }

上面的代码：需将reqrcode.js源码文件放在res/app/views/js/下，然后script(src)引入（代码第一行）.然后如注释所示，使用qrcode api解析二维码，封装成scanQrcode函数，供下面的openBrowser函数调用。

//res/app/views/index.pug
function openBrowser() {
        var appElement = document.querySelector('[ng-controller=QrscanCtrl]');
        var $scope = angular.element(appElement).scope();//获取qrscan-controller的$scope
        var reqrcode = scanQrcode($scope.mFiles)
        if (reqrcode) {
          reqrcode.callback = function(imgMsg) {
            $scope.openBrowser(imgMsg);//通过$scope调取到openBrowser函数
          }
        }
      }

虽然在webstorm中， qrscan.pug里的 openBrowser 事件不能导航到index.pug里，但是不影响运行。

这个逻辑是:
1.qrscan.pug里的openBrowser点击事件调用 index.pug里的openBrowser js函数。

2.通过document.querySelector和angular.element分别获取到angular controller和scope,拿到$scope.mFiles二维码文件传给scanQrcode函数解码

3.解码后再通过scope调用到qrscan-controller.js里的$scope.openBrowser方法进行后续处理。

综上，完成html调js对二维码解码，然后再调到angular controller里的方法并传参。后面就是向后台发起请求。一系列过程。

写完前端，执行 gulp clean , gulp build ,这样 webpack构建，不然修改是不会生效的。
如果提示 gulp not found ，执行 npm install gulp -g 安装gulp.
然后执行stf local查看效果。

接着说下解码之后，拿到链接信息，如何打开手机浏览器访问，也就是$scope.openBrowser所做的事情。

$scope.openBrowser = function(url) {
    if (url.indexOf('http') != -1) {
      alert('网页链接解析成功，正在跳转浏览器...')
      return $scope.control.openBrowser(url, null)
    }
    else {
      alert('该二维码不是正确的链接，二维码文本为' + imgMsg)
    }
    }

关于scope.control 通过IDE查看能发现是继承的 control-panes-controller的scope.control. (angularjs 子scope能继承父scope)
在control-panes-controller89行，scope.control = ControlService.create(device, device.channel)
所以$scope.control.openBrowser，也就是 ControlService的openBrowser函数。
打开浏览器功能在控制面板的导航里有实现，所以在做这部分功能就可以借鉴导航 navigation-controller这部分。

后台

进入 control-service.js ，有这样代码

//res/app/components/stf/control/control-service.js
this.openBrowser = function(url, browser) {
      return sendTwoWay('browser.open', {
        url: url
      , browser: browser ? browser.id : null
      })
    }

继续追踪sendTwoWay，其实就是socket发送出去。
那发送出去的信息，哪里接收的呢？？
我们发现 browser.open 这样的标志，全局搜它，发现在lib/units/websocket/index.js里有处理.

//lib/units/websocket/index.js
.on('browser.open', function(channel, responseChannel, data) {
          joinChannel(responseChannel)
          push.send([
            channel
          , wireutil.transaction(
              responseChannel
            , new wire.BrowserOpenMessage(data)
            )
          ])
        })

这里又再次封装protobuf，将BrowserOpenMessage 结构体发出去。
同样，全局搜 BrowserOpenMessage。

找到 lib/units/device/plugins/browser.js

//lib/units/device/plugins/browser.js
router.on(wire.BrowserOpenMessage, function(channel, message) {
      message.url = ensureHttpProtocol(message.url)
      ......

      var reply = wireutil.reply(options.serial)
      adb.startActivity(options.serial, {
          action: 'android.intent.action.VIEW'
        , component: message.browser
        , data: message.url
        })
        .then(function() {
          push.send([
            channel
          , reply.okay()
          ])
        })
        .catch(function(err) {
          if (message.browser) {
            log.error(
              'Failed to open "%s" in "%s"'
            , message.url
            , message.browser
            , err.stack
            )
          }
          else {
            log.error('Failed to open "%s"', message.url, err.stack)
          }
          push.send([
            channel
          , reply.fail()
          ])
        })
    })

router接收到BrowserOpenMessage，解析出Message里的browser和url数据，通过adbkit startActivity传入action , browsername, url打开浏览器访问链接。

总结

文件脉络为 contro-pane/index.js - control-pane-controller.js - qrscan/index.js - qrscan.pug - index.pug - qrscan-controller.js - control-service.js - websocket/index.js - plugins/browser.js

过程走完了。完成上传二维码-预览-解码-打开浏览器。

最后提下

语言国际化

语言脚本路径： res/common/lang/translations/stf.zh_CN.json。

在里面直接元素即可。比如 “scan”:‘扫码’,“drop files to upload”:“拖动文件以上传”,“openbrowser”:“打开浏览器”

修改后，一定要 gulp build 才会生效。

harrain

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
stf二次开发之添加前端扫码并远程打开浏览器访问网页

需求在前端网页上传二维码图片，js解码后解析出网页链接控制远程手机启动浏览器访问该网页链接分析js解码库确定使用reqrcodejs，使用简单打开浏览器可以参考stf源码中的browseropen前端部分如图所示，在手机控制工具栏一侧增加扫码标签页。点击呈现扫码页。选择二维码文件上传点击解析二维码并打开手机浏览器访问网页链接按钮，就可解析出二维码包含的链接并在手机浏览器打开。stf 的前端是用pug(原jade)模板，angularjs 编写, webpack打包构建的
复制链接

扫一扫