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，一经查实，立即删除！

相关文章

相机不动，机构动作----Hands Eyes

相机不动，机构动作----Hands Eyes

最近在研究 手眼标定，发现大家都需付费，搞啥子，说好的开源。。。 以相机在上固定不动，机械手为 EPSON_Robot 为例，详细的一步一步实例操作指引 EPSON_Robot 的192.168.0.1 2004 Server 详细操作步骤 1. 启动程序 运…
阅读更多...
DCDC降压模块

DCDC降压模块

一、项目介绍 在B站看到工科男孙老师发的DCDC模块视频，后面有提到这款芯片，于是就使用这款芯片自己设计了这款降压模块。 芯片的封装为TSOT23-8，对空间利用率高。 输入电压的范围为3-18V。 输出电压的范围为0-8V。 输出电流最…
阅读更多...
QILSTE H8-316QFO高亮橙光LED灯珠 发光二极管LED

QILSTE H8-316QFO高亮橙光LED灯珠 发光二极管LED

在当今电子技术领域，H8-316QFO型号的LED以其卓越的性能和可靠性 脱颖而出。本文将深入探讨这款LED的关键参数，以期为工程师和技术人员提供详尽的技术参考。 首先，H8-316QFO的物理特性不容忽视。其外观尺寸为3.2x1.5x0.8mm，小巧的…
阅读更多...
康耐视智能相机（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.关于代码的问题及解…
阅读更多...
自定义函数库

自定义函数库

求两点距离 double dis(double x1, double y1, double x2, double y2){return sqrt(pow(x2-x1, 2)pow(y2-y1, 2)); }判断闰年 bool isLeapYear(int year){return year%40 && year%100!0 || year%4000; }判断素数 bool isPrime(int num){if(num<2) return false;f…
阅读更多...
解决前后端发送验证码手机号登陆的sessionId不一致问题

解决前后端发送验证码手机号登陆的sessionId不一致问题

前端&#xff1a;鸿蒙开发ArkTs语言 后端&#xff1a;spring boot mybatis-plus框架 后端代码 PostMapping("/sendMsg")public R<String> sendMsg(RequestBody User user, HttpServletRequest request, HttpServletResponse response) {// 从User对象中提取用…
阅读更多...
基于多视角深度学习技术的乳腺X线分类：图神经网络与Transformer架构的研究|文献速递-生成式模型与transformer在医学影像中的应用速递

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

Title 题目 Mammography classification with multi-view deep learning techniques:Investigating graph and transformer-based architectures 基于多视角深度学习技术的乳腺X线分类&#xff1a;图神经网络与Transformer架构的研究 01 文献速递介绍 乳腺X线检查是乳腺癌…
阅读更多...
开发环境服务器 vs 生产环境服务器：开发与生产须分明

开发环境服务器 vs 生产环境服务器：开发与生产须分明

【背景】作为开发者&#xff0c;我们在不同的阶段都与两种服务器环境打交道——开发环境服务器和生产环境服务器。虽然听起来名字相似&#xff0c;但它们的职责和工作方式简直是天差地别&#xff01; 不知道朋友们有没有跟我一开始刚了解的时候的一些疑惑&#xff0c;因为刚开始…
阅读更多...
Maxscript移动、旋转和缩放

Maxscript移动、旋转和缩放

3DMAX对象最常用的三种变换方式是移动、旋转和缩放。本文将详细介绍这些是如何工作的。移动&#xff1a; 使用move函数处理移动&#xff1a; move <object> <vector> 按矢量移动对象&#xff1a; c cone() --c is at 0,0,0 move c [0,1,0] --after this l…
阅读更多...
恢复删除的文件:6个免费Windows电脑数据恢复软件

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

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

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

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

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

​构建约束是一种在 Go 语言中控制源文件编译条件的方法&#xff0c;它可以让您指定某些文件只在特定的操作系统、架构、编译器或 Go 版本下编译&#xff0c;而在其他环境中自动忽略。这样可以方便您针对不同的平台或场景编写不同的代码&#xff0c;实现条件编译的功能。 构建…
阅读更多...
全国青少年信息学奥林匹克竞赛（信奥赛）备考实战之计数器与累加器实战题目

全国青少年信息学奥林匹克竞赛（信奥赛）备考实战之计数器与累加器实战题目

题目1—三个连续的自然数计算 问题描述&#xff1a; 若有3个连续的自然数&#xff0c;已知第一个自然数为100&#xff0c;请编写程序输出这3个自然数。 输入格式&#xff1a; 无 输出格式&#xff1a; 三行三个整数 输入输出样例&#xff1a; 输入样例 输出样例 无 1…
阅读更多...
人工智能大语言模型起源篇（二），从通用语言微调到驾驭LLM

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

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

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

为了进行潮流计算&#xff0c;通常可以使用像MATPOWER这样的电力系统分析工具包&#xff0c; 在MATLAB中的MATPOWER工具包中&#xff0c;多个不同的系统模型被定义为测试案例&#xff08;case&#xff09;。这些测试案例用于模拟和分析电力系统中的潮流计算、最优潮流问题、稳…
阅读更多...
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…
阅读更多...
使用 ADB (Android Debug Bridge) 工具来截取 Android 设备的屏幕截图

使用 ADB (Android Debug Bridge) 工具来截取 Android 设备的屏幕截图

可以使用 ADB (Android Debug Bridge) 工具来截取 Android 设备的屏幕截图。以下是具体的操作步骤&#xff1a; 1. 连接设备 确保 Android 设备通过 USB 或网络连接到电脑&#xff0c;并运行以下命令检查连接状态&#xff1a; adb devices2. 截取屏幕截图 运行以下命令将设…
阅读更多...
TypeScript 的崛起：全面解析与深度洞察

TypeScript 的崛起：全面解析与深度洞察

一、背景与起源 &#xff08;一&#xff09;JavaScript 的局限性 类型系统缺失 难以在编码阶段发现类型相关错误&#xff0c;导致运行时错误频发。例如&#xff0c;将字符串误当作数字进行数学运算&#xff0c;可能在运行时才暴露问题。函数参数类型不明确&#xff0c;容易传入…
阅读更多...
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的兴起与发展前景 论文地址&#xff1a;https://arxiv.org/pdf/2309.07864.pdf 项目地址&#xff1a;https:/github.com/WooooDyy./LLM-Agent–Paper-List 摘要 长期以来&#xff0c;人类一直在追求等同于或超越人类水平的人工智能(A)&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023