20240914uniapp学习工作-改扫码慢的问题2

继续解决安卓app扫码太慢的问题, 用的是华为的扫码sdk.

业务介绍-统一扫码服务 - 华为HarmonyOS开发者 (huawei.com)
 

我们项目肯定用 Default View Mode, 扫码流程由 Scan Kit 处理, 扫码界面也有 Scan Kit 提供.

安上这个

在灵道的催催催下终于弄完了扫码. 一直忙到下午3点. 也没空记录.

app的扫码速度感觉变快了很多.

还有点时间,继续研究同事封装的组件.

<template>
	<view class="bg-white margin-b-10" @click="click">
		<view class="text-right margin-r-10 border-b padding-5">
			<text class="title margin-r-5" v-html="getStatusName()"></text>
			<uni-icons type="right" size="18"></uni-icons>
		</view>
	</view>
</template>

uni-icons是uniapp的图标组件, 用于展示移动端常见的图标, 可自定义颜色大小.

type="right" 图标就是向右箭头. size=18 表示大小.

<template>
	<view class="bg-white margin-b-10" @click="click">
		<view class="text-right margin-r-10 border-b padding-5">
			<text class="title margin-r-5" v-html="getStatusName()"></text>
			<uni-icons type="right" size="18"></uni-icons>
		</view>
        <view class="margin-r-10 padding-5">
            <slot></slot>
        </view>
	</view>
</template>

<slot> 作为组件模板中的内容分发插槽. <slot> 元素自身将被替换.

slot 是什么玩意呢? 在阿里云社区找到一篇介绍的比较明白.vue系列之 插槽(Slot) 详解-阿里云开发者社区

slot 是 html 中 web components 技术套件的一部分, 是 Web 组件内的一个占位符.

在 vue 中, 插槽是一种很常见的写法, 让父组件可以向子组件指定位置插入 html 结构, 也是一种组件间通信的方式.

插槽分三类, 默认插槽、具名插槽、作用域插槽.

默认插槽

作用: 是让组件内部的一些结构支持自定义.

使用场景: 比如我们这个组件就是最上边一行是单号和状态, 最下面一行是编辑和删除按钮, 中间的内容部分不希望写死, 希望在使用的时候能自定义.

插槽的基本语法:

1. 组件内需要定制的结构部分, 改用占位.

2. 使用组件时, 标签内部, 传入结构替换slot.

3. 给插槽传入内容时, 可以传入纯文本、html标签、组件.

子组件MyDialog.vue:

<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close">✖️</span>
    </div>
 
    <div class="dialog-content">
      <!-- 1. 在需要定制的位置，使用slot占位 -->
      <slot></slot>
    </div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
 
    }
  }
}
</script>
 
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dialog {
  width: 470px;
  height: 230px;
  padding: 0 25px;
  background-color: #ffffff;
  margin: 40px auto;
  border-radius: 5px;
}
.dialog-header {
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.dialog-header .close {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
.dialog-content {
  height: 80px;
  font-size: 18px;
  padding: 15px 0;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.dialog-footer button {
  width: 65px;
  height: 35px;
  background-color: #ffffff;
  border: 1px solid #e1e3e9;
  cursor: pointer;
  outline: none;
  margin-left: 10px;
  border-radius: 3px;
}
.dialog-footer button:last-child {
  background-color: #007acc;
  color: #fff;
}
</style>

父组件App.vue:

<template>
  <div>
    <!-- 2. 在使用组件时，组件标签内填入内容.这里就是
把上面1.处的slot部分替换为下面的div -->
    <MyDialog>
      <div>你确认要删除么</div>
    </MyDialog>
 
    <MyDialog>
      <p>你确认要退出么</p>
    </MyDialog>
  </div>
</template>
 
<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {
 
    }
  },
  components: {
    MyDialog
  }
}
</script>
 
<style>
body {
  background-color: #b3b3b3;
}
</style>