11 - 多平台适配

news2024/11/15 11:06:19

多平台适配

11-1：开篇

在上一章中，我们知道了，当【慕课热搜】运行到 h5 端的时候，那么会出现一些问题，这些问题具体有：

  1. hot 列表滚动，tabs 置顶效果消失
  2. 在火狐浏览器中，横线出现非常粗的滚动条
  3. 进行文章详情再返回，会出现 ui 错乱
  4. 文章详情无法展示
  5. 文章详情样式问题（现在无法看到）
  6. 热播视频全部无法播放
  7. 登录功能无法使用

那么本章节中，我们就会专门来去处理这些问题。

这些问题处理的过程，也就是 项目适配到 h5 的过程。

针对每个问题的处理，我们会分成三块来进行讲解，分别是：

  1. 分析问题出现的原因
  2. 提出对应的解决方案
  3. 完成该问题的处理代码

那么一切准备就绪，接下来就进入我们本章节的内容吧。

11-2：uniapp 中的条件编译

想要搞定适配的功能，那么我们首先需要了解一个东西，那就是：条件编译

我们可以通过：特殊的注释作为标记，将注释里面的代码编译到不同平台。

这样的注释主要有两种：

  1. 以 #ifdef %PLATFORM% 开头，以 #endif 结尾：仅在某平台存在
  2. 以 #ifndef %PLATFORM% 开头，以 #endif 结尾：除了某平台均存在

其中 %PLATFORM% 表示 平台名称

比如说，我们可以在 App.vue 中，写下这样一行代码：

  onLaunch: function () {
    /* #ifdef H5 */
    console.log('当前处于 H5 编译平台');
    /* #endif */
    /* #ifndef H5 */
    console.log('当前处于非 H5 编译平台');
    /* #endif */
  },

那么 当前处于 H5 编译平台 只会在 浏览器打印

当前处于非 H5 编译平台 只会在 非浏览器打印

具体的 %PLATFORM% 取值，大家可以参考 条件编译官方文档 ， 这里就不作一一的赘述了。

那么在了解了，条件编译的语法之后，接下来我们就可以处理 多平台适配相关的内容了。

11-3：多平台适配 - tabs 置顶效果消失

分析原因

在控制台中检查 tab-sticky 的，我们可以发现 它的样式指定其实是没有问题的：

请添加图片描述

position: sticky 依然生效，那么问题是出现在哪里呢？

当我们把页面进行滚动之后，然后再控制台查看 tab-sticky 的位置，此时我们就可以发现问题：
请添加图片描述

tab-sticky 虽然吸顶了，但是它的吸顶位置为 top:0 。

这样的效果在 微信小程序是没有问题的，但是在 浏览器端就会被遮挡！

解决方案

明确了原因之后，想要处理这个问题就很容易了。我们只需要在 浏览器端调整 top 的位置就可以了。

处理代码

hot.vue

  .tab-sticky {
    position: -webkit-sticky;
    position: sticky;
    z-index: 99;
    /* #ifndef H5 */
    top: 0;
    /* #endif */
    /* #ifdef H5 */
    top: 44px;
    /* #endif */
  }

11-4：多平台适配 - 火狐浏览器处理粗滚动条

分析原因

在浏览器中出现 粗滚动条 的原因是因为： 浏览器对滚动条的处理问题。

解决方案

隐藏浏览器滚动条

处理代码

my-tabs

  /* #ifdef H5 */
  /deep/.uni-scroll-view::-webkit-scrollbar {
    display: none;
  }

  /deep/.uni-scroll-view {
    scrollbar-width: none;
  }
  /* #endif */

11-5：多平台适配 - ui 错乱 与 文章详情无法展示

分析原因

在我们刚进入到首页的时候，我们的 ui 是没有任何问题的。但是当我们进入到 文章详情 在返回到首页时，我们就会发现：item 的 ui 变得错乱了

那么想要去分析这个问题的原因，就需要到 文章详情 页面，看一下，看看 文章详情 究竟做了什么事情。

在 文章详情 中，我们之前使用过 page-meta 来去处理：微信小程序中文章详情文字过小的问题。

而现在在 浏览器端 之所以出现这些问题，就是因为 page-meta 导致的。

解决方案

在 h5 中，不使用 page-mate ，只使用 article-detail.scss 中的

html {
  font-size: 52px;
}

即可

处理代码

<template>
  <!-- #ifndef H5 -->
  <page-meta root-font-size="52px">
    <!-- #endif -->
    ...
    <!-- #ifndef H5 -->
  </page-meta>
  <!-- #endif -->
</template>

11-6：多平台适配 - 文章详情样式处理

分析原因

通过控制台查看，我们可以发现 article-detail.scss 文件的样式并没有生效，出现这个问题的原因，是因为当 uni-app 运行到浏览器端的时候，页面组件中 style 标签的引入会失效。

解决方案

在 main.js 中统一引入

处理代码

...
// 文章详情样式
import './styles/article-detail.scss';
...

11-7：多平台适配 - 热播视频全部无法播放

分析原因

在浏览器中视频无法播放，并且会出现 403 的错误。

对于这一块，大家需要首先先明确 403 错误表示的是什么意思：

403错误是一种在网站访问过程中，常见的错误提示，表示资源不可用。 服务器理解客户的请求，但拒绝处理它，通常由于服务器上文件或目录的权限设置导致的WEB访问错误。

简单来说就是：服务端不愿意处理你的请求。

在某些网站中，服务端只会处理 它信任的客户端请求，而不愿意处理它不认识的客户端的请求。

而想要解决这个问题，我们就需要对 请求进行伪装，我们无法伪装成 他信任的人，但是我们可以 隐藏身份，让服务端不确定它是不是认识你。 这样在默认情况下，服务端就 “勉为其难” 的处理你的请求。

那么想要进行伪装，就需要使用到 referrer 的 no-referrer 指令

解决方案

  1. 在项目的根目录创建 index.html 文件，作为 根模板。（可参考：自定义模板 相关文档）
  2. 添加 <meta name="referrer" content="no-referrer" /> 标签
  3. 在 manifest.json->h5->template 节点中关联这个html文件的路径
  4. 重新编译项目到浏览器

处理代码

index.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
				<!-- 访问来源信息不随着请求一起发送 -->
				<!-- 解决 web 访问商品 403 的问题 -->
				<meta name="referrer" content="no-referrer" />
        <!-- Open Graph data -->
        <!-- <meta property="og:title" content="Title Here" /> -->
        <!-- <meta property="og:url" content="http://www.example.com/" /> -->
        <!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
        <!-- <meta property="og:description" content="Description Here" /> -->
        <script>
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

manifest.json

  "h5": {
    "template": "index.html"
  }

11-8：多平台适配 - 一键登录功能

分析原因

在 my-login 中，只处理了 微信一键登录 的功能

解决方案

按照接口，直接处理对应数据即可。

处理代码

my-login

<template>
  <view class="my-container">
    <!-- 用户未登录 -->
    <block v-if="!token">
      <image class="avatar avatar-img" src="/static/images/default-avatar.png" mode="scaleToFill" />
      <view class="login-desc">登录后可同步数据</view>
      <!-- #ifdef MP-WEIXIN -->
      <button class="login-btn" type="primary" @click="getUserInfo">微信用户一键登录</button>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <button class="login-btn" type="primary" @click="onAutoLogin">一键登录</button>
      <!-- #endif -->
    </block>
  </view>
</template>

<script>
export default {
  methods: {
    ...
    /**
     * 一键登录
     */
    async onAutoLogin() {
      // 展示加载框
      uni.showLoading({
        title: '加载中'
      });
      await this.login({
        encryptedData: 'BmGEMqpGI5w',
        errMsg: 'getUserProfile:ok',
        iv: 'c+NbINO4CuEWCBYGG2FxWw==',
        rawData:
          '{"nickName":"小慕同学","gender":1,"language":"zh_CN","city":"","province":"","country":"China","avatarUrl":"https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"}',
        signature: '449a10f11998daf680fe546a5176e6e2973516ce',
        userInfo: { nickName: '小慕同学', gender: 1, language: 'zh_CN', city: '', province: '' }
      });
      this.$emit('onLoginSuccess');
      // 隐藏loading
      uni.hideLoading();
    },
  }
};
</script>

11-9：总结

本章节中，我们处理了 多平台适配 的问题，其中的核心 api 就是 uni 所提供的条件编译语法

那么到现在为止【慕课热搜】已经可以在：

  1. 微信小程序
  2. h5

进行运行了。这样其实就已经达到了我们的目的。

这里大家要注意，在实际的开发场景中，我们去进行 多平台适配 的时候，并不是适配的越多越好的。

因为适配的越多，证明我们需要付出越大的成本。

所以，通常我们会根据我们的应用属性，来决定要适配哪些平台。

如果你的应用是涉及到 支付 相关的，那么一般需要适配：

  • 微信小程序
  • 支付宝小程序

如果是非支付相关的，一般只需要：

  • 微信小程序
  • h5

就可以了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/439507.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

kafka-kafka集群配置、kafka集群启动创建kafka主题、获取主题数据

kafka-kafka集群配置、kafka集群启动创建kafka主题、获取主题数据

本文章使用三台主机&#xff0c;分别为&#xff1a;master、slave1、slave2 一、解压kafka安装包至目录下 tar -zxvf kafka_2.12-2.4.1.tgz -C /需要放置的路径/ 二、修改配置文件 server.properties 该配置在kafka目录的config目录下 #修改文件中id数值 broker.id0 kafka集群…
阅读更多...
Linux -- Web服务器-Apache 快速安装及主配置文件分析

Linux -- Web服务器-Apache 快速安装及主配置文件分析

目录 快速安装 Apache : 预处理 &#xff1a; 关闭安全上下文检测 : 关闭防火墙 : 启动 Apache 服务 &#xff08; 启动 httpd &#xff09;: 测试 &#xff1a; 主配置文件分析 &#xff1a; 常见配置文件所在位置 &#xff1a; 目录文件结构 &#xff1a;…
阅读更多...
购物车--订单模块，练习完成

购物车--订单模块，练习完成

目标&#xff1a; 在购物车页面&#xff0c;增加一个创建订单的超链接。通过创建订单&#xff0c;在Order表里新增一条数据&#xff0c;同时把session中的订单条目都保存到数据库中。 1、创建两个表&#xff0c;orders用来具体存储每一个订单的细节&#xff0c;order_用来存储…
阅读更多...
基于MobileNetV2的Transfer Learning模型，实现物体检测（附源码）

基于MobileNetV2的Transfer Learning模型，实现物体检测（附源码）

文章目录 一、MobileNet1. 深度可分离卷积&#xff08;Depthwise separable convolution&#xff09;2. MobileNet V13. MobileNet V2 二、物体检测源码&#xff08;基于MobileNetV2&#xff09; 一、MobileNet 1. 深度可分离卷积&#xff08;Depthwise separable convolution…
阅读更多...
智慧园区综合管理平台开发基本功能有哪些？

智慧园区综合管理平台开发基本功能有哪些？

随着智慧城市建设与信息化发展&#xff0c;园区管理也需要更加智能便捷化&#xff0c;于是智慧园区管理系统开发应运而生。智慧园区综合管理系统就是利用物联网、大数据等技术工具&#xff0c;顺应产业园区升级发展需求&#xff0c;实现园区环境、设备、安全、基础管理、资源服…
阅读更多...
【Linux】进程间通信——命名管道

【Linux】进程间通信——命名管道

文章目录 命名管道1. 见一见管道文件mkfifo函数管道文件的使用 2. 命名管道原理如何保证两个毫不相关的进程&#xff0c;看到的是同一个文件&#xff0c;并打开&#xff1f; 3. 用命名管道实现server&client通信如何使用makefile连续生成可执行程序comm.hpp文件server.cc 服…
阅读更多...
如何通过 Baklib 平台实现知识共享（内含案例介绍）

如何通过 Baklib 平台实现知识共享（内含案例介绍）

在这个信息时代&#xff0c;知识被认为是最重要的资源之一。企业要想保持发展&#xff0c;就必须善于利用和管理知识。而知识管理则是一种涵盖人、过程和技术的活动&#xff0c;它通过收集、整理、传递和应用知识&#xff0c;使组织获得更高的效率、创造力和竞争力。本文将以知…
阅读更多...
【Linux】八、Linux进程信号详解（一）

【Linux】八、Linux进程信号详解（一）

目录 一、认识信号 1.1 生活中的信号 1.2 将1.1的概念迁移到进程 1.3 信号概念 1.4 查看系统定义信号列表 1.5 man 7 signal 1.6 解释1.2的代码样例 1.7 信号处理常见方式概览 二、产生信号 2.1 signal函数 2.2 通过终端按键产生信号 2.3 调用系统函数向进程发信号…
阅读更多...
前后端的身份认证【Node.js】

前后端的身份认证【Node.js】

1. 前后端的身份认证 1.1 Web 开发模式 目前主流的 Web 开发模式有两种&#xff0c;分别是&#xff1a; &#xff08;1&#xff09;基于服务端渲染的传统 Web 开发模式 &#xff08;2&#xff09;基于前后端分离的新型 Web 开发模式 服务端渲染的传统 Web 开发模式 服务端渲染…
阅读更多...
力扣面试题 08.06. 汉诺塔问题：思路分析+图文详解+代码实现

力扣面试题 08.06. 汉诺塔问题：思路分析+图文详解+代码实现

文章目录 第一部分&#xff1a;问题描述1.1 题目1.2 示例&#x1f340; 示例一&#x1f340; 示例二 1.3 提示 第二部分&#xff1a;思路分析第三部分&#xff1a;代码实现 第一部分&#xff1a;问题描述 1.1 题目 &#x1f3e0; 链接&#xff1a;面试题 08.06. 汉诺塔问题 -…
阅读更多...
windows安装rabbitmq和环境erlang(最详细版，包括对应关系)

windows安装rabbitmq和环境erlang(最详细版，包括对应关系)

写在最前&#xff1a;不知何时起安装一个mq需要翻无数文章才能安上了&#xff0c;没有一个讲全的&#xff0c;这里写一个详细的教程。 删除旧版本对应关系: 1.在官方文档中找到RabbitMQ版本对应的Erlang版本重新下载安装包文档RabbitMQ Erlang Version Requirements — Rabbit…
阅读更多...
大家副业都在做什么？csgo搬砖靠谱的副业推荐给你

大家副业都在做什么？csgo搬砖靠谱的副业推荐给你

从来没想过&#xff0c;以前只会玩CSGO的男孩子&#xff0c;现在居然能借助游戏赚到钱了&#xff01;甚至不需要什么专业的技巧&#xff0c;简简单单 在steam平台选择有利润的道具后&#xff0c;再上架到国内网易BUFF平台&#xff0c;赚取“信息差”差价而已&#xff01; 谁大…
阅读更多...
itop-3568开发板驱动学习笔记（19）内核工作队列

itop-3568开发板驱动学习笔记（19）内核工作队列

《【北京迅为】itop-3568开发板驱动开发指南.pdf》 学习笔记 文章目录 工作队列简介共享工作队列工作结构体初始化 work_struct调度工作队列函数共享工作队列实验 自定义工作队列创建工作队列函数调度和取消调度工作队列刷新工作队列函数删除工作队列函数 内核延时工作队列延时…
阅读更多...
成功上岸字节35K，技术4面＋HR面，耗时20天，真是不容易

成功上岸字节35K，技术4面＋HR面，耗时20天，真是不容易

这次字节的面试&#xff0c;给我的感触很深&#xff0c;意识到基础的重要性。一共经历了五轮面试&#xff1a;技术4面&#xff0b;HR面。 下面看正文 本人自动专业毕业&#xff0c;压抑了五个多月&#xff0c;终于鼓起勇气&#xff0c;去字节面试&#xff0c;下面是我的面试过…
阅读更多...
kali利用airgeddon破解WiFi （详细安装和使用教程）

kali利用airgeddon破解WiFi （详细安装和使用教程）

目录 前言 一&#xff0c;软件&硬件环境 二&#xff0c;前期配置 Airgeddon安装和调试 #自带 #安装方法一 #安装方法二 #注意 网卡的配置 #打开服务 #加载网卡 三&#xff0c;运行操作 #检查 #主菜单 #打开监听模式 #查看周围可以攻击的网络 #截取…
阅读更多...
vue - - - - - vue3全局配置挂载axios

vue - - - - - vue3全局配置挂载axios

vue3配置axios 1. 安装axios2. 配置拦截器3. vue.config.js代理配置4. 将axios全局挂载4. 文件内使用 1. 安装axios yarn add axios 2. 配置拦截器 创建文件 /src/utils/request.js "use strict";import Vue from "vue"; import axios from "axios&…
阅读更多...
从现在起，请你不要用ChatGPT再做这4件事了

从现在起，请你不要用ChatGPT再做这4件事了

ChatGPT已经火爆了快半年了吧&#xff0c;紧接着国内也开始推出了各种仿制品&#xff0c;我甚至一度怀疑&#xff0c;如果人家没有推出ChatGPT&#xff0c;这些仿制品会不会出现。而很多人也嗨皮得不行&#xff0c;搭着梯子爬过高墙&#xff0c;用ChatGPT做各种觉得新鲜的事。但…
阅读更多...
电脑可以开机但是无法进入到桌面怎么办？

电脑可以开机但是无法进入到桌面怎么办？

电脑可以开机但是无法进入到桌面怎么办&#xff1f;有用户的电脑可以正确启动&#xff0c;但是电脑启动之后&#xff0c;却无法进入到系统桌面&#xff0c;而且卡在加载系统的页面中&#xff0c;或者是出现错误代码蓝屏了。这些情况其实都可以通过U盘来重装一个系统&#xff0c…
阅读更多...
第七回：如何使用GirdView Widget

第七回：如何使用GirdView Widget

文章目录 概念介绍使用方法示例代码经验总结 我们在上一章回中介绍了Image Widget,本章回中将介绍 GirdView这种Widget&#xff0c;闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 在Flutter中使用GirdView表示网格状的布局&#xff0c;类似日常办公中使用的Excel…
阅读更多...
hashCode 如何计算？这一篇就够了！

hashCode 如何计算？这一篇就够了！

介绍 hashCode 中文‘散列码’&#xff0c;存在的意义是加快查找速率&#xff0c;可以在常数时间内进行寻址操作。 存在意义 它被定义在 Object 中&#xff0c;而 Object 类是一切类的父类&#xff0c;所以所有的方法都具有这个方法。 Java 中 hashCode 计算方式如下&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023