vue 开发webapp 进行扫一扫功能

项目启动

npm install

npm start

npm run build//打包

将打包好的dist文件放到hbuilder中转换成app

 

< template >

< div >

   < topbar title= "扫码" >

     < router-link to= "/home" slot= "left" @click.native=' cancelScan' class= "mui-action-back mui-icon mui-icon-left-nav mui-pull-left" > router-link >

   topbar >

< div class= "mui-content" >

< div class= "scan" >

< div id= "bcid" >

< div class= "content" > div >

< p class= "tip" >...载入中... p >

div >

< footer >

< button @click=" startScan" v-show=" isShow" >点击扫描 button >

< button @click=" cancelScan" >取消 button >

footer >

div >

div >

div >

template >

< script type= 'text/ecmascript-6' >

let scan = null;

//点手机虚拟返回键

document. addEventListener( "plusready", function() {

// 注册返回按键事件

plus. key. addEventListener( 'backbutton', function() {

// 事件处理

scan. close(); //关闭条码识别控件

window. history. back();

}, false);

});

   export default{

data(){

return{

codeUrl: '',

isShow: true

}

},

components:{

topbar

},

mounted () {

this. startScan()//进入页面就调取扫一扫

},

created(){

this. startRecognize();

this. startScan();

},

methods: {

//创建扫描控件

startRecognize() {

let that = this;

if (! window. plus) return;

that. isShow= false;

// 创建条码扫描识别控件

scan = new plus. barcode. Barcode( 'bcid');

// 条码识别成功

scan. onmarked = onmarked;

function onmarked( type, result, file) {

switch ( type) {

case plus. barcode. QR:

type = 'QR';

break;

case plus. barcode. EAN13:

type = 'EAN13';

break;

case plus. barcode. EAN8:

type = 'EAN8';

break;

default:

type = '其它' + type;

break;

}

result = result. replace( /\n/ g, '');

that. codeUrl = result; //扫描后返回值

alert( result);

scan. cancel(); //关闭扫描

scan. close(); //关闭条码识别控件

if( that. codeUrl){

that. isShow= true

}

}

},

//开始扫描

startScan() {

if (! window. plus) return;

this. startRecognize() //创建控件

scan. start();

},

cancelScan(){

this. isShow= true;

scan. cancel(); //关闭扫描

scan. close(); //关闭条码识别控件

}

}

  };

script >

< style scoped >

.mui-content{

padding: 44px 0 60px 0; /*px*/

box-sizing: border-box;

margin-top: 60px; /*px*/

}

.scan {

height: 100%;

}

.scan #bcid {

width: 100%;

position: absolute;

left: 0;

right: 0;

top: 50px; /*px*/

bottom: 3rem;

text-align: center;

color: #fff;

background: #ccc;

}

.scan footer {

position: absolute;

left: 50%;

transform: translate( -50%);

bottom: 1rem;

width: 100%;

height: 1rem;

/*line-height: 2rem;*/

z-index: 2;

display: flex;

justify-content: center;

}

.scan footer button{

width: 45%;

font-size: 30px; /*px*/

}

.clickBtn,.cancelBtn{

margin-top: 20px; /*px*/

width: 150px; /*px*/

height: 60px; /*px*/

text-align: center;;

}

.cancelBtn{

margin-left: 20px; /*px*/

}

style >