安装
安装部分就很简单了,直接官网安装 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:///,可以直接打开页面,那说明你已经成功了
其他问题
- 不支持location.href的跳转,如果需要跳转请使用路由方式.
HBuilder打包操作
*如果之前的操作都完成了,那么下面就正式进入打包HBuilder的环节,最重要的部分
新建移动APP
image.png
image.png
所生成的文件
image.png
讲打包好的VUE文件放入此项目目录下,其实我们只是需要manifest.json和unpackage这两个文件,其他都删掉
开始打包 => 打原生安装包
image.png
image.png
到了后面就是一些没有什么用的东西了,也不太重要,可以忽略
需要说明的是,在新版本的HBuilder是内置了扫描二维码的模块.因此不需要再去添加了
打包完成后下载此apk,然后下载到手机进行查看.
这个打包好APP应该是使用了手机系统的浏览器,如果你的项目有问题,需要你自己看看你访问你的打包好的VUE项目是否能在手机打开?(可以自己开一个静态服务器测试一下,如果也是白屏,那么说明你的项目有一些兼容性问题,非打包的问题)
