本节主要讲解 H5+ API 扫码接口，移动端的小字与1px像素边框的处理。

# 页面布局

当前页面的布局沿用在上一节中提到的布局。为两部分：头部标题栏 + 滚动浏览区域。头部标题栏 fixed 固定，内容区用 scroll-view 组件撑开整个页面。

# cell组件

对于这种 cell 样式使用 flex 布局可以快速解决左（图标）+ 右（cell内容）的排版。这种存在重复性的页面可以考虑使用组件去复用，在这里我使用了uni-list-item 组件。

<uni-list>
    <uni-list-item title="口袋彩铃" thumb="/static/image/account/a_16.png" size='mini'/>
    <uni-list-item title="我的订单" thumb="/static/image/account/a_19.png" size='mini' border0/>
    <uni-list-item title="创作者中心" thumb="/static/image/account/a_09.png" size='mini' border0 class="mt16"/>
    <!-- more items -->
</uni-list>
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
export default {
    components: {
        uniList,
        uniListItem,
    },
    data() {
        return {}
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

对于拿来即用的组件，可能还会与自己实际业务上的设计还有一定差距，这个时候就要自己动手扩展组件属性。根据cell高度需求我在这添加了属性 size='mini' border0，这样 uni-list-item 子组件对着两个属性进行判定 class 名字，样式根据类名进行样式处理：

<!-- uni-list-item.vue -->
<view class="uni-list-item__container" :class="[{'border': border0}, size]">
    <!-- 内容 -->
</view>
props: {
    size: { // 缩略图尺寸
        type: String,
        default: ''
    },
    border0: { // 无边框
        type: Boolean,
        default: false
    },
}
.uni-list-item__container {
    &:before{
        position:absolute;
        content: '';
        right:0;
        bottom:0;
        width:600rpx;
        border-top: 1px solid #e6e6e6;
        transform: scaleY(0.5);
    }
    &.mini{
        padding: 30rpx 30rpx 30rpx 0;
        &:before{
            width:646rpx;
        }
    }
    &.border:before{
        border:0;  // 去掉边框
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

通过向 uni-list-item 子组件中传递属性 border0 ，进而控制不显示底部边框的显示隐藏。
通过向 uni-list-item 子组件中传递属性 size ，进而控制图片大小以及 cell 高度。

# 扫码功能开发

当前页面有个扫码的功能，我们可以使用 H5+ API 扫码接口，Barcode 模块可使得 Web 开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。这次只打算在 app 才可使用扫码，因此这一块功能需要条件编译处理一下。

创建扫码识别控件对象：

plus.barcode.create(id, filters, styles)

@前端进阶之旅: 代码已经复制到剪贴板

参数：

id: ( String ) 必选扫码识别控件的标识可用于通过plus.barcode.getBarcodeById()方法查找已经创建的扫码识别控件对象。
filters: ( Array[ Number ] ) 可选条码类型过滤器条码类型常量数组，默认情况支持QR、EAN13、EAN8类通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）。
styles: ( BarcodeStyles ) 可选扫码识别控件样式用于设置扫码控件在页面中显示的样式，如扫码框、扫码条的颜色等。

说明：

此方法创建扫码识别控件并不会显示在页面中，需要调用 plus.webview.Webview 窗口对象的 append 方法将其添加到 Webview 窗口中才能显示。注意：需要设置styles 参数的 top/left/width/height 属性指定扫码识别控件的位置及大小，否则可能无法正确显示。

栗子：

// 创建一个二维码（plus.barcode.QR）扫码框
var barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
    position: 'fixed',
    top: '64px',
    left: '0px',
    width: '100%',
    height: '100%',
});

// 扫码成功回调
barcode.onmarked = function (type, result) {
    console.log(type, result)
};

// 添加到当前 Webview
plus.webview.currentWebview().append(barcode);

// 打开扫码
barcode.start();

@前端进阶之旅: 代码已经复制到剪贴板

图片示例：

来尝试封装成单独一个组件，有助于管理。

<!-- components/scan/scan.vue -->
<template>
    <view></view>
</template>

<script>
    export default {
        data() {
            return {
                typeList: [ // 码类型 参考地址 https://www.dcloud.io/docs/api/zh_cn/barcode.html
                    plus.barcode.QR,
                    // plus.barcode.EAN13,
                    // plus.barcode.EAN8,
                    // plus.barcode.UPCA,
                    // plus.barcode.UPCE,
                    // plus.barcode.CODABAR,
                    // plus.barcode.CODE39,
                    // plus.barcode.CODE93,
                    // plus.barcode.CODE128,
                    // plus.barcode.ITF,
                ],
            };
        },
        methods: {
            open() {
                // 创建上层webview
                let pages = getCurrentPages();
                let currentWebview = pages[pages.length - 1].$getAppWebview();
                // 创建一个扫码框
                this.barcode = plus.barcode.create('barcode', this.typeList, {
                    position: 'fixed',  // fixed 固定在页面
                    top: '64px',
                    left: '0px',
                    width: '100%',
                    height: '100%',
                });
                // 扫码成功回调
                this.barcode.onmarked = this.onmarked;
                // 添加到当前 Webview
                currentWebview.append(this.barcode);
                // 打开扫码
                this.barcode.start();
            },
            // 关闭扫码
            close () {
                this.barcode.close();
            },
            // 扫码成功
            onmarked (type, result) {
                this.openStartRecognize(result)
                this.$emit('success', result);
                this.close()
            }
        }
    }
</script>
<style lang="scss"></style>

@前端进阶之旅: 代码已经复制到剪贴板

引用：

<!-- pages/account/index.vue -->
<scan ref="scan" @success="getScanCode"/>
// pages/account/index.vue
import scan from '@/components/scan/scan.vue'
export default {
    components: {
        scan
    },
    data () {
        return {}
    },
    methods: {
        // 打开扫描
        openScan () {
            this.$refs.scan.open()
            this.isShowScan = true
            // 隐藏底部 tabbar
            uni.hideTabBar({})
        },
        // 隐藏扫描
        closeScan () {
            this.$refs.scan.close()
            this.isShowScan = false
            uni.showTabBar({})
        },
        // 扫码成功
        getScanCode (val) {
            this.closeScan()
            uni.showToast({
                icon: 'none',
                title: '扫码成功',
            });

            // 业务代码...
        }
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

需要注意的是，底部导航栏会遮盖扫码识别控件，因此打开扫码的时候隐藏底部导航栏，使用 Uniapp 的 API 操作导航栏 uni.hideTabBar({})。

设置扫码识别控件在扫码时可以开启摄像头的闪光灯 obj.setFlash(true);

# 1px边框和 10px字体

实际编译后：

# 页面布局

# cell组件

# 扫码功能开发

# 1px边框 和 10px字体

# 1px边框和 10px字体

实战7_导航五 帐号页面开发|uniapp专题

实战7_导航五 帐号页面开发|uniapp专题

实战7_导航五帐号页面开发|uniapp专题

实战7_导航五帐号页面开发|uniapp专题