qr(二维码)

首次使用请执行weexplus plugin add https://github.com/farwolf2010/qr

一个相机组件,只用来识别二维码,条形码,和module下的qr不一样,这个方便自定义扫描的界面,更为灵活

api

  1. /** 开始扫描
  2. scan(callback)
  3. /** 停止扫描
  4. stop()

demo

  1. <template>
  2. <div>
  3. <text>{{text}}</text>
  4. <qr ref="qr" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0">
  5. </qr>
  6. <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: transparent;">
  7. <!--<button @click="start"></button>-->
  8. <!--<button @click="stop"></button>-->
  9. <div style="width: 750px;flex: 1;background-color: rgba(0,0,0,0.3)"></div>
  10. <div style="height: 450px;flex-direction: row">
  11. <div style="width: 150px;background-color: rgba(0,0,0,0.3)">
  12. </div>
  13. <div style="flex: 1"></div>
  14. <div style="width: 150px;background-color: rgba(0,0,0,0.3)">
  15. </div>
  16. </div>
  17. <div style="width: 750px;flex:1;background-color: rgba(0,0,0,0.3)"></div>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. export default{
  23. components: { },
  24. data(){
  25. return {
  26. text:''
  27. }
  28. },
  29. props: {},
  30. methods: {
  31. start(){
  32. },
  33. stop(){
  34. },
  35. onLoad(p){
  36. }
  37. },
  38. mounted(){
  39. this.$refs.qr.scan((res)=>{
  40. this.text=res.res
  41. this.toast(this.text)
  42. })
  43. },
  44. created(){
  45. }
  46. }
  47. </script>
  48. <style scoped>
  49. </style>