最近开发项目的总结

发表于 | 分类于 |

前言


最近都在开发混合APP的页面，有些一些看似简单的东西一旦动手做起来总是会出现许多各式各样的问题，所以把这些问题记录下来，自己没事翻一翻，或者有个思路去解决。

一、 label 标签模拟单选、复选框

在uniapp中或者H5中,按钮的样式都是有限的,为了让按钮看起来更美观，提升用户体验，就不用 input 标签的单选、复选按钮，而是用 label 标签结合 for 属性来模拟。具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// HTML代码
<view class="test">
    <input type="checkbox" id="serach-moible">
    <label for="serach-moible">苹果</label>
</view>
// CSS 代码
.test input{ opacity: 0; }
label{
   display: block;
   font-size: 14px;
   line-height: 14px;
}
input[type=checkbox]+label::before{
   content: '';
   background: transparent;
   border: 1px solid #000;
   box-shadow: inset 0 0 0 2px #fff;
   cursor: pointer;
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 12px;
   position: relative;
   top: 2px;
}
input[type=checkbox]:checked+label::before{
   background: #000;
}

当你点击 label 时，实际上就是选中了 input 单选按钮，为了这样，你必须要把 input 标签的 id 的值跟 label 标签的 for 属性值保持一致，这样就能通过操作 label 来操作按钮。

二、图片懒加载

图片懒加载这项技术可以延迟加载图像，只当图片出现在我们看到的视图中才加载，它的好处是大大提高用户体验，在uniapp中，图片懒加载已经帮我们处理好了，我们只要在image的属性上面加一个lazyLoad就能实现了，但是在正常的H5中，我们需要自己写图片懒加载的技术了

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- HTML -->
<div>
  <img class="lazy-load" data-src="https://source.unsplash.com/random/600" alt="">
  <img class="lazy-load" data-src="https://source.unsplash.com/random/700" alt="">
  <img class="lazy-load" data-src="https://source.unsplash.com/random/800" alt="">
  <img class="lazy-load" data-src="https://source.unsplash.com/random/900" alt="">
</div>
<!-- 引入 lodash 库 -->
<script src="https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.core.min.js"></script>  
<!-- CSS -->
div {
  margin-top: 350px;
}
.lazy-load {
  width: 200px;
  height: 150px;
}
<!-- JS -->
let lazyImages = [...document.querySelectorAll('.lazy-load')]
let inAdvance = 300
function lazyLoad() {
    lazyImages.forEach(image => {
        <!-- 当图片的视口小于 Windows的偏移 + windows的屏幕高度就赋值  替换真实图片的  URL -->
        if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) {
            image.src = image.dataset.src;  
        }
    })
}
lazyLoad();
window.addEventListener('scroll', _.throttle(lazyLoad, 50))
window.addEventListener('resize', _.throttle(lazyLoad, 50))

三、常用正则表达式整理

很多编程语言都有正式，在项目中都会用到的正则表达式，匹配一系列匹配某个句法规则的字符串。经常使用的两个方法是 test() 和 match() 。

以下是在网上收集上项目中常用的

1.手机号码

1
^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$

2.电子邮件

1
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

3.字母开头，允许5-16字节，允许字母数字下划线(一般用于账号)

1
^[a-zA-Z][a-zA-Z0-9_]{4,15}$

4.密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)

1
^[a-zA-Z]\w{5,17}$

5.强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)

1
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

6.国内电话号码，例如 021-87888822

1
d{3}-d{8}|d{4}-d{7}

7.腾讯QQ号

1
[1-9][0-9]{4,}

8.邮政编码

1
[1-9]d{5}(?!d)

9.身份证号码(18位)

1
^((\d{18})|([0-9x]{18})|([0-9X]{18}))$

10.日期格式

1
^\d{4}-\d{1,2}-\d{1,2}

11.IP地址

1
((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

12.汉字

1
^[\u4e00-\u9fa5]{0,}$

13.域名

1
[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

14.url地址

1
[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

*常用的就是项目中用test 去匹配某个值之后返回 的布尔值

1
test() 方法用于检测一个字符串是否匹配某个模式.输入参数为字符串，返回值为布尔值。用法如下

四、uniapp开发的中的问题

1.class绑定问题

官方文档已经很明确的说明非H5端不支持 Vue官方文档：Class 与 Style 绑定 中的 classObject 和 styleObject 语法。

-不支持示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <view :class="[activeClass]" :style="[baseStyles,overridingStyles]"></view>
</template>

<script>
    export default {
        data() {
            return {
                activeClass: {
                    'active': true,
                    'text-danger': false
                },
                baseStyles: {
                    color: 'green',
                    fontSize: '30px'
                },
                overridingStyles: {
                    'font-weight': 'bold'
                }
            }
        }
    }
</script>

不过我在定义一个icon的组件的时候，有个数组绑定class的问题，自定义了一个icon的组件，部分代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
<!-- 模拟器中这边的class 会是逗号隔开的，而不是中间是一个空格 -->
    <text :class="[name, icon]"
        :style="{'color': color, 'font-size': fontSize}">
    </text>
</template>

<script>
    export default {
        props: {
            name: {
                type: String,
                default: 'iconfont'
            },
            icon: {
                type: String
            },
            color: {
                type: String,
                default: '#666666'
            },
            size: {
                type: [Number, String],
                default: 30
            }
        },
        computed: {
            cls(){
                return `${this.name} ${this.icon}`
            },
            fontSize(){
                return this.size + 'upx'
            }
        }
    }
</script>
<!--  -->

之后解决的帮忙就是利用计算属性

1
2
3
4
5
6
7
8
<text :class="cls"
   >
</text>
computed: {
    cls(){
        return `${this.name} ${this.icon}`
    }
}

2.生命周期那些事

首先我们需要清楚uniapp中生命周期，应用生命周期，页面生命周期，还有组件生命周期：

应用生命周期是项目启动的过程，主要是在App.vue中声明的，包括下面几个：

markdown

markdown

  • 在onLanch中我们可以获取启动参数,第三方APP传过来的参数，监听推送消息，设置屏幕锁定方向等等。
  • 页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用created与mounted。ps：组件里面就没有onShow了

3.一些典型的问题

  • 出现遮罩后阻止页面滚动，可以在遮罩的touchmove事件中阻止默认事件。@touchmove.prevent=””。
  • 组件内引入图片要使用绝对路径（官方都推荐了）。/static/1.png
  • z-index 覆盖不住要不就是层级不够，要不就是没加定位
  • 长按实践中@longTap 在APP端获取不到定位或者没效果和=可以推荐使用@longpress
  • 富文本解析中组件和api中有俩个方案，但经过使用发现u-parse是官方推荐的
  • 引入新的组件中需要重新重启才可更新编译

总结

实践是检验效果的唯一标准，多动手多敲代码多实践，哪怕在简单的东西自己也要亲自去敲一遍才有所了解，有问题就找谷歌和百度。

https://pan.baidu.com/s/1izwf1KV0RbD_aZ3LA3u6ow qE4W

-------------本文结束感谢您的阅读-------------