08_账号页面的开发.md · zhangrenyang/zhufeng_uni_music2104

本节讲解的知识点是 H5+API 扫码，移动端的小字和 1px 像素边框的处理。

### 页面布局

本节页面仍是沿用上一节提到的布局：头部标题栏+滚动浏览区域。头部标题栏 fixed 固定，内容区用 scroll-view 组件撑开整个页面。
相关代码：

```js
<view>
    <uni-nav-bar fixed :status-bar="true">
        头部内容
    </uni-nav-bar>
    <scroll-view scroll-y="true" class="page-content" @scroll="scroll" :scroll-top="scrollTop">
        滚动区域内容
    </scroll-view>
</view>

data() {
    return {
        scrollTop: 0
    };
},
methods: {
    // 滚动到顶部标题变换
    scroll (e) {
        let scrollTop = e.detail.scrollTop
        if (scrollTop < 5) {
            this.title = ''
            this.scrollTop = 0
        } else {
            this.title = '账号'
        }
    },
}
```

这里有区别是：页面标题栏标题当滚动区域滚动到一定位置时隐藏，由 `scroll()`  处理监听滚动，当滚动位置达到一定位置时，scroll 页面到滚到顶部并清空标题。使用  `scrollTop < 5`  而不是  `scrollTop == 0`  的原因是用户操作触发的滚动值未必会精确到 0，所以这里对值进行了取舍，临近顶部的时候，取值 `scrollTop = 0` 。如果运动点达到某一个取值的时候，就让这个点达到理想值下。

![21_app](https://images.gitee.com/uploads/images/2021/0509/171240_175a248f_1720749.png "21_app.png")

### cell 组件

对于这种 cell 样式使用 flex 布局可以快速解决左（图标）+ 右（cell 内容）的排版。这种存在重复性的页面可以考虑使用组件去复用，在这里我使用了[uni-list-item 组件](https://ext.dcloud.net.cn/plugin?id=24)。

![21_cell](https://images.gitee.com/uploads/images/2021/0509/171310_33b52e9e_1720749.png "21_cell.png")

相关代码：

```js
<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"/>
    
</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 名字，样式根据类名进行样式处理：

```js
<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{
				//....
        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 属性指定扫码识别控件的位置及大小，否则可能无法正确显示。
```

相关代码：

```javascript
// 创建一个二维码（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();
```

图片效果：

![21_sao](https://images.gitee.com/uploads/images/2021/0509/171457_b096cd6a_1720749.png "21_sao.png")

所以封装成一个组件便于维护和管理。

```js

<template>
	<view></view>
</template>

// 扫码成功回调
				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()
			},
			// 打开识别 网址跳转
			openStartRecognize (result) {
				let strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
				let reg = new RegExp(strRegex);
				if (reg.test(result)) {
					return false
				}

// 创建一个 webview 页面
			    let barcodeWebview = plus.webview.create(result, 'barcodeWebview', {
			        titleNView: {
			            autoBackButton: true,
			            backgroundColor: '#fff',
			            titleColor: '#333',
			            // titleText: '外部页面',   // 不设置标题自动读取网页标题
			        },
			        backButtonAutoControl: 'hide',
			        hardwareAccelerated: true,
					background:"#fff"
			    })
				barcodeWebview.show('slide-in-right', 200, function() {
					let title = barcodeWebview.getTitle()
				});
			}
		}
	}
</script>

</style>
```

在 pages/account/account.vue 文件中引用。
需要注意的是，底部导航栏会遮盖扫码识别控件，因此打开扫码的时候隐藏底部导航栏，使用 Uniapp 的 API 操作导航栏  `uni.hideTabBar({})`
设置扫码识别控件在扫码时可以开启摄像头的闪光灯  `obj.setFlash(true)`
想要小程序也支持扫码功能，可以使用  [uni.scanCode](https://uniapp.dcloud.io/api/system/barcode?id=scancode)。
更多 H5+ 的 api 功能可以参考[HTML5+ API Reference](https://www.dcloud.io/docs/api/zh_cn/barcode.html)。

![21_saobuttom](https://images.gitee.com/uploads/images/2021/0509/171428_8c7da660_1720749.png "21_saobuttom.png")

### 字体问题

我们的移动端设备（手机，ipad 等）都是 Retina 显示屏。Retina 显示屏一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由 1 个变为多个，所以在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统 PC 的 2 倍。因此你拿到的设计稿是 750px，而不是 375px。而且在 Retina 屏中，像素比为 2(iPhone6/7/8) 或 3(iPhone6Plus/7Plus/8Plus) 的手机中，1px 的边框看起来比真的 1px 更宽。我们使用的是 rpx 伸缩性单位，如果你在设计稿中测量的边框为 1，在项目中设置边框为:

```js
.border1{
    border-top: 1rpx solid #ddd;
}

//实际编译后：

.border1{
    border-top: 0.5px solid #ddd;
}
```

这个时候需要注意的是： 苹果机 ios8+ 的可以识别浮点类型的单位，因此苹果机可以渲染这个 0.5px，可以看到所谓的一像素细小边框。然而，绝大部分的 android 机是不支持浮点类型单位的（边框失效）。关于 1 像素边框的处理，可以使用  `伪类 + transform`  的方法。即利用  `:before`  或者  `:after`  实现 border + transform 的 scale Y 轴缩小一半，将 border 绝对定位。

```css
<!-- 底部边框 -- > .border-bottom1 {
  position: relative;
  &:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 600rpx;
    border-top: 1px solid #e6e6e6;
    transform: scaleY(0.5);
  }
}
```

字体的问题怎么解决呢？
Chrome 为了更好显示中文规定了默认最小字体是 12px，很多手机厂商及浏览器也有这样的规定。那么上图中 10px 字体就会在某些设备下失效。有没有办法呢， 其实答案很明显了，对文字使用 transform 的 scale 进行缩小。
这样我们就可以看到小字了，但只是缩小文字的大小，并不能将文字所占的区域大小缩小，即无法缩小元素的 width 和 height。防止区域大小缩小后影响到其他元素的排版，可以只对包含文字的元素再包括一层行内元素，只对行内元素缩小。

```js
<view class="name">
    <text class="font10px">内容</text>
</view>

.font10px{
    font-size: 24rpx;
    transform: scale(0.84);
}
```

本两节的代码地址:[fifth](https://gitee.com/kai_bao/cloud-uni/tree/fifth/)
显示的效果图如下：

![21_xiaoguo](https://images.gitee.com/uploads/images/2021/0509/171542_5023c933_1720749.png "21_xiaoguo.png")

接下来就进行细节性开发勒~

zhangrenyang/zhufeng_uni_music2104

简介

发行版

贡献者

近期动态

zhangrenyang/zhufeng_uni_music2104 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

zhangrenyang/zhufeng_uni_music2104