专栏首页极乐技术社区想跨端开发小程序?这个最流行的跨端框架一定要学习!

想跨端开发小程序?这个最流行的跨端框架一定要学习!

从最早发布的微信小程序,到后来的支付宝小程序、字节跳动小程序、百度小程序、QQ小程序,还有最近发布的360小程序,面对这么多套的代码,开发者该如何开发呢?

当业务要求同时在不同的端都要展现时候,针对不同的端去编写多套代码的成本显然非常高。这时候只需编写一套代码,就能够适配多端的能力就显得尤为需要。

今天就来给大家介绍一款,使用Vue的跨端框架——uni-app

1

uni-app 框架简介

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,可编译到 iOSAndroidH5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等平台。

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

  • 开发者/案例数量更多
  • 跨端抹平度/扩展灵活性(通过条件编译,调用专有能力而不影响其他平台)
  • 性能体验更优秀(App 端支持 weex 渲染,带来更流畅的用户体验。)
  • 周边生态丰富(推出插件市场,能够提供较多的组件和模板,真正做到开箱即用)
  • 学习成本低(采用Vue.js 语法 + 小程序 API)
  • 开发成本低。

虽然不同端框架环境千变万化,无论各类小程序WeexReact-NativeFlutter快应用,它们万变不离其宗的是MVVM架构设计思想。uni-app希望既能用一套代码完成所有端需求,将相同的业务逻辑完成收敛到同一层系统里面,又不会因为项目的抽象一致导致可维护性变差。

2

开发工具

通过 HBuilderX 可视化界面, HBuilderX 内置相关环境,开箱即用,无需配置 nodejs。

开发语言

使用Vue.js + 小程序 API,进行开发。

  • 数据绑定及事件处理同 Vue.js 规范,同时补充了 App页面的生命周期
  • uni-app 帮我们把不同平台的小程序API 几乎都封装了 ,只需要将前缀替换为 uni 即可 举例说明:

在微信中发送 request 请求:

uni-app中发送 request 请求:

了解微信小程序的你,是不是感觉很简单呢?无非就是把 wx 前缀 换成了 uni 而已,而且uni.request是全端通用的 ajax 请求 API 哦,最大程度的降低开发者的学习成本。

3

如何解决跨端兼容问题

每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。

uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。

4

nvue 模式

uni-app 里根据编译配置不同,可以使用 weex 的组件,也可以使用小程序组件(即uni-app组件)。编写页面时页面后缀名为 .nvue (native vue 的缩写)

uni-app App 端内置 weex 渲染引擎,提供了原生渲染能力,让uni-app在App端有更好的表现。

nvue 相当于给 weex 补充了大量 uni-app 的组件和 api,以及丰富的 Plus APINative.js、原生插件。

5

官方 ui 库,uni-ui

uni-uiDCloud提供的一个跨端ui库,它是基于vue组件的、flex 布局的、无 dom跨全端 ui

web 开发中有的开发者习惯用一个ui库完成所有开发,但在uni-app体系中,推荐开发者首先使用性能更高的基础组件,然后按需引入必要的扩展组件。

看到这里你是不是觉得特别心动了呢?别着急,让我们看一下uni-app的开发规范。

6

uni-app 开发规范

为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:

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

关于各端的管理规则需要耐心学习

uni-app 并不难学,但我们注意到很多新人在适应各个平台的规则限制时很焦躁。

uni-app 跨了很多端,虽然代码层面可以开发一次,生成多端。但注意每个端,有每个端的管理规则,这与开发无关,但每个开发者仍然要耐心掌握这些规则限制。

  • 比如 H5 端的浏览器有跨域限制;
  • 比如微信小程序会强制要求 https 链接,并且所有要联网的服务器域名都要配到微信的白名单中;
  • 比如 App 端,iOS 对隐私控制和虚拟支付控制非常严格;
  • 比如 App 端,Android、国产 rom 各种兼容性差异,尤其是因为谷歌服务被墙,导致的 push、定位等开发混乱的坑;
  • 如果你的 App 要使用三方 sdk,比如定位、地图、支付、推送...还要遵循他们的规则和限制;

总结

uni-ui 对比其他框架主要有两个优势

  • 如何在有限前端团队人数下搞定更多平台,是需要首要考虑的原因,跨端方面uni-app更成熟。
  • 团队里熟悉vue技术栈的同学多一点,则使用uni-app内部培训时间短、风险低。

开发需要注意的点

  • 注意各端的差异性,很多东西,h5 是对的,上真机就错了,真机好着的,换小程序就错了,不同小程序之间还有差异,总之就是考虑好不同的情况,重点是仔细阅读文档。
  • 由于 uni-app 框架集成了5+API,一些需要原生功能 uniapp 也可以通过5+API去进行实现。
  • 很多的坑还是因为多端不兼容,除了写起来麻烦一点,基本上都还是有可以解决的策略。

本文分享自微信公众号 - 极乐技术社区(wxapp-union)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实践分享:怎样用好uni-app开发小程序?

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/...

    极乐君
  • 真实测评:用uni-app开发小程序,比原生开发好用在哪里?

    原生wxml开发对Node、预编译器、webpack支持不好,影响开发效率和工程构建流程。所以大公司都会用框架开发

    极乐君
  • 详解:如何在uni-app中选择一个合适的UI组件库

    uni-app框架转眼已经发布了一年多,使用uni-app的开发者也是与日俱增。因为uni-app是一个跨端框架,所以我们大多使用它就是为了同时一套代码跨多端,...

    极乐君
  • Uni-App项目搭建以及准备工作

    Uni-App项目开发,需要“定制化IDE”,也就是“HBuilderX”工具,主要是因为模拟运行调试一块,其他IDE不具备,其他功能和VS code、Subm...

    Javanx
  • uni-app开发小程序入门到崩溃

    最近一段时间公司要做一个小程序项目,还要支持,微信小程序,头条小程序,百度小程序。一套代码,实现三个平台。当时接到这个任务,就不知道怎么去下手,一套代码,分别要...

    小周sri的码农
  • React-Native 在 SectionList 组件中实现九宫格布局

    随着 ReactNative 的不断更新,ListView 这个组件逐步被 FlatList 和 SectionList 取代。ListView 从出生之后就饱...

    Originalee
  • Good Feature Matching: Towards Accurate, Robust VO/VSLAM with Low Latency 良好的特征匹配:实现准确、鲁棒的低延迟VO/VSLA

    —在VO或VSLAM系统中保持性能(精确度和鲁棒性)和效率(延迟)的取舍是一个重要的课题。基于特征的系统展现了良好的性能,但由于显式的数据关联有更高的时延;直接...

    用户1150922
  • 如何将离线计算业务的成本降低 65%—弹性容器服务 EKS「竞价实例」上线

    詹雪娇,腾讯云产品经理,主要负责 EKS 相关产品和运营工作,以及容器服务日志/审计/事件模块。 在容器化的应用场景中,大数据计算是其中很大并且业务应用在逐渐...

    腾讯云原生
  • 金丝雀发布、滚动发布、蓝绿发布到底有什么差别?关键点是什么?

    ​ 根据 2017 年的 DevOps 发展报告,高效能组织和低效能组织在软件交付的效率上有数量级上的差异。技术组织的软件交付能力是一种综合能力,涉及众多环节,...

    changxin7
  • iOS-UITableView 之 重写 loadView 导致程序崩溃

    用户1890628

扫码关注云+社区

领取腾讯云代金券