Web前端之移动端开发__积累

20200608

1. 移动端组件库：Vant

官方文档：Vant

2. postcss-px-to-viewport

将px单位自动转换成viewport单位
使用方法：移动端适配方案之postcss-px-to-viewport

3. nprogress页面加载进度条

使用方法：Vue使用NProgress

4. SCSS比CSS好用

使用方法：SCSS教程

• 对于重复使用的颜色，计算(*2)，都应该写成变量或方法，面得需要修改的时候麻烦，也就是代码的可扩展性和维护性。
• 选择器一般都是用类名选择器，且命名规范可遵照BEM思想：CSS命名规范——BEM思想（非常赞的规范）

5. flex布局的强大之处

常用布局：弹性布局-轻松理解Flex布局

例如：对于下面这种盒子，￥49.90和130人购买的共同父元素div，只要为其设置，就可以实现左右布局。
终于摆脱了浮动！

div {
    display: flex;
    justify-content: space-between;
}

6. 注意页面中组件的复用

公共组件中不同的地方可用slot插槽来占位。

7. 单行文字超长时的冒泡处理

方法一：

width：150px；
overflow: hidden;
text-overflow: ellipsis；
white-space: nowrap;

方法二：使用vant的内置样式

8. 移动端1px线

移动端的1px线并不真的是1px，为什么出现这种现象呢？

1. 设备像素（物理像素）：显示屏的最小物理单位，1920*1080就是物理像素，是设备生产出来时就不可变的
2. CSS像素（设备独立像素）：可以被硬件和软件任意调节
3. 设备像素比dpr = 设备像素 / CSS像素（某一方向上）
   可以通过window.devicePixelRatio获取设备的dpr

一般来说，桌面浏览器的dpr = 1，1设备像素 = 1CSS像素，而移动端，手机机型不同，dpr不同（ipone的dpr普遍是2和3），1设备像素 = 2CSS像素 或 3CSS像素，因此不同手机显示的1px线的宽度不同

解决：
一种是通过vant内置样式解决

20200628

1. 组件props中的数据

格式：写清楚类型和默认值
简单类型：

props: {
    src: {
        type: String,
        default: ''
    }
}

引用类型：

props: {
    contentItems: {
        type: Array,
        default() {
            return [];
        }
    }
},

2. CSS3：object-fit属性

object-fit一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
官方解释：

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

replaced element（替换元素）：
替换元素：其内容不受CSS视觉格式化模型控制的元素，如img，嵌入的文档（iframe之类）或者applet。
如img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。

object-fit只针对替换元素有作用，也就是form表单控件，img，video等元素（SVG元素不支持，但可以作为src替换内容出现）。

属性值有以下5种：

属性值	描述
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover	保持原有尺寸比例。但部分内容可能被剪切。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

各个属性值效果如下：

• 扩展
  object-position：控制替换元素位置，默认值是50% 50%，也就是居中效果。所以，无论object-fit属性值是什么，图片都是水平垂直居中的。因此，下次要实现尺寸大小不固定图片的垂直居中效果，可以试试object-fit。例如替换内容一直定位在容器的右下角：object-position: 100% 100%。

3. mockjs语法

mockjs主要有两种定义规范：

• 数据模板定义规范（Data Template Definition，DTD）
• 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范

"name|rule": value：

• 属性名 name
• 生成规则 rule
• 属性值 value — String、Number、Boolean、Array、Object、Function、RegExp
  指定了最终值的初始值和类型，可以含有@占位符

生成规则分为7种：

• "name|min-max": value
• "name|count": value
• "name|min-max.dmin-dmax": value
• "name|min-max.count": value
• "name|count.dmin-dmax": value
• "name|count.dcount": value
• "name|+step": value

数据占位符定义规范

占位符引用了Mock.Random中的方法
列举一些常用占位符：

Type	Method
Basic	boolean natural integer string range date datetime now
Image	image dataImage
Color	color
Text	paragraph sentence word title cparagraph csentence cword ctitle
Name	first last name cfirst clast cname
Web	url domain email ip
Address	region

使用方法：

let data = Mock.mock({
    'list|10': [{
        'id|+1': 1,
        'name':'@string', // 字符串
        'point':'@integer', // 整形
        'birthday':'@date' // 日期
    }]
})

4. mockjs使用

Mock.js两个重要特性：

• 数据类型丰富
  支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 拦截 Ajax 请求
  不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。安全又便捷

Mock经常使用的API：Mock.mock(url, type, data)

参数名	参数需求	参数描述	例子
url	可选：URL字符串 或 URL正则	拦截请求的地址	/mock
type	可选	拦截Ajax类型	GET、POST
template	可选：可以是对象或字符串	生成数据的模板	{'data|1-10': ['mock']}、{'data|5': '@email'}

那么如何在vue中使用mockjs呢？

1. 首先安装mockjs：npm install mockjs --save-dev
2. src下创建一个mockjs的文件夹，里边存在index.js，用来保存模拟数据路径
   
3. 在mockjs文件夹内创建info.js，用来存储模拟数据
   
   4.scr/api/user.js 作为一个专门放置访问接口的文件夹，将每个接口export出去
   
4. 在main.js文件中引用
   
5. 调接口，获取数据
   

20200707

1. 异步传入子组件的数据用watch获取

2. 路由传参

• name 和 params 一组

this.$router.push({
    name: 'MyMsg',
    params: {
        id: 1
    }

接收：this.$route.params

• path 和 query 一组

this.$router.push({
    path: '/myMsg',
    query: {
        id: 1
    }

接收：this.$route.query

3. 如何实现密码框中的占位符

input输入框中，如果type = password，就无法在密码框中实现类似“请输入密码”这样的placeholder。
解决办法：用一个变量动态绑定Input的类型。当其获取焦点时为password类型，失去焦点时为type类型。

4. 动态绑定类名

一开始写的是:icon-class="isActiveIndex == index ? 'item.svgActive' : 'item.svg'"，但是始终无法生效，后来发现这样写在子组件svgIcon中接收的是”item.svgActive“这样一个字符串，于是改成了下面这种写法，就可以接收到数据了。