微信小程序自定義掃碼功能界面的實現(xiàn)代碼
更新時間：2020年07月02日 10:19:59 作者：會飛的小螞蚱
這篇文章主要介紹了微信小程序自定義掃碼功能界面的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
小程序的一個掃碼頁面，掃碼界面一直開著，同時可以處理其他功能，如下：
由于直接調(diào)用微信的scanCode，無法自定義界面，所以只能使用原生組件camera，完成這個功能，關于掃描框的四個角的圖片，就自己畫一下吧，中間的移動橫線，使用了小程序的動畫功能，在原生camera組件上，覆蓋需要用到cover-view和cover-image，同時加入了提示音
/**scan.wxss**/
.scan-view {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #B9BEC4;
position: fixed;
align-items: center;
justify-content: space-around;
}
.scan-border {
width: 94%;
height: 94%;
border: 6rpx solid #08FDFE;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.scan-camera {
width: 500rpx;
height: 500rpx;
border-radius: 6rpx;
margin: 30rpx;
}
.cover-corner {
width: 80rpx;
height: 80rpx;
position: absolute;
}
.cover-left-top {
left: 0;
top: 0;
}
.cover-right-top {
right: 0;
top: 0;
}
.cover-left-bottom {
left: 0;
bottom: 0;
}
.cover-right-bottom {
right: 0;
bottom: 0;
}
.scan-animation {
position: absolute;
top: -10rpx;
left: 10rpx;
width: 480rpx;
height: 8rpx;
background-color: #08FDFE;
border-radius: 50%;
}
<!--scan.wxml-->
<view class="scan-view">
<view class='scan-border'>
<camera class='scan-camera' mode="scanCode" binderror="cameraError" bindscancode='scancode' frame-size='large'>
<cover-image class='cover-corner cover-left-top' src='/images/left-top.png'></cover-image>
<cover-image class='cover-corner cover-right-top' src='/images/right-top.png'></cover-image>
<cover-image class='cover-corner cover-left-bottom' src='/images/left-bottom.png'></cover-image>
<cover-image class='cover-corner cover-right-bottom' src='/images/right-bottom.png'></cover-image>
<cover-view class='scan-animation' animation="{{animation}}"></cover-view>
</camera>
<!-- 這里可以處理其他內(nèi)容 -->
</view>
</view>
// scan.js
// 移動動畫
let animation = wx.createAnimation({});
// 提示音
let innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.src = '/images/beep.mp3'
Page({
data: {
},
onLoad: function () {
},
onShow(){
this.donghua()
},
donghua(){
var that = this;
// 控制向上還是向下移動
let m = true
setInterval(function () {
if (m) {
animation.translateY(250).step({ duration: 3000 })
m = !m;
} else {
animation.translateY(-10).step({ duration: 3000 })
m = !m;
}
that.setData({
animation: animation.export()
})
}.bind(this), 3000)
},
scancode(e){
// 提示音
innerAudioContext.play()
// 校驗掃描結果，并處理
let res = e.detail.result
}
})
總結
到此這篇關于微信小程序自定義掃碼功能界面的實現(xiàn)代碼的文章就介紹到這了,更多相關微信小程序自定義掃碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
下面小編就為大家?guī)硪黄狫S判斷日期格式是否合法的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了TS中最常見的聲明合并：接口合并,TS中的聲明合并，指的就是編譯器會針對同名的聲明合并為一個聲明,合并后的聲明會同時擁有原先兩個或多個聲明的特性,接口的合并也是一樣，它會將雙方的成員放到一個同名的接口里，更多詳細內(nèi)容請參考下面文章內(nèi)容2021-12-12
JavaScript ECMA-262-3 深入解析（二）：變量對象實例詳解
這篇文章主要介紹了JavaScript ECMA-262-3變量對象,結合實例形式詳細分析了JavaScript ECMA變量對象相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法
這篇文章為大家分享了解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法，感興趣或者是遇到這種問題的朋友可以參考這篇文章2015-12-12
JavaScript 中實現(xiàn) use strict的方法及優(yōu)勢
本教程將討論JavaScript中的use strict特性,在這里,我們將通過不同的示例了解如何在JavaScript代碼語句中創(chuàng)建和執(zhí)行use strict關鍵字,需要的朋友可以參考下2023-09-09
下面小編就為大家?guī)硪黄猨s實現(xiàn)股票實時刷新數(shù)據(jù)案例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
大家在使用Dreamweaver中的時間線功能或以做出很有趣的動畫效果，Dreamweaver會自動為用戶生成特定的程序代碼，大家有沒有想過動畫的實現(xiàn)原理呢？2013-07-07
這篇文章主要給大家介紹了關于Stream和Buffer相互轉(zhuǎn)換的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧。2017-07-07
這篇文章主要為大家詳細介紹了JavaScript自定義鼠標右鍵菜單欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本篇文章主要介紹了JS解決position:sticky的兼容性問題的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10