⑦vue-移动端项目记录（下）

12、HTML人民币书写用“&yen”

网页上的人民币标识￥请统一使用转义字符（¥ 或者 ¥）。
直接写中文字符￥无论你用全角还是半角都是不规范的写法；

13、watchEffect()在tab切换同时请求数据时的妙用

Effect无惰性，立即执行，页面加载的第一次也会执行；
不需要传递要侦听的内容，自动会感知watchEffect中数据对外界的代码依赖；
不需要传递很多参数，只需要一个回调函数；
watchEffect不能获取数据改变之前的原始值，只能获取当前改变后的值；
可用于ajax等异步请求，纯函数中的异步请求，使输出变得不确定性，故而产生副作用，此处effect更形象；

// 列表内容相关的逻辑
import { reactive,toRefs, watchEffect } from 'vue'

const useCurrentListEffect = (currentTab, shopId) => {
  const content = reactive({ list: [] })
  const getContentData = async () => {
    const result = await get(`/api/shop/${shopId}/products`, {
      tab: currentTab.value
    })
    if(result?.errno === 0 && result?.data?.length) {
      content.list = result.data;
    }
  }
  watchEffect(() => { getContentData() })
  const { list } = toRefs(content)
  return { list }
}

14、物理像素/DPR/设备尺寸/ppi/分辨率—-解析

设备物理像素：指的是手机屏幕上横向（或纵向）上共有多少个像素点，以iphone8为例，iphone8的分辨率为1334x750像素，1334为纵向的设备物理像素，750为横向的设备物理像素。设备的物理像素是设备决定的，不可改变；
DPR（Device Pixel Ratio）：设备像素比，指的是设备一逻辑像素点内能显示多少个物理像素，现在市面上的手机绝大部分DPR等于2或3，iphone6/7/8的DPR都为2（1个逻辑像素需要2个物理像素显示），iphone6/7/8 Plus的DPR都为3，这就是前端开发需要使用到2、3倍图的原因。设备的DPR是设备决定的，不可改变；
1
2
// js获取设备DPR
window.devicePixelRatio
设备尺寸：设备屏幕对角线之间的距离，用英寸表示，例如iphone6/7/8都为4.7英寸；
PPI（Pixels Per Inch）：每英寸范围内所拥有的像素数，PPI越高，每英寸内拥有的像素也越高，显示的内容也更加清晰细致；
屏幕分辨率：是指纵横向上的像素点数，单位是px。分辨率160×128的意思是水平方向含有像素数为160个，垂直方向像素数128个；

15、为何设备的dpr(device pixel ratio)越大，1px线越粗？

iphone6/7/8的DPR都为2
- 1px = 4(2*2)物理点
iphone6/7/8 Plus的DPR都为3
- 1px = 9(3*3)物理点

故css中的px为相对单位而非绝对单位；
故dpr(device pixel ratio)越大，1px线越粗；

16、(移动端适配①)dpr不同时，移动端如何实现1px边框？

css为最佳实现方案
- 问题1：如何得知设备的dpr值；
  - 解决：媒体查询，查像素密度；
- 问题2：会影响原本样式；
  - 解决：伪元素，脱离原本元素；

基于 Stylus 的 border1px 的封装：https://gitee.com/shocked/felixlu-course-gp21/blob/master/Vue.js/maoyan/src/assets/stylus/border.styl

border1px(width=1px, color=#ccc, style=solid, radius=0)
  position relative
  &::after
    position absolute
    // pointer-events none 解决点击事件无效
    // 详见：https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
    pointer-events none
    top 0
    left 0
    bottom 0
    right 0

    z-index 999

    content ''

    border-width width
    border-color color
    border-style style
    border-radius radius

    @media (max--moz-device-pixel-ratio: 1.49),(-webkit-max-device-pixel-ratio: 1.49),(max-device-pixel-ratio: 1.49),(max-resolution: 143dpi),(max-resolution: 1.49dppx)
      width 100%
      height 100%
      border-radius radius
      transform scale(1)

    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
      width 200%
      height 200%
      border-radius radius * 2
      transform scale(0.5)

    @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5),(min-resolution: 240dpi), (min-resolution: 2.5dppx)
      width 300%
      height 300%
      border-radius radius * 3
      transform scale(0.333333)

    transform-origin 0 0

border1px 的使用：

li:last-child
	width .44rem
	border1px(0 0 0 1px)
	font-size .2rem
	line-height .44rem
	text-align center
	color #cd4c42

viewport不是所有浏览器都支持

1	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scaleable=no">

17、(移动端适配②)移动端 -webkit-line-clamp 封装单行/多行文本溢出

基于 Stylus 的 ellipsis 的封装：

-webkit-line-clamp：css3新增属性，不是w3c规范，却被chrome和safari接受

ellipsis($width = 100%, $line-clamp = 1)
  width $width
  display -webkit-box
  -webkit-line-clamp $line-clamp
  -webkit-box-orient vertical
  overflow hidden

ellipsis 的使用：

@import '~@/assets/stylus/ellipsis.styl'

h1
  // 第二个参数控制行数
	ellipsis(100%, 2)

18、Vue-cli 二次配置跨域

devserver-proxy的文档：https://cli.vuejs.org/zh/config/#devserver-proxy
vue.config中chainWebpack配置文档：https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
了解 webpack-chain 的 API：
- set(key, value)：https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans#chainedmap

Vue.config.js

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.join(__dirname, './src'))
  },

  devServer: {
    proxy: {
      '/mmdb': {
        target: 'https://wx.maoyan.com',
        changeOrigin: true
      },
      '/api': {
        target: 'http://localhost:9000',
        changeOrigin: true,
        // pathRewrite: {
        //   '^/api': ''
        // }
      },
      '/ajax': {
        target: 'https://m.maoyan.com',
        changeOrigin: true
      }
    }
  }
}

resolve.alias的作用：
- 在 vue.js 中路径./src（项目下的src文件夹）可以替换为@，如下：
  1
  import config from '@/utils/config.js'
  1
  @import '~@/assets/stylus/border.styl'
devServer的作用：
- 在localhost本地拿到线上地址；

19、(移动端适配③)移动端布局方案

19.1、流式布局（百分比布局）

实现方式：
- 宽度百分百 + 高度固定；
特点：
- 手机越大，内容展示越多，适用于list 列表页；
- 虽然使用的是rem单位，但是html的fantsize是固定的；
  - 所以高度固定的区域，其大小是固定，不随着屏幕的放大缩小而变化。

19.2、等比缩放布局（rem布局）

19.2.1、方案一：vw(viewpoint width:1vw=视窗宽度的1%)+rem

核心原理：将html中fontsize值由100px设为设计稿参照系vw
1vw = (window.innerWith * 1%) px = 设计稿参照系px

100px = 100px/设计稿参照系px = 设计稿参照系vw
1
2
3
4
5
html {
  /* fontsize: 100px */
  fontsize: 设计稿参照系vw
}
/*页面其他地方设置，依赖 html.fontsize 为 100px 的 如：0.44rem 值*/
为了更好理解，如下举例：
若设计稿参照系为Iphone 6/7/8–375*667

按照上面的提到的方法，则html中fontsize: 26.6666667vw

若页面中有元素高度为 0.44rem 换算成 px 如下推导：

0.44rem * 26.6666667vw = 11.7333333vm

最终换算为：11.7333333vm * 3.75px = 44px

若使用iphone 5/se–320*568打开上述以Iphone 6/7/8为设计稿开发的页面

最终换算为：11.7333333vm * 3.2px = 37.5466666px

相当于做了等比缩小。

若设计稿参照系为：iphone 5/se——–320*568
- 将html.fontsize从100px改为31.25vw
1vw = (window.innerWith * 1%) px= 3.2px

100px = 100/3.2px = 31.25vw
1
2
3
4
html {
/* fontsize: 100px */
fontsize: 31.25vw
}
若设计稿参照系为：Iphone 6/7/8——–375*667
- 将html.fontsize从100px改为26.6666667vw
1vw = (window.innerWith * 1%) px= 3.75px

100px = 100/3.75px = 26.6666667vw
1
2
3
4
html {
/* fontsize: 100px */
fontsize: 26.6666667vw
}
若设计稿参照系为：Iphone 6/7/8 plus——–414*736
- 将html.fontsize从100px改为26.6666667vw
  1vw = (window.innerWith * 1%) px= 4.14px
  
  100px = 100/4.14px = 24.1545894vw
  1
  2
  3
  4
  html {
  /* fontsize: 100px */
  fontsize: 24.1545894vw
  }
若设计稿参照系为：Iphone x——–375*812
- 宽度都为375，故同 Iphone 6/7/8 处理方式

19.2.2、方案二：js获取屏幕宽度 + rem

public/index.html添加script

var width = document.documentElement.clientWidth || document.body.clientWidth;
var ratio = width / 375;
var fontSize = 100 * ratio;
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';

19.2.2、方案二：手淘flexible.js

flexible.js记得停止维护了，其作者也建议利用vh，vw适配。

19.3、如何使“首页面等比缩放布局”&“列表页流式布局”同时存在

问题分析，即，使不同页面html展示不同fontsize值：
- 首页面___等比缩放布局
  1
  2
  3
  html {
  fontsize: 26.6666667vw
  }
- 列表页___流式布局
  1
  2
  3
  html {
  fontsize: 100px
  }
关键问题，如何穿透vue-scoped的约束？
- 重新创建一个没有 scoped 的 style 标签，即可覆盖当前页面的 html 的 fontsize 值；
- 从而使当前页面由“等比缩放布局”变成“流式布局”；
1
2
3
4
5
6
7
8
9
<style lang="stylus" scoped>
…………
</style>

<style lang="stylus">
html {
fontsize: 100px
}
</style>

20、移动端input光标太大

input {
		margin-top: .12rem;
    line-height: .22rem;
  	font-size: .16rem;
}

21、css实现的小图标与开发时不一致

尽量使用iconfront或图片

22、发布经常出的问题

后端发布文件名不同需要在前端重新配置publicPath:'/xxx'

12、HTML人民币书写用“&yen”

13、watchEffect()在tab切换同时请求数据时的妙用

14、物理像素/DPR/设备尺寸/ppi/分辨率—-解析

15、为何设备的dpr(device pixel ratio)越大，1px线越粗？

16、(移动端适配①)dpr不同时，移动端如何实现1px边框？

17、(移动端适配②)移动端 -webkit-line-clamp 封装单行/多行文本溢出

18、Vue-cli 二次配置 跨域

19、(移动端适配③)移动端布局方案

19.1、流式布局（百分比布局）

19.2、等比缩放布局（rem布局）

19.2.1、方案一：vw(viewpoint width:1vw=视窗宽度的1%)+rem

19.2.2、方案二：js获取屏幕宽度 + rem

19.2.2、方案二：手淘flexible.js

19.3、如何使“首页面等比缩放布局”&“列表页流式布局”同时存在

20、移动端input光标太大

21、css实现的小图标与开发时不一致

22、发布经常出的问题

18、Vue-cli 二次配置跨域