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

需求

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

分析

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

前端部分

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

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

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')</