项目中H5用到的扫码功能

项目中H5用到的扫码功能：特此记录

不算原创，csdn有很多大牛也有相似或者更全面的说法，

运用 MUI 技术 实现扫码功能：

1、在 mainjs 中引入 mui

2、在首页扫码图标中添加扫码点击事件 触发路由跳转

3、扫码页面的代码，方便下次使用就直接粘出来了，有需要的自己搬，根据需求做更改

<template>

    <!-- 进入扫码页面 -->

    <div class="msgbox">

    <div class="common-header">

      <van-nav-bar title="扫一扫" left-arrow  @click-left="back"/>

    </div>

        <div id="code" style="margin-top:50px">

            <div style="width:14rem;height:14rem; background-color: #fff; margin: 15% auto 5%; text-align: center"></div>

            <p class="tip" style="text-align: center">...载入中...</p>

        </div>

    </div>

</template>

<script>

    export default {

        data() {

            return {

                scan: ""

            }

        },

        mounted () {

            const self = this 

            if (window.plus) {

                self.plusReady()

            } else {

                document.addEventListener('plusready', self.plusReady, false);

            }

            document.addEventListener('DOMContentLoaded', function() {

                alert('DOMLoaded')

                self.domready = true;

                self.plusReady()

            }, false)

      setTimeout(function () {

        self.sweep() // 扫码函数

      }, 1000)

        },

    beforeDestroy () {

      const self = this

      self.scan.close()

    },

        methods: {

            //   点击返回并关闭

            back () {

        // const self = this

        // self.scan.close()

        this.$nextTick(() => {

          this.$router.back()

        })

            },

            plusReady() {

                const self = this

                // 获取窗口

                self.scan = new plus.barcode.Barcode('code')

                self.scan.onmarked = self.onmarked

                // console.log(self.scan)

            },

            sweep() {

                const self = this

                self.scan.start();

            },

            onmarked(type, result) {

                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, '')

        this.$toast(result)

                if (result.indexOf('http://') == 0 || result.indexOf('https://') == 0) {

                    plus.nativeUI.confirm("二维码类型：" + type + "\n扫描结果：" + result, function(i) {

                        if (i.index == 0) {

                            var urlStr = encodeURI(result) // 获取跳转地址

                            plus.runtime.openURL(urlStr) // 确保（）无中文才能打开扫码页面

                        } else {

                            self.back(); //返回上个页面  

                        }

                    }, '', ['打开', '取消']);

                } else {

                    self.back(); //返回上个页面  

                    plus.nativeUI.alert("二维码类型：" + type + "\n扫描结果：" + result)

                }

            }

        },

    }

</script>