uni-app初识

yfxco0l
399 阅读9分钟

一、uni-app简介

  1. uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台；
  2. 据 DCloud 称， uni-app 在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，都可以快速交付，不需要转换开发思维、不需要更改开发习惯；
  3. 据 DCloud 称，很多人以为小程序是微信先推出的，其实 DCloud 才是这个行业的始作俑者。DCloud于2012年开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是B/S模式的轻应用，而是能接近原生功能、性能的动态App，并且即点即用。

  1. uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势

功能架构图：

  1. 编译到小程序能力通过缝合美团前端团队的mp-vue实现。
  2. 原生渲染能力通过缝合阿里巴巴团队的weex实现。
  3. uniapp提供向微信小程序看齐的内置组件和api。

总结：

  1. 移动端技术太多，跨端框架或是未来发展趋势；
  2. 学习成本低，一套代码多端发布，节省开发资源受开发者青睐；
  3. 生态完整（推送，广告，统计集成都很完善），开发者/案例很多，受企业青睐；
  4. 在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长

二、uni-app开发准备

1. 工具安装

HBuilderX 是通用的前端开发工具，为uni-app做了特别强化，可以帮助我们快速生成页面模板和组件模板，可视化的页面配置，优秀的代码提示，代码补全能力 等等。下载App开发版，可开箱即用，无需配置nodejs

2. 插件安装

HbuilderX 的安装非常方便，直接官网下载安装。下载完成后我们需要安装一些插件，打开HbuilderX，在顶部栏选择工具->插件安装，如下图

3. 编辑器配置

我们还可以设置我们的编辑器的常用配置和编译器设置（主题和字符大小等），可根据个人其他编辑器使用习惯适当调整

三、项目目录结构

1. 新建项目

HbuilderX 安装配置完毕后，我们就可以开始开发了，首先我们需要创建一个项目，左上角 文件-> 新建 ->项目 ，然后我们选择 uni-app 项目 ，模板选择 默认模板

2. 项目框架

uni-app给我们的项目框架介绍，有一些文件夹是没有在模板中内置的，因此我们需要自己手动创建以下，例如最外层的components,用来放置我们的一些全局通用组件

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

3. 新建页面

我们需要创建新页面的时候可以通过hbuilder内置的页面模板来快速创建，右键点击左侧文件树中当前的项目，选择 新建页面 ，输入页面名称以及选择模板就可以创建了，一般我选择的是scss模式，且勾选上在page.json中注册

四、核心知识点

1. uni-app规范

  • 页面文件遵循vue单文件组件规范类

vue文件是一个自定义的文件类型，用类html语法来描述一个view组件，每个view组件包含了三种类型的顶级语言块

<template>
  <view>
                    模版块 ---- 整个页面的模块标签
  </view>
</template>

<script lang="ts">
  export default {
      data() {
         return {    
                    脚本块 ---- 当前页面逻辑处理  
         };
      }
   }
</script>

<style>
                    样式块 ---- 布局样式
</style>
  • 组件标签靠近小程序规范

标签使用的是像view、image、 text，这样类似于小程序的基础组件式的标签来开发项目

普通的web开发，我们去写div 、img、span这种标签去构成我们当前的一个页面
<body>
  <div class="content">
    <img src= "./long.png" mode=""></img>
    <span>hello uni-app</span>
  </div>
</body>

uni-app开发使用view、image 、text这样的一个基础组件，构成我们当前的一个页面
<template>
  <view>
    <image src= "./long.png" mode=""></image>
    <text>hello uni-app</text>                
  </view>
</template>
  • 接口能力（JS API）靠近小程序规范

使用view是没有API可以直接调取我们手机的原生能力的, 而在uni-app中我们可以直接使用uni前缀的API直接使用这些原生的手机能力，比如使用uni.getNetworkType()就可以直接去获取我们当前的一个手机的网络环境

onLoad: function() {
   uni.getNetworkType();
}
  • 数据绑定及事件处理同vue.js规范

数据绑定、条件判断、列表渲染，点击事件、输入事件等，都是跟vue没有太大的出入的

  • 为兼容多端运行，建议使用flex布局

web开发中，在使用flex布局的时候不同的浏览器可能要去加不同的浏览器前缀来做一个适配，而在uni-app中可以直接使用所有样式，兼容的问题可以通通抛给uni-app框架完成

2. uni-app特色

  • 条件编译

难免会有一些平台，有些功能，其他的平台不支持，但是uniapp并不能去抹平这些平台差异，这个时候写大量的if else的代码，会让我们的代码变得很难维护，而且编译到不同的工程之后，再想去进行二次修改也会有大量的阻碍

#ifdef DEBUG
  //腾讯bugly
  [Bugly startWithAppId:@"f5248fef57"]; // 测试环境
#else
  // 腾讯bugly，只在release情况下注册
  [Bugly startWithAppId:@"8a159d36e9"]; // 生产环境
#endif

参考这个思路，uni-app给我们提供了一套条件编译的代码，在工程里优雅的去完成平台的个性化实现，编译之后只会把当前条件编译中的代码编译到对应的平台，会减少代码的冗余，也会对代码的二次修改有很大帮助

条件编译写法

说明

#ifdef APP-PLUS

需条件编译的代码

#endif

仅出现在app平台的代码

#ifndef H5

需条件编译的代码

#endif

除了h5平台，其他平台都存在的代码

#ifdef H5 || MP-WEIXIN

需条件编译的代码

#endif

h5或微信小程序平台存在的代码

......

......

展示：package.json文件增加自定义模式运行

  • APP的nvue开发

内置weex渲染引擎的nvue提供了原生的渲染能力，在nvue中我们既可以使用weex的组件、API，也可以使用uni-app的组件和API，相当于是nvue为weex渲染引擎补充了大量uni-app的组件和API，在使用过程中会更加的快捷和方便

  • HTML5+

HTML5+引擎可以帮助我们在APP端直接调用原生的插件，像一些比较复杂的功能在纯前端很难去做到的时候，我们可以使用原生的安卓和iOS插件来帮助我们去实现这些功能；同时5+还内置了几十万API方法，让我们能够方便的快速去实现丰富的原生能力。

需要注意的是我们刚刚说到的nvue和5+只能在APP端去使用，在h5和小程序端是无法使用的。如果我们的项目只是去开发APP端的话，不妨去体验nvue和5+的一些能力。

3. uni-app基础知识点

  • 语法 展示
    • 数据键值对形式产生
    • 插值表达式{{}}
    • 自定义方法
    • 数据绑定 （this作用域的理解）
      • 基础数据绑定 --- 变量赋值(传递)
      • click绑定点击事件
      • 条件渲染

v-if和v-show区别：

  • v-if控制元素显示与隐藏实际上是创建和销毁元素；v-show则是控制元素的display属性，显示是block，隐藏是none；

  • v-show频繁切换元素的显示与隐藏，其他情况都用v-if

  • 列表渲染

  • 表单输入绑定

  • 组件

    • 基础组件，view、image、 text等
    • 自定义组件，组件化思想去做开发

  • 生命周期

  • 页面生命周期

  • 组件生命周期

  • API

    • 基础调用
    • 网络请求

    uni.request({ url: url, method: method, data: data, header: { 'Content-Type': 'application/json' }, success: (res) => { // 成功逻辑 console.log("request body: " + JSON.stringify(data)); }, fail: (res) => { // 失败逻辑 util.showToast("错误信息"); } });

  • 路由（没有vue-router的概念，更接近小程序的页面切换，所有的页面切换都可以理解为路由）

    1.保留当前页面，跳转到应用内的某个页面 uni.navigateTo({ url: 'test?id=1&name=uniapp' });

    2.关闭当前页面，跳转到应用内的某个页面 uni.redirectTo({ url: 'test?id=1' });

    3.关闭所有页面，打开到应用内的某个页面 uni.reLaunch({ url: 'test?id=1' });

    4.跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 uni.switchTab({ url: '/pages/index/index' });

    5.关闭当前页面，返回上一页面或多级页面 可通过 getCurrentPages() 获取当前的页面栈 // 此处是A页面 uni.navigateTo({ url: 'B?id=1' }); // 此处是B页面 uni.navigateTo({ url: 'C?id=1' }); // 在C页面内 navigateBack，将返回A页面 uni.navigateBack({ delta: 2 });

    6.预加载页面 uni.preloadPage({url: "/pages/test/test"});

  • 布局 样式的简单了解

  • 运行 （预览）及打包

avatar
文章
阅读
粉丝