安裝
安裝部分就很簡(jiǎn)單了,直接官網(wǎng)安裝 http://www.dcloud.io/
代碼部分
index.html
// index.html
// 擴(kuò)展API是否準(zhǔn)備好澈吨，如果沒(méi)有則監(jiān)聽(tīng)“plusready"事件
if (window.plus) {
plusReady();
// alert(window.plus)
} else {
document.addEventListener("plusready", plusReady, false);
}
// 擴(kuò)展API準(zhǔn)備完成后要執(zhí)行的操作
function plusReady() {
var ws = plus.webview.currentWebview(); //pw回車可輸出plus.webview
// ... code
// alert('這是ready')
// alert(window.plus)
}
這是要看你使用HBuilder是否打包好,你可以打包好后alert一下,看看這個(gè)SDK有么有被引入
掃碼
這部分我進(jìn)行了組件封裝,如果你初次使用的話,你可以寫(xiě)在你所使用的組件中
// 主要代碼
<template>
<div class="scan">
<div id="bcid">
</div>
<footer>
<button @click="startRecognize">1.創(chuàng)建控件</button>
<button @click="startScan">2.開(kāi)始掃描</button>
<button @click="cancelScan">3.結(jié)束掃描</button>
<button @click="closeScan">4.關(guān)閉控件</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: {
// 創(chuàng)建掃描控件
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
}
},
// 開(kāi)始掃描
startScan() {
if (!window.plus) return
scan.start()
},
// 關(guān)閉掃描
cancelScan() {
if (!window.plus) return
scan.cancel()
},
// 關(guān)閉條碼識(shí)別控件
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監(jiān)聽(tīng)來(lái)自動(dòng)調(diào)用了搜碼操作,當(dāng)然,你也可以進(jìn)入頁(yè)面的時(shí)候自己去使用按鈕打開(kāi)掃碼.步驟是創(chuàng)建掃描控件,掃碼操作
配置
由于你所打包后的文件就應(yīng)該是一個(gè)靜態(tài)頁(yè)面,是可以直接在file:///直接打開(kāi)的.因此要配置一下build
打開(kāi)你的配置文件
// config => index.js 修改為 ./,注意,是build下
注意: 路由配置不要去掉hash,不然你打包不會(huì)還是沒(méi)有頁(yè)面的
mode: 'history' // 一定把這個(gè)注釋掉
這步完成后就可以進(jìn)行VUE打包操作了
npm run build
如果你打包后的文件在沒(méi)有服務(wù)器的情況下直接打開(kāi)file:///,可以直接打開(kāi)頁(yè)面,那說(shuō)明你已經(jīng)成功了
其他問(wèn)題
- 不支持location.href的跳轉(zhuǎn),如果需要跳轉(zhuǎn)請(qǐng)使用路由方式.
HBuilder打包操作
*如果之前的操作都完成了,那么下面就正式進(jìn)入打包HBuilder的環(huán)節(jié),最重要的部分
新建移動(dòng)APP
所生成的文件
講打包好的VUE文件放入此項(xiàng)目目錄下,其實(shí)我們只是需要manifest.json和unpackage這兩個(gè)文件,其他都刪掉
開(kāi)始打包 => 打原生安裝包
到了后面就是一些沒(méi)有什么用的東西了,也不太重要,可以忽略
需要說(shuō)明的是,在新版本的HBuilder是內(nèi)置了掃描二維碼的模塊.因此不需要再去添加了
打包完成后下載此apk,然后下載到手機(jī)進(jìn)行查看.
這個(gè)打包好APP應(yīng)該是使用了手機(jī)系統(tǒng)的瀏覽器,如果你的項(xiàng)目有問(wèn)題,需要你自己看看你訪問(wèn)你的打包好的VUE項(xiàng)目是否能在手機(jī)打開(kāi)?(可以自己開(kāi)一個(gè)靜態(tài)服務(wù)器測(cè)試一下,如果也是白屏,那么說(shuō)明你的項(xiàng)目有一些兼容性問(wèn)題,非打包的問(wèn)題)
