uni-app的基本使用教程

目录

• 一、uni-app介绍
• 1.1为什么要去学习uni-app？
• 1.2 环境搭建
• 1.3 利用HbuilderX初始化项目
• 1.4 运行项目
• 1.5 介绍项目目录和文件作用
• 2.全局配置和页面配置
• 2.1 通过globalStyle进行全局配置
• ​2.2 创建新的message页面
• 2.3 通过pages来配置页面
• 2.4 配置tabbar
• 2.5 condition启动模式配置

一、uni-app介绍

​​uni-app​​​ 是一个使用 ​ ​Vue.js​​ 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

即使不跨端，​​uni-app​​同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验，可快速上手uni-app

1.1为什么要去学习uni-app？

相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。

1.2 环境搭建

安装编辑器HbuilderX ​(应用商城下载即可）

HBuilderX是通用的前端开发工具，但为​​uni-app​​做了特别强化。

下载App开发版，可开箱即用

安装微信开发者工具 微信开发者工具下载地址与更新日志 | 微信开放文档

1.3 利用HbuilderX初始化项目

点击HbuilderX菜单栏文件>项目>新建
选择uni-app,填写项目名称，项目创建的目录

1.4 运行项目

在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意：

如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
微信开发者工具在设置中安全设置，服务端口开启

1.5 介绍项目目录和文件作用

• ​​pages.json​​ 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
• ​​manifest.json​​ 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
• ​​App.vue​​​是我们的跟组件，所有页面都是在​​App.vue​​下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
• ​​main.js​​​是我们的项目入口文件，主要作用是初始化​​vue​​实例并使用需要的插件。
• ​​uni.scss​​​文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，​​uni.scss​​文件里预置了一批scss变量预置。
• ​​unpackage​​就是打包目录，在这里有各个平台的打包文件
• ​​pages​​所有的页面存放目录
• ​​static​​静态资源目录，例如图片等
• ​​components​​组件存放目录

为了实现多端兼容，综合考虑编译速度、运行性能等因素，​​uni-app​​ 约定了如下开发规范：

页面文件遵循​ ​Vue 单文件组件 (SFC) 规范​​
组件标签靠近小程序规范，详见​ ​uni-app 组件规范​​
接口能力（JS API）靠近微信小程序规范，但需将前缀​​wx​​​ 替换为​​uni​​​，详见​ ​uni-app接口规范​​
数据绑定及事件处理同​​Vue.js​​ 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发

2.全局配置和页面配置

2.1 通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。​

​2.2 创建新的message页面

右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板

<template>
  <view>
    这是信息页面
  </view>
</template>

<script>
</script>

<style>
</style>

2.3 通过pages来配置页面

pages数组数组中第一项表示应用启动页

"pages": [ 、
    {
      "path":"pages/message/message"
    },
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    }
  ]

通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path":"pages/message/message",
      "style": {
        "navigationBarBackgroundColor": "#007AFF",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true,
        "disableScroll": true,
        "h5": {
          "pullToRefresh": {
            "color": "#007AFF"
          }
        }
      }
    }
  ]

2.4 配置tabbar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

Tips:

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

案例代码：

"tabBar": {
    "list": [
      {
        "text": "首页",
        "pagePath":"pages/index/index",
        "iconPath":"static/tabs/home.png",
        "selectedIconPath":"static/tabs/home-active.png"
      },
      {
        "text": "信息",
        "pagePath":"pages/message/message",
        "iconPath":"static/tabs/message.png",
        "selectedIconPath":"static/tabs/message-active.png"
      },
      {
        "text": "我们",
        "pagePath":"pages/contact/contact",
        "iconPath":"static/tabs/contact.png",
        "selectedIconPath":"static/tabs/contact-active.png"
      }
    ]
  }

2.5 condition启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明：

list说明：

到此这篇关于uni-app的基本使用的文章就介绍到这了,更多相关uni-app基本使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！