uniapp用的什么编译器
Ⅰ uni-app使用Vue.js
说明 :uni-app基于 Vue 2.0 实现,开发者需注意Vue 1.0 -> 2.0 的使用差异,详见 从 Vue 1.x 迁移 。
uni-app不仅支持应用生命周期和页面生命周期,还支持 vue 实例的如下生命周期函数:
注意 :不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你做预期的 Vue 实例,且 this.a 或 this.myMethod 也会是未定义的。
几乎全支持 Vue官方文档:模板语法 ,下面讲下不支持的情况。
(1)不支持纯HTML
uni-app的非H5端里所有的 BOM/DOM 都不能用,也就是说 v-html 指令不能用,可以使用 rich-text组件 代替。或者使用三方组件wxparse,在hello uni-app中有示例。
(2)不支持部分复杂的 JavaScript 渲染表达式
非H5端无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === > < [] .,剩下的还待完善。
(3)不支持过滤器
编译到 App 和小程序平台时不支持使用过滤器,可以使用计算属性(computed)提前计算出数据(如果是数组类型,就提前计算整个数组),用以代替过滤器。
备注 : 自HBuilderX 1.7.1起,在微信小程序平台支持使用过滤器。
data 必须声明为返回一个初始数据对象的函数;否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。
注意 :在微信小程序端,uni-app 将数据绑定功能委托给Vue,开发者需按Vue 2.0的写法实现数据绑定,不支持微信小程序的数据绑定写法,故如下写法不支持:
需修改为:
支持 Vue官方文档:计算属性 。
实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考: uni-app全局变量的几种实现方式 。
非H5端不支持在 template 内使用 methods 中的函数。
备注 : 自HBuilderX 1.7.1起,在微信小程序平台支持支持在 template 内使用 methods 中的函数。
为节约性能,我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中。
全支持 Vue官方文档:条件渲染 。
全支持vue列表渲染 Vue官方文档:列表渲染 。只是需要注意一点,嵌套列表渲染,必须指定不同的索引!需要填写 :key="xx" 。
注意 :同级多个 v-for 时 key 的值是不允许重复的,key 的绑定是不支持表达式的,需要按照以下方式处理。
几乎全支持 Vue官方文档:事件处理器 。事件映射表如下所示:
注意 :
(1)事件映射表中没有的原生事件也可以使用,例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy 中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>。
(2)为兼容各端,事件需使用 v-on 或 @ 的方式绑定,请勿使用小程序端的bind 和 catch 进行事件绑定。
(3)事件修饰符
(4)若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。
(5)按键修饰符:uni-app运行在手机端,没有键盘事件,所以不支持按键修饰符。
支持 Vue官方文档:表单控件绑定 。建议开发过程中直接使用 uni-app:表单组件 。用法示例:
(1)H5 的select 标签用 picker 组件进行代替
(2)表单元素 radio 用 radio-group 组件进行代替
组件是整个 Vue.js 中最复杂的部分,支持 Vue官方文档:组件 。有且只能使用单文件组件(.vue 组件)的形式进行支持。其他的诸如:动态组件,自定义 render ,和 <script type="text/x-template"> 字符串模版等非H5端都不支持。详细的非H5端不支持列表:
(1)暂不支持在组件引用时,在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class style 等样式属性(例:<card class="class-name"> </card> 样式是不会生效的)。
Slot(scoped 暂时还没做支持)
(2)动态组件
(3)异步组件
(4)inline-template
(5)X-Templates
(6)keep-alive
(7)transition
(8)class
(9)style
(10)组件里使用 slot 嵌套的其他组件时不支持 v-for
uni-app提供了丰富的 UI组件 ,比如: picker , map 等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName" 。如:
uni-app 支持配置全局组件,需在 main.js 里进行全局注册,注册后就可在所有页面里使用该组件。 注意 :Vue.component 的第一个参数必须是静态的字符串。示例:
(1)main.js 里进行全局注册
(2)index.vue 里可直接使用组件
在 uni-app 中以下这些作为保留关键字,不可作为组件名。
备注 :除以上列表中的名称外,标准的 HTML 及 SVG 标签名也不能作为组件名。
(1) 如何获取上个页面传递的数据
在 onLoad 里得到,onLoad 的参数是其他页面打开当前页面所传递的数据。
(2) 如何设置全局的数据和全局的方法
uni-app内置了 vuex ,在app里的使用,可参考 hello-uniapp 的 store/index.js 。
(3)如何捕获 app 的 onError
由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:
(4)组件属性设置不生效解决办法
当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。解决办法有两种(以scroll-view组件为例):
备注 :第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。
Ⅱ 混合开发之uni-app
uni-app App端内置weex渲染引擎,提供原生渲染能力
然而, Weex并不是一个前端框架 。实际上,前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language),它们与原生渲染引擎是分离的。换句话说,Weex 并不依赖于特定的前端框架,随着前端技术的发展,Weex 也可以集成更多广泛使用的前端框架。
以往的 weex ,有个很大的问题是它只是一个高性能的渲染器,没有足够的API能力,使得开发时非常依赖原生工程师协作,开发者本来想节约成本,结果需要前端、iOS、Android 3拨人开发,适得其反。而 nvue 解决了这个大问题,让前端工程师可以直接开发完整 App,并提供原生插件的市场交易和云打包。这些组合方案,开发者切实的提高效率、降低成本。
如果你是web前端,不熟悉 weex,那么建议你仍然以使用 vue 为主,在App端某些 vue 表现不佳的场景下使用 nvue 作为强化补充:
uni-app App 端内置 HTML5+ 引擎,让 js 可以直接调用丰富的原生能力。
小程序及 H5 等平台是没有 HTML5+ 扩展规范的,因此在 uni-app 调用 HTML5+ 的扩展规范时,需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。
在普通的 H5+ 项目中,需要使用 document.addEventListener 监听原生扩展的事件。
uni-app 中,没有 document。可以使用 plus.globalEvent.addEventListener 来实现(注意manifest中需开启新编译器,即自定义组件模式"usingComponents":true)。
同理,在 uni-app 中使用 Native.js 时,一些 Native.js 中对于原生事件的监听同样需要按照上面的方法去实现。
注意:旧编译器(非自定义组件模式)不支持 plus.globalEvent 这个对象。
Ⅲ uni-app nvue
nvue 即 native vue,在weex基础上封装了uni的api,提供了原生渲染能力,常用于在App端某些vue页面表现不佳的场景下作为强化补充。
App的nvue页面使用原生渲染,一个项目中可以同时存在vue和nvue页面。
HBuilder页面创建时可以选择为vue还是nvue页面
在非app端,只有uni-app编译模式的nvue文件才会编译(因weex模式不支持非app端)。
如果一个页面路由下出现同名的vue和nvue文件,App端会使用nvue页面,非App端会使用vue页面。
Ⅳ uniapp开发出来的与专业工具开发出来的有区别吗
有区别。
uniapp是一个开放的、支持多种开发工具的多端开发框架。HBuilderX和uniapp,同属一个公司,即DCloud出品。HBuilderX团队为uniapp做了大量的优化和定制。当然uniapp团队也为其他开发工具提供了良好的支持,尤其是对vscode,比其他多端框架做的更多。
uniapp是一个使用Vuejs开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web、以及各种小程序、快应用等多个平台。
Ⅳ uniapp面试题必问有哪些
ni-app面试考试有几个题是必问的:uni-app收费吗?跨端会造成功能受限制吗?以及uni-app的手机端用户体验如何?
1、uni-app收费吗?
uni-app是免费产品,DCloud公司不会向开发者收取任何费用,大家可以放心使用。
DCloud提供的所有开发工具都是免费的,也不会有什么陷阱。
DCloud的盈利点在帮助开发者进行推广和流量变现上,而不在开发工具收费上。
2、跨端会造成功能受限制吗?
uni-app在跨平台的过程中,不牺牲平台特色,不限制平台的能力使用。
应用开发中,80%的常规开发,比如界面组件、联网等api,uni-app封装为可跨多端的API。
其余的,uni-app引入条件编译。可以优雅的在一个项目里调用不同平台的特色能力。比如push,微信小程序里不支持,但可以在App里使用,还有很多原生sdk,在App时难免涉及,这些都可以正常的在uni-app框架下使用。
3、uni-app的手机端用户体验如何?
使用uni-app开发的微信小程序,和直接开发微信小程序相比性能没有明显差别,因为uni-app输出到微信时也是编译为wxml格式。uni-app编译到微信使用的是mpvue框架,这个是业内广泛使用的成熟框架。
uni-app打包成App后的体验和微信小程序一样好,在某些场景下更好;微信小程序的Hybrid应用框架是业内体验上的标杆,实践证明这种体验足以承载一线互联网开发商获得上亿用户。
uni-app内置预载机制,加载新页面速度极快,可实现无白屏极速渲染。
uni-app在App端还支持weex原生渲染(nvue),左右拖动长列表等复杂场景依然可实现高流畅性。
Ⅵ uni-app中scss语法初体验。
1.首先检测一下你有没有安装scss语言,任意一个.vue页面写入lang="scss"声明。
2.如果没有安装,会提示如下信息,去插件市场安装一个就好。
如果你用的是HbuilderX编辑器。
3.依此找到--菜单栏--工具--插件安装--安装新插件--前往插件市场安装--在搜索框输入scss--点击安装
图片教程:
1.可以嵌套写css样式
我们可以测试下:
基本框架:
scss语法体验:
效果预览:
uni.scss文件中
以$符号命名一个全局变量名称。
在其他.vue页面的样式中调用这个全局变量名。