目 录CONTENT

文章目录

Uni-app 和 Vue 的区别

ByteNews
2022-01-28 / 0 评论 / 1 点赞 / 8,862 阅读 / 5,096 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-01-28,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Uni-app 和 Vue 的区别

文件类型的变化

以前是.html 文件,现在是.vue 文件
文件内代码结构的变化
以前是一个 html 大节点,里面有 script 和 style 节点
现在 template 是一级节点,用于写 tag 组件,script 和 style 是并列的一级节点,也就是有三个一级节点
template 节点下必须且只能有一个根 view 节点,所有内容都写在这个根 view 节点下
以前

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">

        </script>
        <style type="text/css">

        </style>
    </head>
    <body>

    </body>
</html>

现在

<template>
    <view>
    注意必须有一个view,且只能有一个根view。所有内容写在这个view下面。
    </view>
</template>

<script>
    export default {

    }
</script>

<style>

</style>

外部文件引用方式变化

以前通过 script src、link href 引入外部的 js 和 css
现在是 import 引入外部的 js 模块(不是文件)或 css
以前

<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

现在
js 要 require 进来,变成对象

<script>
var util = require('../../../common/util.js');  //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>

在 util.js 里,要把之前的 function 封装成对象的方法

function formatTime(time) {
    return time;//这里没写逻辑
}

module.exports = {
    formatTime: formatTime
}

css 外部文件导入

<style>
    @import "./common/uni.css";

    .uni-hello-text{
        color:#7A7E83;
    }
</style>

全局样式,在根目录下的 App.vue 里写入,每个页面都会加载 App.vue 里的样式
另外,vue 支持组件导入,可以更方便的封装一个包含界面、js、样式的库
局部导入组件

<template>
    <view>
        <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件-->
    </view>
</template>
<script>
    import uniBadge from "../../../components/uni-badge.vue";//1.导入组件
    export default {
        data() {
            return {

            }
        },
        components: {
            uniBadge //2.注册组件
        }
    }
</script>

全局导入组件
每个页面都可以直接使用,不用引用和注册,在根目录的 main.js 里处理

//main.js
import pageHead from './components/page-head.vue' //导入
Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。

组件、标签的变化

以前是 html 标签,现在是小程序组件
具体说来:

  • div 改成 view
  • span、font 改成 text
  • a 改成 navigator
  • img 改成 image
  • input 还在,但 type 属性改成了 confirmtype
  • form、button、checkbox、radio、label、textarea、canvas、video 这些还在。
  • select 改成 picker
  • iframe 改成 web-view
  • ul、li 没有了,都用 view 替代
  • audio 不再推荐使用,改成 api 方式,背景音频 api 文档
    其实老的 HTML 标签也可以在 uni-app 里使用,uni-app 编译器会在编译时把老标签转为新标签,比如把 div 编译成 view。但不推荐这种用法,调试 H5 端时容易混乱。

除了改动外,新增了一批手机端常用的新组件

  • scroll-view 可区域滚动视图容器
  • swiper 可滑动区域视图容器
  • icon 图标
  • rich-text 富文本(不可执行 js,但可渲染各种文字格式和图片)
  • progress 进度条
  • slider 滑块指示器
  • switch 开关选择器
  • camera 相机
  • live-player 直播
  • map 地图
  • cover-view 可覆盖原生组件的视图容器
  • cover-view 需要多强调几句,uni-app 的非 h5 端的 video、* map、canvas、textarea 是原生组件,层级高于其他组件。如需覆盖原生组件,比如在 map 上加个遮罩,则需要使用 cover-view 组件
    除了内置组件,还有很多开源的扩展组件,把常用操作都进行封装,DCloud 建立了插件市场收录这些扩展组件,详见插件市场

js 的变化

标准 js 语法和 api 都支持,比如 if、for、settimeout、indexOf 等。
uni-app 的非 H5 端,不管是 App 还是各种小程序,都不支持 window、navigator、document 等 web 专用对象。
uni-app 使用 vue 的数据绑定方式解决 js 和 dom 界面交互的问题
uni-app 的 API 与小程序保持一致,需要处理这些不同的 API 写法

  • 处理 window api
    • ajax 改成 uni.request。(插件市场也有适配 uni-app 的 axios、flyio 等封装拦截器)
    • cookie、session.storage 没有了,改用 uni.storage 吧;local.storage 也改成 uni.storage。另外插件市场有一个垫片 mp-storage,可使用之前的代码,兼容运行在 uni-app 上,
    • alert,confirm 改成 uni.showmodel
    • window 的 resize 改为了 uni.onWindowResize
  • 处理 navigator api
    • geolocation 的定位方式改为 uni.getLocation
    • useragent 的设备 api 没有了,改用 uni.getSystemInfo
  • 处理 dom api
    • 如果使用标准 vue 的数据绑定,是不需要操作 dom 来修改界面内容的。如果没有使用 vue 数据绑定,仍然混写了 jquery 等 dom 操作,需要改为纯数据绑定
    • 有时获取 dom 并不是为了修改显示内容,而是为了获取元素的长宽尺寸来做布局。此时 uni-app 提供了同小程序的另一种 API,uni.createSelectorQuery

其他 js api

web 中还有 canvas、video、audio、websocket、webgl、webbluetooth、webnfc,这些在 uni-app 中都有专门的 API。

生命周期

首先我们需要清楚几个概念,应用生命周期,页面生命周期,还有组件生命周期:
应用生命周期是项目启动的过程,主要是在 App.vue 中声明的,包括下面几个:

在 onLanch 中我们可以获取启动参数,包括 scene 等;其他的我们根据需要处理自己的逻辑。

  • 1.页面生命周期每个页面单独的生命周期,我们经常会用到 onLoad,可以获取页面参数,当然我们可以自己封装一层页面组件,然后将页面参数绑定到当前页面实例$query,保证了同 vue 一致的开发体验。onReady 代替 vue 的 mounted,此时可以访问页面实例以及视图结构。

  • 2.组件生命周期区别于页面生命周期,没有 onShow,onLoad,但是 vue 的生命周期是支持的,created 等。

少量不常用的 vue 语法在非 h5 端仍不支持,data 必须以 return 的方式编写,注意事项详见
注意:如果你使用了一些三方 ui 框架、js 库,其中引用了包括一些使用了 dom、window、navigator 的三方库,都需要更换。去 uni-app 的插件市场寻找替代品。

调用接口请求

uni.request({
    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

css 的变化

标准的 css 基本都是支持的。

  • 选择器有 2 个变化:*选择器不支持;元素选择器里没有 body,改为了 page。微信小程序即是如此。
  • 单位方面,px 无法动态适应不同宽度的屏幕,rem 只能用于 h5。如果想使用根据屏幕宽度自适应的单位,推荐使用 rpx,全端支持。 尺寸单位文档
  • uni-app 推荐使用 flex 布局,并默认就是 flex 布局,这个布局思路和传统流式布局有点区别。但 flex 的有趣在于,不管是什么技术都支持这种排版,web、小程序/快应用、weex/rn、原生的 iOS、Android 开发,全都支持 flex。它是通吃所有端的新一代布局方案。
  • 不同端的浏览器兼容性仍然存在,避免使用太新的 css 语法,否则发布为 App 时,Android 低端机(Android 4.4、5.x),会有样式错误(HBuilderX 不能提示的 css,就很容易引发浏览器兼容问题)
  • 背景图片 和 字体图标
  • 支持 base64 格式图片。
    *支持网络路径图片。
    *使用本地图片或字体图标需注意: 1. 图片小于 40kb,uni-app 会自动将其转化为 base64 格式; 2. 图片大于等于 40kb, 需开发者自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。 3. 本地引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
/* 背景图片 */
 .bgImg {
     background-image: url('~@/static/logo.png');
 }
/* 字体图标 */
 @iconImg {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

工程结构和页面管理
uni-app 工程结构

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录,详见
├─platforms             存放各平台专用页面的目录,详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录,详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息,详见

每个可显示的页面,都必须在 pages.json 中注册。
uni-app 的首页,是在 pages.json 里配的,page 节点下第一个页面就是首页。

1

评论区