关于前端:uniapp01

38次阅读

共计 1543 个字符,预计需要花费 4 分钟才能阅读完成。

uni-app 开发小程序与微信原生开发的区别

渲染

uni-app 是逻辑和渲染拆散的。渲染层,在 app 端提供了两套排版引擎:小程序形式的 webview 渲染,和 weex 形式的原生渲染。
两种渲染引擎能够本人依据须要选。vue 文件走的 webview 渲染,nvue 走的原生渲染。
个别状况下用 vue 就能够了。如果是 app 且有局部场景 vue 页面的性能不满足你的需要时,这个页面能够改用 nvue 页面。如果 app 里同时存在同名的 vue 和 nvue 页面,在 app 端会优先执行 nvue 页面,而其余端依然优先 vue 页面。
vue 是浏览器模式渲染,多端通用,绝对更稳固,坑更少。nvue 是 weex 模式渲染,针对 app 做了优化,坑比拟多,某些场景性能好一点点

语法

反对 vue 语法和小程序语法

生命周期

1. 利用的生命周期(同小程序)

<script>
    // 只能在 App.vue 里监听利用的生命周期
    export default {onLaunch: function() {console.log('App Launch')
        },
        onShow: function() {console.log('App Show')
        },
        onHide: function() {console.log('App Hide')
        }
    }
</script>

利用生命周期仅可在 App.vue 中监听,在其它页面监听有效。

2. 页面的生命周期 (小程序页面当中的生命周期)

  • 页面生命周期仅在 page 页面无效,而独自封装的组件中【页面周期有效】,然而 Vue 的生命周期仍然无效【Vue 的生命周期在任何中央都是无效的】
  • 举荐应用 uni-app 外面的 onReady 代替 vue 外面的 mounted
  • 举荐应用 uni-app 外面的 onLoad 代替 vue 外面的 created

3. 组件的生命周期函数(vue 的生命周期在任何中央无效)

  • mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
  • 不要在选项属性或回调上应用箭头函数,比方 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this,this 会作为变量始终向下级词法作用域查找,直至找到为止,常常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的谬误。

组件

uni-app 反对的组件分为 vue 组件和小程序自定义组件。
日常开发来讲,举荐应用 vue 组件。uni-app 反对小程序组件只有是为了兼容更多生态资源。
easycom 的组件标准
传统 vue 组件,须要装置、援用、注册,三个步骤后能力应用组件。easycom 将其精简为一步。
easycom 打包后会主动剔除没有应用的组件,对组件库的应用尤为敌对。
如果不应用 easycom,则按 vue 组件的标准引入即可。

配套的 uni-ui 组件库

1. 高性能

  • 主动差量更新数据
  • 优化逻辑层和视图层通信折损
  • 背景进行

    2. 全端

  • uni ui 的组件都是多端自适应的,底层会抹平很多小程序平台的差别或 bug。
  • uni ui 反对 nvue 原生渲染和 pc

组件的应用上:内置 > uni-ui > 插件市场

API

反对小程序的 API, 原生开发的 API

uni-app 长处
1. 反对原生小程序的 API,反对原生写法,在性能上与原生小程序没有太大区别
2.vue 的语法,相熟 vue 的能够间接上手开发
3. 在数据更新上,uni-app 基于 Vue 的 diff 算法更新,缩小了 setData 的传输数据量和调用次数

uni-app 毛病
1. 文档不齐全,遇到问题反馈回复不及时
2.app 开发成果不迭原生

正文完
 0