uniApp开发了解

uni-app 是一个使用 Vue.js(2.0版本) 开发所有前端应用的框架.
开发者编写一套代码,可发布到iOSAndroidWeb(响应式)小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝),快应用
uni-app 支持vue文件nvue文件

uniapp相对vue的区别

  • 跟vue一样,template是一级节点,template下只支持一个根。
  • vue实例声明周期只有8个,而uniapp区分应用生命周期,页面生命周期,组件生命周期。
  • 跟web端相比,在小程序和App端部分功能可能受限制,部分样式可能不兼容。需要不同端进行调试。
  • 标签区别,vue可以使用HTML5的标签,uniapp将HTML5<div>,<ul>,<li>,<nav>全部改成了<view>标签,<p>,<span>,<i>,<b>等全部改成了文字<text>标签,<a>标签改成了<navigator>,<img>改成了<image>等。注:文字样式仅在text标签上生效,其他标签上书写字体样式APP端不生效
  • css也会受到限制,非H5不支持*选择器,body元素选择改成了pages。

uniapp中,vue和nvue的区别

  • uniapp中APP端,如果使用vue的话则是使用webview渲染,如果使用nvue页面,则是使用原生渲染。一个app内可同时存在两种页面,相互不冲突。
  • 以往的weex它只是一个高性能的渲染器,没有足够的API能力,很难调起各种sdk集成和其他的功能等,nvue解决了这个问题,但nvue是使用原生渲染所以开发时很大程度的会受到限制,例css样式等。
  • 因nvue平台受限,所以样式可能很难兼容,建议使用flex布局。

uniapp条件编译

因为uniapp是跨端开发,所以有时候会遇到一个功能写几套代码,或者h5和小程序页面不一致时,如果大量书写if eles会造成代码执行能力低下管理混乱,代码可读性不高,后期维护难以理解等问题,这个时候就需要使用条件编译了。
uniapp参照C语言的编译条件使用编译条件来完成不同端的工作。

平台名有:

1.APP-PLUS:APP端
2.APP-NVUE:APP端的nvue
3.H5:h5(网页,浏览器等)
4.MP:所有小程序
5.MP-WEIXIN:微信小程序
6.MP-ALIPAY:支付宝小程序
7.MP-BAIDU:百度小程序
8.MP-TOUTIAO:字节跳动小程序
9.MP-QQ:QQ小程序
10.MP-360:360小程序
11.QUICKAPP-WEBVIEW:所有快应用
12.QUICKAPP-WEBVIEW-UNION:快应用联盟
13.QUICKAPP-WEBVIEW-HUAWEI:快应用华为

支持文件:
  • .vue
  • .js
  • .css
  • pages.json
  • 各类型编译语言文件:.less,.scss,.stylus,.ts,.pug
编译方法:
  • 仅出现在某个平台。

    // #ifdef 平台名

     需要在此平台执行的代码
    

    // #endif

  • 除了此平台,其它平台均存在的代码

    // #ifndef 平台名

     需要在其他平台执行的代码
    

    // #endif

  • 可写多个平台(注:这里只能有||,不能使用&&,因为没有交集),例:

    // #ifndef H5 || MP

      在 H5平台或程序平台存在的代码
    

    // #endif

开发工具

建议使用HBuilderX进行开发。
下载地址:HBuilder官方IDE下载地址

posted @ 2021-03-27 16:53  一条不会翻身的咸鱼  阅读(1498)  评论(0)    收藏  举报