发表自话题:猪八戒贷款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()仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。
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 语句可以导入外联样式,一样作用于每一个页面。
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布局可以参考外部文档A Complete Guide to Flexbox等。
uni-app 在支持绝大部分 ES6 API 的同时,也支持了 ES7 的 await/async。
ES6 API 的支持,详见如下表格部分(x 表示不支持,无特殊则表示支持):
StringiOS8iOS9iOS10AndroidcodePointAt标签组:[软件] [app] [微信开发] [app开发公司] [app设计] [微信小程序开发文档] [开发框架] [前端组件]
2023-02-17
2021-02-12
2020-12-11
2020-11-03
2020-10-30
北京突发!套路贷背后的害群之马被揪了出来:公证员、律师和警察
2020-10-08
高仿APP层出不穷套路用户,360借条安全专家指出防骗关键_目前
2020-10-05
已确认!支付宝 APP正式发布了10.1.10版本,网友直呼良心!
2020-09-28
遂宁小伙子因下载了一款APP后一发不可收拾,借钱不还涉嫌诈骗!_谢某
2020-09-21
2020-08-31