安装

安装部分就很简单了,直接官网安装 http://www.dcloud.io/

image.png

代码部分

index.html

image.png

// index.html 
// 扩展API是否准备好，如果没有则监听“plusready"事件
if (window.plus) {
  plusReady();
  // alert(window.plus)
} else {
  document.addEventListener("plusready", plusReady, false);
}
// 扩展API准备完成后要执行的操作
function plusReady() {
  var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview
  // ... code
  // alert('这是ready')
  // alert(window.plus)
}

这是要看你使用HBuilder是否打包好,你可以打包好后alert一下,看看这个SDK有么有被引入

扫码

这部分我进行了组件封装,如果你初次使用的话,你可以写在你所使用的组件中

// 主要代码
<template>
  <div class="scan">
    <div id="bcid">
    </div>
    <footer>
      <button @click="startRecognize">1.创建控件</button>
      <button @click="startScan">2.开始扫描</button>
      <button @click="cancelScan">3.结束扫描</button>
      <button @click="closeScan">4.关闭控件</button>
    </footer>
  </div>
</template>

<script type='text/ecmascript-6'>
import Title from 'component/Base/Title/Title'
let scan = null

export default {
  props: {
    initStart: {
      type: Boolean
    }
  },
  data() {
    return {
      codeUrl: ''
    }
  },
  methods: {
    // 创建扫描控件
    startRecognize() {
      let that = this
      if (!window.plus) return
      // eslint-disable-next-line
      scan = new plus.barcode.Barcode('bcid')
      scan.onmarked = onmarked

      function onmarked(type, result, file) {
        switch (type) {
          // eslint-disable-next-line
          case plus.barcode.QR:
            type = 'QR'
            break
          // eslint-disable-next-line
          case plus.barcode.EAN13:
            type = 'EAN13'
            break
          // eslint-disable-next-line
          case plus.barcode.EAN8:
            type = 'EAN8'
            break
          default:
            type = '其它' + type
            break
        }
        // 获得code
        result = result.replace(/\n/g, '')
        that.codeUrl = result
      }
    },
    // 开始扫描
    startScan() {
      if (!window.plus) return
      scan.start()
    },
    // 关闭扫描
    cancelScan() {
      if (!window.plus) return
      scan.cancel()
    },
    // 关闭条码识别控件
    closeScan() {
      if (!window.plus) return
      scan.close()
    }
  }
}
<style lang="less">
  .scan {
    height: 100%;
    #bcid {
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom:3rem;
      text-align: center;
      color: #fff;
      background: #ccc;
    }
    footer {
      position: absolute;
      left: 0;
      bottom: 1rem;
      height: 2rem;
      line-height: 2rem;
      z-index: 2;
    }
  }
</style>

我是使用了watch监听来自动调用了搜码操作,当然,你也可以进入页面的时候自己去使用按钮打开扫码.步骤是创建扫描控件,扫码操作

配置

由于你所打包后的文件就应该是一个静态页面,是可以直接在file:///直接打开的.因此要配置一下build

打开你的配置文件
// config => index.js 修改为 ./,注意,是build下

image.png
注意: 路由配置不要去掉hash,不然你打包不会还是没有页面的

mode: 'history' // 一定把这个注释掉

这步完成后就可以进行VUE打包操作了

npm run build

如果你打包后的文件在没有服务器的情况下直接打开file:///,可以直接打开页面,那说明你已经成功了

其他问题

1. 不支持location.href的跳转,如果需要跳转请使用路由方式.

HBuilder打包操作

*如果之前的操作都完成了,那么下面就正式进入打包HBuilder的环节,最重要的部分

新建移动APP

image.png
image.png
所生成的文件
image.png
讲打包好的VUE文件放入此项目目录下,其实我们只是需要manifest.json和unpackage这两个文件,其他都删掉

开始打包 => 打原生安装包

image.png image.png

到了后面就是一些没有什么用的东西了,也不太重要,可以忽略
需要说明的是,在新版本的HBuilder是内置了扫描二维码的模块.因此不需要再去添加了

打包完成后下载此apk,然后下载到手机进行查看.
这个打包好APP应该是使用了手机系统的浏览器,如果你的项目有问题,需要你自己看看你访问你的打包好的VUE项目是否能在手机打开?(可以自己开一个静态服务器测试一下,如果也是白屏,那么说明你的项目有一些兼容性问题,非打包的问题)