热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

uniapp与HTML的区别是什么

区别:1、uniapp是一个框架,而HTML是一种标记语言。2、组件标签有差异;例p改成view,span、font改成text,a改成navigator,img改成image。3、uniapp不支持dom操作,HTML支持。

区别:1、uniapp是一个框架,而HTML是一种标记语言。2、组件/标签有差异;例p改成view,span、font改成text,a改成navigator,img改成image。3、uniapp不支持dom操作,HTML支持。

其实老的HTML标签也可以在uni-app里使用,uni-app编译器会在编译时把老标签转为新标签。但不推荐这种用法,调试H5端时容易混乱,基于元素的选择器也会出问题。

推荐:《uni-app开发教程》

除了改动外,新增了一批手机端常用的新组件

  • scroll-view 可区域滚动视图容器

  • swiper 可滑动区域视图容器

  • icon 图标

  • rich-text 富文本(不可执行js,但可渲染各种文字格式和图片)

  • progress 进度条

  • slider 滑块指示器

  • switch 开关选择器

  • camera 相机

  • live-player 直播

  • map 地图

  • cover-view 可覆盖原生组件的视图容器

    cover-view需要多强调几句,uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。如需覆盖原生组件,比如在map上加个遮罩,则需要使用cover-view组件

除了内置组件,还有很多开源的扩展组件,把常用操作都进行封装,DCloud建立了插件市场收录这些扩展组件,详见插件市场

js的变化

运行环境从浏览器变成v8引擎

  • 标准js语法和api都支持,比如if、for、settimeout、indexOf等
  • 但浏览器专用的window、document、navigator、location对象,只有在浏览器中才有,app和小程序都不支持,这意味着依赖document的很多HTML的库,比如jqurey无法使用。但是app和小程序支持web-view组件,里面可以加载标准HTML,这种页面仍然支持浏览器专用对象window、document、navigator、location

以前的dom操作,改成vue的MVVM模式

  • alert,confirm 改成 uni.showmodel
  • ajax 改成 uni.request
  • COOKIE、session 没有了,local.storage 改成 uni.storage
  • uni-app的js api还有很多,但基本就是小程序的api,把wx.xxx改为uni.xxx即可

css的变化

  • 选择器有2个变化:*选择器不支持;元素选择器里没有body,改为了page
  • 单位方面,px无法动态适应不同宽度的屏幕,rem只能用于h5、rpx只能用于微信小程序。为此uni-app新增了 upx ,通吃所有端、所有屏幕宽度的动态单位 upx
  • uni-app推荐使用flex布局,并默认就是flex布局

更多编程相关知识,请访问:编程视频!!

以上就是uniapp与HTML的区别是什么的详细内容,更多请关注其它相关文章!


推荐阅读
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 本文详细解析了 Yii2 框架中视图和布局的各种函数,并综述了它们在实际开发中的应用场景。通过深入探讨每个函数的功能和用法,为开发者提供了全面的参考,帮助他们在项目中更高效地利用这些工具。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 本文详细介绍了如何利用CSS技术对链接下划线进行个性化定制和美化,涵盖了多种实用技巧和方法。通过对CSS属性的灵活运用,可以实现不同风格的下划线效果,提升网页的视觉体验。文中不仅提供了基础的代码示例,还结合实际案例进行了深入解析,帮助读者更好地理解和应用这些技巧。此外,文章还引用了《CSS2.0中文手册》中的相关内容,增加了技术的权威性和实用性。 ... [详细]
  • PHP自学必备:从零开始的准备工作与工具选择 ... [详细]
  • 技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
  • 如何在页面底部添加倾斜样式效果? ... [详细]
  • 基于Java和SSM框架的志愿者管理平台源代码分析与实现
    本研究针对基于Java和SSM框架的志愿者管理平台进行了详细的源代码分析与实现。该平台属于Java Web项目,采用Java EE技术栈,并结合了Spring、Spring MVC和MyBatis三大核心框架(非开源)。项目名称为“基于SSM的志愿者管理系统”,旨在提升志愿者管理的效率和规范性。通过对系统架构、模块设计及关键代码的深入解析,本文为开发者提供了全面的技术参考和实践指导。 ... [详细]
  • 本文详细介绍了 jQuery 的入门知识与实战应用,首先讲解了如何引入 jQuery 库及入口函数的使用方法,为初学者提供了清晰的操作指南。此外,还深入探讨了 jQuery 在实际项目中的多种应用场景,包括 DOM 操作、事件处理和 AJAX 请求等,帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • 如何撰写PHP电商项目的实战经验? ... [详细]
  • wxParse 0.3:微信小程序中的高级 HTML 和 Markdown 富文本解析器,全面支持多级嵌套与 Emoji 表情
    wxParse 0.3 是一款专为微信小程序设计的高级富文本解析器,支持 HTML 和 Markdown 转换为 WXML 可视化格式。该组件不仅能够处理复杂的多级嵌套结构,还全面支持 Emoji 表情,极大地提升了内容展示的多样性和用户体验。 ... [详细]
  • 阿里“云开发“小程序(uniCould)
    博主ps:网上资料少的可怜,哎,腾讯云涨价了,论服务器,我肯定选的阿里,再着你们对比下unico ... [详细]
author-avatar
淇蒴_192
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有