多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序(uni app框架)

前言

hello 小伙伴们,现在我已经正式入坑 uni-app 了。uni-app 已经发布好几个月了,期间也是踩坑无数,但是官方秉承着不抛弃不放弃的精神,积极解决开发者的各种简单的、复杂的问题,在此表示感谢。我想还有小伙伴正在持观望状态,还没想好要不要使用 uni-app,而且近些日子以来,许多跨端框架也纷纷出现在了大家的视线当中,让迷茫的我们更加不知道如何对比选择了。 uni-app 入坑指南,方便大家更好的了解 uni-app 本篇只讲述 uni-app,不与其他类似框架进行对比

一、什么是 uni-app

  1. uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOSAndroidH5、小程序等多个平台。详情点击 uni-app 官方文档
  2. uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势 。
  • 跨端数量更多
  • 平台能力不受限
  • 性能体验更优秀
  • 周边生态丰富
  • 学习成本低
  • 开发成本低

二、使用 uni-app 的前置条件

好多小伙伴可能要问了:哇,一套代码可以编译到那么多平台,那是不是我学习起来很麻烦啊,我只会vue啊,不会小程序,也不会原生开发,能不能学会uni-app呢。

这个问题问的就很棒,那么如果要学会uni-app需要会那些技能呢?答:你如果会vue,基本上就可以解决大多数问题了。多读几遍文档,你会发现开发起来很顺畅 。

但是为了更好的跨端开发,我们肯定是要统一规范的:

  • 页面组件我们要遵循Vue 单文件组件 (SFC) 规范
  • 组件标签靠近微信小程序规范
  • 接口能力(JS API)靠近微信小程序规范
  • 数据绑定及事件处理靠近 Vue.js 规范,同时补充了App及页面的生命周期
  • 为兼容多端运行,建议使用flex布局进行开发

三、开发工具

使用官方推出的 HBuilderX 编辑器

可视化的方式比较简单,HBuilderX 内置相关环境,开箱即用,无需配置node 。

四、使用Vue.js

几乎全支持 Vue官方文档:模板语法

当然,说的是几乎,那肯定有不支持的情况下啊, 下面给大家罗列一下不支持的情况 :

  • 不支持纯HTML
  • 不支持部分复杂的 JavaScript 渲染表达式
  • 不支持过滤器

五、小程序(微信、支付宝、百度、头条)

当然如果要开发小程序,不可避免的,我们肯定是要知道不同平台下的小程序规范的 。当然知道了这些规范之后,我们开发起来就比较简单了。uni-app 给我们把不同平台的小程序 API 几乎都封装了 ,只需要将前缀替换为 uni 即可 举例说明:

我们调用微信小程序的 request 请求

多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序(uni app框架)多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序(uni app框架)

我们使用 uni-apprequest 请求

有没有发现什么不一样的?对了,除了前缀 wx替换为uni之外,其他的地方一摸一样,是不是这样开发起来就很一贼了呢 。

六、App(ios、安卓)

uni-app 不仅可以使用绝大多数的小程序相关的 API,同时也可以使用 5 API 很好的补足了小程序上一些还没有实现的功能,是不是很美好?而且开发方式还是跟上述一样,没有变化,是不是更美好了呢。

七、H5

h5 就不多说了,基本上跟常规 vue 开发没有什么区别, 唯一需要注意的是,有些 API 是不能在 h5 中使用,主要看文档,看文档,看文档 。

八、如何实现跨端

当然虽说是跨端,但是肯定是有情况是不支持的,比如遇到有些平台特有的 API 怎么办 ?

不用担心,这些问题 uni-app 都为你想到了 那就是使用条件编译

九、条件编译

详细看文档)在 C 语言中,通过 #ifdef#ifndef 的方式,为 windowsmac 等不同 os 编译不同的代码 uni-app 参考这个思路,为 uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现 。

条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 // 注释css 使用 / 注释 /vue/nvue 模板里使用 **

举个例子:

多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序(uni app框架)多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序(uni app框架)多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序(uni app框架)多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序(uni app框架)

是不是感觉很方便 ?这样就可以很巧妙的去区分不同的平台了,具体的请详细看文档,看文档,看文档 。

十、注意事项

  • H5 端,不能使用浏览器自带对象,比如 documentwindowlocalstoragecookie 等,更不能使用 jquery 等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发,uni 提供的 api 足够完成业务。
  • uni-apptag 同小程序的 tag,和 HTMLtag 不一样,比如 div 要改成 viewspan 要改成 texta 要改成 navigator

以上,所有内容(除了我自己说的话以外)都来自 uni-app官方文档,请注意多看文档,多看文档,多看文档。

结语

ok,到这里入坑基本完毕。接下会讲述如何使用 uni-app 从零开始开发一个完整的音乐应用,尽情期待!

希望本文能帮助到您!

点赞 转发,让更多的人也能看到这篇内容(不收藏不点赞,都是耍流氓-_-)

想了解更多前端知识欢迎评论区留言或私信我!

欢迎关注公众号:fkdcxy 疯狂的程序员丶 获取更多前端教程!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年4月4日 上午8:42
下一篇 2023年4月4日 上午8:52

相关推荐

  • 内部控制制度的原则(内部控制制度的原则包括)

    1、合法性原则 依法办事是政府采购工作的首要准则,也是制定政府采购内部控制制度应遵守的首要原则。政府采购内部控制制度建设应当严格遵守《政府采购法》、《招标投标法》等相关法律法规的规…

    科研百科 2024年1月19日
    133
  • 业主方项目管理目标(业主方项目管理)

    业主方项目管理业主方项目管理、业主分布、交通工具管理、流水、商家信息流通等,可能需要这些具体项目。 公司要求我们所有产品都需要使用免费资源的,个人觉得价格和价格都有限制。有关部门联…

    科研百科 2024年9月26日
    25
  • 医科大学科研项目申报时间

    医科大学科研项目申报时间 医科大学的科研项目申报时间是一年又一年,不断流逝。这些项目涉及到许多领域,包括医学研究、生物学研究、环境科学等等。医科大学的科学家们致力于发现新的医学技术…

    科研百科 2024年4月8日
    72
  • 项目管理部是做什么的

    项目管理部是一个重要的职能部门,负责协调和管理团队项目中的各种活动,确保项目按时、按质、按预算完成。 项目管理部的职责包括: 1. 制定项目计划:项目管理部负责制定项目的详细计划,…

    科研百科 2024年8月21日
    33
  • research和investigate

    研究 研究是一种探索和发现新知识的过程。它是科学和技术领域中的重要一环,可以帮助我们更好地了解世界,并为我们的生活和工作提供创新的解决方案。 research 需要广泛的知识和深入…

    科研百科 2024年10月21日
    0
  • “新常态下中日文化文学比较研究”国际学术研讨会在长春召开(中日文学与文化交流史研究)

    中国社会科学网讯(记者赵徐州 曾江)6月11—13日,“新常态下中日文化文学比较研究”国际学术研讨会在长春理工大学召开。来自中日两国20余所大学与研究机构的70余位学者汇聚一堂,共…

    科研百科 2024年6月18日
    57
  • 农机化所新技术大幅提升枸杞机械化采收效率

      日前,农业农村部南京农业机械化研究所果蔬茶创新团队依托中国农业科学院科技创新工程、国家重点研发计划项目等重大项目支撑,联合有关机械制造公司、宁夏农林科学院攻关完成的“枸杞机械化…

    科研百科 2022年5月14日
    388
  • pmp与信息系统项目管理师互认

    PMP与信息系统项目管理师互认为 随着信息技术的不断发展,信息系统项目管理师 (IPM) 的需求也越来越大。作为 IPM 的认证考试,pmp 考试不仅考察了项目管理的知识和技能,还…

    科研百科 2025年1月25日
    0
  • 蚕业所四个科研项目被商务部评为优秀项目

      国家商务部办公厅日前下达文件,对经过地方及有关部门推荐、行业专家评审产生出的全国99项国家茧丝绸发展风险基金发展性项目“优秀项目”作出表彰,我院蚕业研究所有四个项目榜上有名。四…

    科研百科 2022年5月20日
    245
  • 协同办公报告(协同办公方案)

    协同办公方案 协同办公是指多个团队成员在一个平台上共享信息和资源,协调工作,完成共同目标的过程。在现代企业中,协同办公已经成为了一项必不可少的技能,因为它可以提高员工的工作效率,减…

    科研百科 2024年6月3日
    76