app混开发,一套代码兼容安卓、苹果和小程序

首页 > 科技 > 软件 > 正文 2021-02-12

发表自话题:猪八戒贷款app

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。

开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、小程序等多个平台,保证其正确运行并达到优秀体验。

uni-app 继承自 Vue.js,提供了完整的 Vue.js 开发体验。

uni-app 组件规范和扩展api与小程序基本相同。

有一定 Vue.js 和小程序开发经验的开发者可快速上手 uni-app ,开发出兼容多端的应用。

uni-app提供了条件编译优化,可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。

uni-app打包到App时仍然使用了5 引擎,5 的所有能力都可以在uni-app中可以使用。在App端运行性能和小程序基本相同。

对于技术人员而言:不用学那么多的平台开发技术、研究那么多前端框架,学会基于vue的uni-app就够了。

对于公司而言:更低成本,覆盖更多用户,uni-app是高效利器。

uni-app多端演示

为方便开发者体验uni-app的组件、接口、模板,DCloud发布了Hello uni-app演示程序(代码已开源,详见Github),Hello uni-app实现了一套代码,同时发布到iOS、Android、小程序。

你可以使用手机扫描下方App码下载iOS、Android原生安装包,也可以使用扫描小程序码,体验uni-app的小程序版本:

App码小程序码

一套代码,运行到多个平台

uni-app实现了一套代码,同时运行到多个平台;如下图所示,一套代码,同时运行到Android模拟器、iOS模拟器、开发者工具(底部3个终端选项卡代表3个终端模拟器):

实际运行效果如下:






uni-app 借鉴整合了 Vue.js、mpvue 等前端开源框架。

同时,为保证小程序兼容,uni-app 还借鉴了小程序的组件规范。

产品理念

uni-app 的核心是提供跨端开发的最佳方案,因此uni-app 有两个分解目标:

提升开发效率:跨端开发,一套代码兼容iOS、Android、小程序,未来也将兼容H5网站、快应用、百度小程序、支付宝小程序

增**发体验:借助成熟的前端生态,降低开发者的学习门槛,因此uni-app框架以 Vue.js 为基础

开发规范

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

页面文件遵循 Vue 单文件组件 (SFC) 规范

组件标签靠近小程序规范,详见uni-app 组件规范,注意:不能使用标准HTML标签,也不能用js对dom进行操作

接口能力(JS API)靠近小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范

数据绑定及事件处理靠近 Vue.js 规范,同时补充了App及页面的生命周期

为兼容多端运行,建议使用flex布局进行开发

路由

uni-app路由全部交给框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式,不支持 Vue Router。

路由跳转

uni-app 有两种路由跳转方式:使用navigator组件跳转、调用API跳转。

页面栈

框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:

路由方式页面栈表现触发时机初始化新页面入栈uni-app 打开的第一个页面打开新页面新页面入栈调用 API   uni.navigateTo  、使用组件  页面重定向当前页面出栈,新页面入栈调用 API   uni.redirectTo  、使用组件  页面返回页面不断出栈,直到目标返回页调用 API  uni.navigateBack   、使用组件  、用户按左上角返回按钮、安卓用户点击物理back按键Tab 切换页面全部出栈,只留下新的 Tab 页面调用 API  uni.switchTab  、使用组件    、用户切换 Tab重加载页面全部出栈,只留下新的页面调用 API  uni.reLaunch  、使用组件  

getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意: getCurrentPages()仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。

Tips:

navigateTo, redirectTo 只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。

页面样式与布局

尺寸单位

uni-app框架目前仅支持长度单位 px 和 %。与传统 web 页面不同,px 是相对于基准宽度的单位,已经适配了移动端屏幕,其原理类似于 rem。

PS:uni-app 的基准宽度为 750px。

开发者只需按照设计稿确定框架样式中的 px 值即可。设计稿 1px 与框架样式 1px 转换公式如下:

设计稿 1px / 设计稿基准宽度 = 框架样式1px / 750px

换言之,页面元素宽度在uni-app中的宽度计算公式:

750px * 元素在设计稿中的宽度 / 设计稿基准宽度

举例:

若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在uni-app里面的宽度应该设为:750 * 100 / 640,结果为:117px。

若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在uni-app里面的宽度应该设为:750 * 200 / 375,结果为:400px。

样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码:

     @import "../../common/uni.css";     .uni-card {         box-shadow: none;     } 

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的**,样式类名不需要带上.,样式类名之间用空格分隔。

选择器

目前支持的选择器有:

选择器样例样例描述.class.intro选择所有拥有 的组件#id#firstname选择拥有 id="firstname" 的组件elementview选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件::afterview::after在 view 组件后边插入内容,仅小程序和5 App生效::beforeview::before在 view 组件前边插入内容,仅小程序和5 App生效

全局样式与局部样式

定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。

注意: App.vue 中通过 @import 语句可以导入外联样式,一样作用于每一个页面。

css变量

uni-app提供内置css变量 var(--status-bar-height) ,表示状态栏的高度。

当设置 "navigationStyle":"custom" 后可以使用固定一个高度为 var(--status-bar-height) 的view放在页面顶部,使得页面内容不会出现在状态栏里。

注意:var(--status-bar-height) 此变量在小程序环境为固定 25px,在5 app里为手机实际状态栏高度。

示例:

                                              Hello            .index {         flex: 1;         flex-direction: column;     }     .status_bar {         height: var(--status-bar-height);         width: 100%;     }     .top_view{         height: var(--status-bar-height);         width: 100%;         position: fixed;         top: 0;     }     .content{         justify-content: center;         align-items: center;     } 

Flex布局

为支持跨平台,框架建议使用Flex布局,关于Flex布局可以参考外部文档A Complete Guide to Flexbox等。

ES6 支持

uni-app 在支持绝大部分 ES6 API 的同时,也支持了 ES7 的 await/async。

ES6 API 的支持,详见如下表格部分(x 表示不支持,无特殊则表示支持):

StringiOS8iOS9iOS10AndroidcodePointAt



normalizexx

includes



startsWith



endsWith



repeat



String.fromCodePoint



ArrayiOS8iOS9iOS10AndroidcopyWithin



findxx

findIndex



fill



entries



keys



valuesxxxxincludesx


Array.from



Array.of



NumberiOS8iOS9iOS10AndroidisFinite



isNaN



parseInt



parseFloat



isInteger



EPSILON



isSafeInteger



MathiOS8iOS9iOS10Androidtrunc



sign



cbrt



clz32



imul



fround



hypot



expm1



log1p



log10



log2



sinh



cosh



tanh



asinh



acosh



atanh



objectiOS8iOS9iOS10Androidis



assign



getOwnPropertyDescriptor



keys



getOwnPropertyNames



getOwnPropertySymbols



OtheriOS8iOS9iOS10AndroidSymbol



Set



Map



ProxyxxxxReflect



Promise




标签组:[软件] [app] [微信开发] [app开发公司] [app设计] [微信小程序开发文档] [开发框架] [前端组件

上一篇PHP服务器端架构设计以及app接口实现和后台管理程序

下一篇人人贷我借了两万利息多少?人人贷借钱亲身经历该诉你利息有多高

相关阅读

相同话题文章

相关话题