uni-app H5端使用注意事项 【跨端开发系列】

 

 🔗 uniapp 跨端开发系列文章：🎀🎀🎀

  1. uni-app 组成和跨端原理    【跨端开发系列】 
  2. uni-app 各端差异注意事项 【跨端开发系列】
  3. uni-app 离线本地存储方案 【跨端开发系列】
  4. uni-app UI库、框架、组件选型指南 【跨端开发系列】
  5. uni-app 蓝牙开发 【特别专题】
  6. uni-app 导航栏开发指南 【跨端开发系列】
  7. uni-app 原生控件层级过高无法覆盖的解决方案 【跨端开发系列】
  8. uni-app 设置缓存过期时间【跨端开发系列】

一、介绍 🎯

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

​

二、功能框架图 📋

从下面 uni-app 功能框架图可看出， uni-app 在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

​

三、使用方式 📖

  1. 打开 uni-app 项目下的 vue 文件。
  2. 点击 菜单 运行-> 运行到浏览器 -> Chrome 。
  3. 在 Chrome 內打开 调试模式（右键->检查）开启 设备模拟 ，模拟移动设备 。
  4. HBuilderX 修改代码后会自动刷新 chrome 的页面。
  5. 审查元素，每个页面都在 page 节点下，pageHead 是 微信 和 app 下的原生导航栏，即   pages.json 里配的导航栏。pageBody 是导航栏下的页面内容。所有标签为了避免和标准H5标签冲突，都加了 U前缀 。
  6. 断点 debug ，点 chrome 控制台的 source ，可以给 js 打断点调试。
    找到同名的文件，如果没有同名 vue 文件，一般会有一个同文件名的 js 文件，此时会提示检测到 sourcemap ，是否引入，点允许。然后就会有同名的 vue 文件。如果找不到，则把焦点放到 source 的代码区，然后敲 ctrl+p 打开文件查找窗口，然后敲入 vue 页面名字，然后打开 vue 页面。这个 vue 里，只有 js，没有 tag 和 css  ，但可以打断点 调试。

四、发布方式📤

  1. 配置发行后的路径（发行在网站 根目录 可不配置），比如发行网站路径是www.xxx.com/html5，在 manifest.json 可视化界面 - H5配置 - 运行的基础路径中设置，也可以在源码视图内编辑 h5 节点， router 下增加 base 属性为 html5 。可视化界面设置：

源码视图设置：

  1. 点击菜单 发行 -> H5 。
  2. 在当下项目下的 unpackage/dist/build/h5 目录找到出的资源，部署服务器（或者使用本地服务器预览，不要直接在浏览器打开html文件）。如果发布使用的 history 模式，需要服务端配合，参考：后端配置方式。

五、跨端注意🪡

uni-app由 uni 的通用 api 和平台专有 api 组成，H5版也不例外。可以使用 uni 的通用 api 完成很多工作，也可以在条件编译里调用 H5版 的浏览器专有api。

  • 🚫虽然 dom、window 都可以用了，但如果要跨端，还是少写这样的代码好。
  • 🚫强烈不建议使用浏览器的跳转页面的api 。
  • ✅H5仍应该使用 pages.json 管理页面。
  • ✅H5的 条件编译 写法是把之前的 app-plus 换成 H5 。敲 ifdef 会有代码助手提示。
//#ifdef H5  
this.titleHeight = 44  
//#endif

🔸条件编译目前有 7 个平台，APP-PLUS、APP-PLUS-NVUE、MP-WEIXIN、H5、MP、MP-BAIDU、MP-ALIPAY。

🔸其中 APP-PLUS-NVUE 是 APP-PLUS 的子集，用于 weex 下单独写专用代码。
为了方便多平台选择，还引入了 ~#ifndef~ ，也就是 ifdef 的 not ，反向选择。以及或语法，及||。

🔸这些命名都是c语言条件编译的标准命名。

// #ifndef H5  
console.log("这段代码编译到非H5平台");  
// #endif

开发者之前为微信或 app 写的代码，H5的平台不支持时，需要注意把这些代码放到条件编译里。
经过这样的处理，之前做好的App或小程序才能正常运行到H5版里。

小程序版在UI上，尤其是导航栏上限制较多，H5在这里是参考了app，默认解析了pages.json下的app-plus的节点，实现了titleNView、buttons、下拉刷新（下拉刷新只有circle方式，因为只有这样的下拉刷新在H5版上可以保障流畅体验）

六、组件和API支持情况✅

目前的H5版，还没有100%实现uni的所有api，但大部分已经完成，具体参考uniapp文档。

七、第三方组件支持 ✅

  • 支持 mpvue 组件
  • 支持普通 vue 组件（仅H5平台）
  • 支持 微信小程序 组件（HBuilderX2.5.0+开始支持编译到H5）
  • 支持 nvue

八、vue语法支持 ✅

H5版支持完整的vue语法，同时校验器也校验了更严格的vue语法，有些写法不规范会报警。比如data后面写对象会报警，必须写 function 。

九、注意事项（必看）🔎

  • 编译为H5版后生成的是单页应用，SPA。如果想要 seo 优化，首页可以在 template模板 中配置 keyword 。二级页不支持配置。但一个更酷的方式是用 uni-app 直接发布一版百度小程序，搜索权重更高。
  • 编译后看日志和错误，要看浏览器的控制台，而不是HBuilderX的控制台。浏览器的控制台会有错误提示。
  • 网络请求（request、uploadFile、downloadFile等）在浏览器存在跨域限制（CORS、Cross-Origin），解决方案详见：uni-app H5跨域问题解决方案（CORS、Cross-Origin） - DCloud问答
  • APP 和 微信 的 原生导航栏 和 tabbar 下，元素区域坐标是不包含 原生导航栏 和 tabbar 的。而 H5 里 原生导航栏 和 tabbar 是 div 模拟实现的，所以元素坐标会包含 导航栏 和 tabbar 的高度。为了优雅的解决 多端 高度定位 问题，uni-app 新增了2个 css 变量： --window-top 和   --window-bottom ，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生 tabbar 上方悬浮一个菜单，之前写 bottom:0 。这样的写法编译到 h5 后，这个菜单会和tabbar 重叠，位于屏幕底部。而改为使用 bottom:var(--window-bottom)，则不管在app下还是在h5下，这个菜单都是悬浮在 tabbar 上浮的。这就避免了写条件编译代码。当然你也仍然可以使用 H5 的条件编译处理界面的不同。
  • CSS內使用 vh 单位的时候注意 100vh 包含导航栏，使用时需要减去 导航栏 和 tabBar 高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。
  • event 对象上使用的 mpvue 独有的属性需调整（比如 event.pageY，可能需要加上44px的导航栏高度）。
  • fixed 定位的组件有可能遮挡框架内置UI组件，如果不希望遮挡可以分平台判断，在H5平台避开内置UI。
  • 正常支持 rpx 。px是真实物理像素。🚫暂不支持通过设 manifest 的 "transformPx" : true ，把px当动态单位使用。
  • 使用 罗盘、地理位置、加速计 等相关接口需要使用 https 协议，本地预览（localhost）可以使用 http 协议。
  • PC 端 Chrome 浏览器模拟器设备测试的时候，获取定位 API 需要连接谷歌服务器，需要翻墙。
  • 组件内（页面除外）🚫不支持 onLoad 生命周期。
  • 为 避免 和内置 组件冲突，自定义组件请 加上前缀（但不能是 u 和 uni ）。比如可使用的自定义组件名称：my-view、m-input、we-icon，🚫例如不可使用的自定义组件名称：u-view、uni-input。如果已有项目使用了可能造成冲突的名称，请修改名称。另外 微信小程序 下自定义组件名称 不能以wx 开头。
  • 在 tabBar 页面，如果 page 高度设置为100%时，页面超出滚动会导致底部被 tabbar 遮挡，可在 tabbar 页面 去掉 height:100% 或者改用 min-height:100% 。
  • 编写组件时需要遵守vue的规范，之前在app端和小程序端能使用的一些不规范写法需要纠正，比如：🚫不要修改 props 的值、🚫组件最外层 template 节点下不允许包含多个节点。
  • 开发App时，🚫不可在H5预览后直接云打包。需在HBuilderX里点运行-选择运行到手机，真机调试无误后再打包。
  • H5端 “网络不给力” 原因及解决办法：https://ask.dcloud.net.cn/article/37065。

   🔗 uniapp 跨端开发系列文章：🎀🎀🎀

  1. uni-app 组成和跨端原理    【跨端开发系列】 
  2. uni-app 各端差异注意事项 【跨端开发系列】
  3. uni-app 离线本地存储方案 【跨端开发系列】
  4. uni-app UI库、框架、组件选型指南 【跨端开发系列】
  5. uni-app 蓝牙开发 【特别专题】
  6. uni-app 导航栏开发指南 【跨端开发系列】
  7. uni-app 原生控件层级过高无法覆盖的解决方案 【跨端开发系列】
  8. uni-app 设置缓存过期时间【跨端开发系列】

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

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

相关文章

DCDC降压模块

DCDC降压模块

一、项目介绍 在B站看到工科男孙老师发的DCDC模块视频，后面有提到这款芯片，于是就使用这款芯片自己设计了这款降压模块。 芯片的封装为TSOT23-8，对空间利用率高。 输入电压的范围为3-18V。 输出电压的范围为0-8V。 输出电流最…
阅读更多...
康耐视智能相机（Insight）通过ModbusTCP发送字符串到倍福（BECKHOFF）PLC中

康耐视智能相机（Insight）通过ModbusTCP发送字符串到倍福（BECKHOFF）PLC中

文章目录 1.背景2.分析3.实现3.1.PLC的ModbusTCP_Server3.1.1.安装TF6250-Modbus-TCP3.1.2.PLC设置 3.2.智能相机的ModbusTCP_Client3.2.1.了解ModbusTCP的协议3.2.2.根据协议写代码3.2.2.1.纯函数代码3.2.2.2.脚本代码 3.2.3.非脚本处理时的代码逻辑图3.2.4.关于代码的问题及解…
阅读更多...
基于多视角深度学习技术的乳腺X线分类：图神经网络与Transformer架构的研究|文献速递-生成式模型与transformer在医学影像中的应用速递

基于多视角深度学习技术的乳腺X线分类：图神经网络与Transformer架构的研究|文献速递-生成式模型与transformer在医学影像中的应用速递

Title 题目 Mammography classification with multi-view deep learning techniques:Investigating graph and transformer-based architectures 基于多视角深度学习技术的乳腺X线分类：图神经网络与Transformer架构的研究 01 文献速递介绍 乳腺X线检查是乳腺癌…
阅读更多...
恢复删除的文件:6个免费Windows电脑数据恢复软件

恢复删除的文件:6个免费Windows电脑数据恢复软件

数据恢复软件可帮助您从众多存储设备中恢复损坏或删除的数据。您可以使用这些文件恢复软件来检索文件、文档、视频、图片等。这些应用程序支持多种标准文件格式，如 PNG、RTF、PDF、HTML、JPG、MP3 等。 经过超过 75 小时的研究，我分析了 25 最佳免费数据…
阅读更多...
探索 Python 编程调试案例：程序平均值的修复过程

探索 Python 编程调试案例：程序平均值的修复过程

💝💝💝Python 作为一门广泛应用的编程语言，其编程过程并非总是一帆风顺。即使是经验丰富的程序员，也会在代码中遇到各种错误。而调试Python代码过程，也是学习中不可避免的步骤。 今天来看一个简单的案例。…
阅读更多...
简单了解一下 Go 语言构建约束？

简单了解一下 Go 语言构建约束？

​构建约束是一种在 Go 语言中控制源文件编译条件的方法，它可以让您指定某些文件只在特定的操作系统、架构、编译器或 Go 版本下编译，而在其他环境中自动忽略。这样可以方便您针对不同的平台或场景编写不同的代码，实现条件编译的功能。 构建…
阅读更多...
人工智能大语言模型起源篇（二），从通用语言微调到驾驭LLM

人工智能大语言模型起源篇（二），从通用语言微调到驾驭LLM

上一篇：《人工智能大语言模型起源篇（一），从哪里开始》 （5）Howard 和 Ruder 于2018年发表的《Universal Language Model Fine-tuning for Text Classification》，https://arxiv.org/abs/1801.06…
阅读更多...
基于MATLAB的电力系统潮流计算

基于MATLAB的电力系统潮流计算

为了进行潮流计算，通常可以使用像MATPOWER这样的电力系统分析工具包， 在MATLAB中的MATPOWER工具包中，多个不同的系统模型被定义为测试案例（case）。这些测试案例用于模拟和分析电力系统中的潮流计算、最优潮流问题、稳…
阅读更多...
Unity屏幕截图、区域截图、读取图片、WebGL长截屏并下载到本地jpg

Unity屏幕截图、区域截图、读取图片、WebGL长截屏并下载到本地jpg

Unity屏幕截图、区域截图、读取图片、WebGL长截屏并下载到本地jpg 一、全屏截图并保存到StreamingAssets路径下 Texture2D screenShot;//保存截取的纹理public Image image; //显示截屏的Imagepublic void Jietu(){StartCoroutine(ScrrenCapture(new Rect(0, 0, Screen.width…
阅读更多...
Moretl无人值守日志采集工具

Moretl无人值守日志采集工具

永久免费: 至Gitee下载 使用教程: Moretl使用说明 用途 定时全量或增量采集工控机,电脑文件或日志. 优势 开箱即用: 解压直接运行.不需额外下载.管理设备: 后台统一管理客户端.无人值守: 客户端自启动,自更新.稳定安全: 架构简单,兼容性好,通过授权控制访问. 架构 技术架…
阅读更多...
The Rise and Potential of Large Language ModelBased Agents:A Survey---摘要、背景、引言

The Rise and Potential of Large Language ModelBased Agents:A Survey---摘要、背景、引言

题目 基于大语言模型的Agent的兴起与发展前景 论文地址：https://arxiv.org/pdf/2309.07864.pdf 项目地址：https:/github.com/WooooDyy./LLM-Agent–Paper-List 摘要 长期以来，人类一直在追求等同于或超越人类水平的人工智能(A)，…
阅读更多...
lc46全排列——回溯

lc46全排列——回溯

46. 全排列 - 力扣（LeetCode） 法1：暴力枚举 总共n!种全排列，一一列举出来放入list就行，关键是怎么去枚举呢？那就每次随机取一个，然后删去这个，再从剩下的数组中继续去随机选一个&a…
阅读更多...
Spring Boot教程之二十五: 使用 Tomcat 部署项目

Spring Boot教程之二十五: 使用 Tomcat 部署项目

Spring Boot – 使用 Tomcat 部署项目 Spring Boot 是一个基于微服务的框架，在其中创建可用于生产的应用程序只需很少的时间。Spring Boot 建立在 Spring 之上，包含 Spring 的所有功能。如今，它正成为开发人员的最爱，因为它是一个…
阅读更多...
【C语言篇】C 语言总复习（下）：点亮编程思维，穿越代码的浩瀚星河

【C语言篇】C 语言总复习（下）：点亮编程思维，穿越代码的浩瀚星河

我的个人主页 我的专栏：C语言，希望能帮助到大家！！！点赞❤ 收藏❤ 在C语言的世界里，结构体和联合体以及文件操作都是非常重要且实用的知识板块，掌握它们能帮助我们更高效地组织数据以及与外部文…
阅读更多...
CNCF云原生生态版图-项目和产品综合分析

CNCF云原生生态版图-项目和产品综合分析

CNCF云原生生态版图-项目和产品综合分析 CNCF云原生生态版图-项目和产品综合分析整体统计分析中国研发人员贡献项目和产品其中，纳入 CNCF 管理的开源项目 链接 CNCF云原生生态版图-项目和产品综合分析 整体统计分析 在对云原生技术选型时，优先选择经过 …
阅读更多...
VScode、Windsurf、Cursor 中 R 语言相关快捷键设置

VScode、Windsurf、Cursor 中 R 语言相关快捷键设置

前言 在生物信息学数据分析中，R语言是一个不可或缺的工具。为了提高R语言编程效率，合理设置快捷键显得尤为重要。本文介绍在VSCode Windsurf Cursor 中一些实用的R语言快捷键设置，让非 Rstudio 的 IDE 用起来得心应手😑 操作种…
阅读更多...
分布式任务调度平台xxl-job源码学习

分布式任务调度平台xxl-job源码学习

XXL-JOB是一个分布式任务调度平台，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。 官网：https://www.xuxueli.com/xxl-job/ github：https://github.com/xuxueli/xxl-…
阅读更多...
Macbookpro M1 IDEA中安装mysql

Macbookpro M1 IDEA中安装mysql

一：安装与连接数据库 1. 首先在mysql中创建一个初始数据库：idea_db，如示： 2.打开IDEA,如果最右侧没有database窗口，则在插件那里下载“Database navigator”,稍后重启一下即可； 点击最右侧Database---->…
阅读更多...
Linux内核结构及源码概述

Linux内核结构及源码概述

参考：深入分析LINUX内核源码 深入分析Linux内核源码 (kerneltravel.net) Linux 是一个庞大、高效而复杂的操作系统，虽然它的开发起始于 Linus Torvalds 一个人，但随着时间的推移，越来越多的人加入了 Linux 的开发和对它的不断完善…
阅读更多...
[Unity] Text文本首行缩进两个字符

[Unity] Text文本首行缩进两个字符

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 比如： 效果： 代码： TMPtext1.text "\u3000\u3000" "选择动作类型：";
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023