基于vant的移动端黑马头条知识点总结

2020-12-23 19:05:03 阅读：360 来源： 互联网

标签：知识点 return vant dayjs title json 组件 data 头条

移动端rem适配

Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值

一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）

1、安装

# yarn add amfe-flexible
npm i amfe-flexible

2、然后在 main.js 中加载执行该模块

import 'amfe-flexible'

3.查看浏览器调试工具中的观察 html 标签 font-size 的变化

二、使用 postcss-pxtorem 将 px 转为 rem

1、安装

# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D

2、然后在项目根目录中创建 .postcssrc.js 文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

3、配置完毕，重新启动服务

4、查看浏览器调试工具审查元素的样式查看是否已将 px 转换为 rem

需要注意的是：

该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>

Postcss文件解释

/**
 * PostCSS 配置文件
 */

module.exports = {
  // 配置要使用的 PostCSS 插件
  plugins: {
    // 配置使用 autoprefixer 插件
    // 作用：生成浏览器 CSS 样式规则前缀
    // VueCLI 内部已经配置了 autoprefixer 插件
    // 所以又配置了一次，所以产生冲突了
    // 'autoprefixer': { // autoprefixer 插件的配置
    //   // 配置要兼容到的环境信息
    //   browsers: ['Android >= 4.0', 'iOS >= 8']
    // },

    // 配置使用 postcss-pxtorem 插件
    // 作用：把 px 转为 rem
    'postcss-pxtorem': {
      // lib-flexible 的 REM 适配方案：把一行分为 10 份，每份就是十分之一
      // 所以 rootValue 应该设置为你的设计稿宽度的十分之一
      // 我们的设计稿是 750，所以应该设置为 750 / 10 = 75
      // 但是 Vant 建议设置为 37.5，为什么？因为 Vant 是基于 375 写的
      // 所以必须设置为 37.5，唯一的缺点就是使用我们设计稿的尺寸都必须 / 2
      // 有没有更好的办法？
      //   如果是 Vant 的样式，就按照 37.5 来转换
      //   如果是 我们自己 的样式，就按照 75 来转换
      // 通过查阅文档，我们发现 rootValue 支持两种类型：
      //    数字：固定的数值
      //    函数：可以动态处理返回
      //          postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
      //          它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },

      // rootValue: 75,

      // 配置要转换的 CSS 属性
      // * 表示所有
      propList: ['*'],

      // 配置不要转换的样式资源
      exclude: 'github-markdown'
    }
  }
};

加载第三方图片资源403问题解决

这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容，而第三方平台对图片资源做了防盗链保护处理。

第三方平台怎么处理图片资源保护的？

服务端一般使用 Referer 请求头识别访问来源，然后处理资源访问。

解决： 1. 直接在 HTMl 页面头中通过 meta 属性全局配置

<meta name="referrer" content="no-referrer" />

用 <a>、<area>、<img>、<iframe>、<script> 或者 <link> 元素上的 referrerpolicy 属性为其设置独立的请求策略

<img src="http://……" referrerPolicy="no-referrer">

处理时间的dayjs插件

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样，如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。

Day.js 可以运行在浏览器和 Node.js 中。
标签：知识点,return,vant,dayjs,title,json,组件,data,头条
来源： https://blog.csdn.net/weixin_44389562/article/details/111596748

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

基于vant的移动端黑马头条知识点总结

移动端rem适配

加载第三方图片资源403问题解决

处理时间的dayjs插件