手把手教你用uniapp开发一个app

1. 邂逅 uniapp

uniapp 是 Dcloud 公司开发的使用 vue.js 开发所有前端应用的框架,我们只用写一套代码,就可以打包发布到华为商城、小米商城、Appstore 等各大应用平台,也可以发布到微信小程序平台,更可以发布到支付宝、钉钉等应用平台。

通俗易懂解释:

以前开发 app 或者微信小程序,我们还要学习 Android、ios 开发、小程序开发等技术,太 TMD 麻烦,根本卷不动。

现在有了 uniapp 这个框架之后,我们只需要懂 vue,就可以通过 vue 开发出一个 app 应用。

开发完之后你可以打包发布到各大应用平台,也可以打包发布成一个微信小程序。简直一箭多雕!

2. HBuilderX 安装与配置

我们使用 uniapp 开发应用一般使用官方提供的 HBuilderX 开发工具。

2.1 HBuilderX介绍

HBuilderX 是 Dcloud 公司开发的一个轻便、极速、强大的 IDE 工具。

这个开发工具内置了 uniapp 、vue 框架,非常的好用。

2.2 下载安装 HBuilderX

公司官网:

css 复制代码
https://www.dcloud.io/hbuilderx.html

2.3 配置 HBuilderX

1.设置主题

2.设置代码字体和大小

工具 -》 设置

2.4 安装插件

工具 =》 插件安装

HbuilderX 内置了很多常用的插件,我们也可以去插件市场单独下载安装其他插件

3.新建基于 Vue3 的 uniapp 项目

3.1 新建项目

文件-》新建-》项目

新建基于 Vue3 的项目

启动项目

这里选择在 chrome 浏览器中打开

F12,切换到手机预览模式

3.2 项目目录结构

  • components :可复用的组件
  • pages:页面
  • static:静态资源,存放图片视频等
  • main.js :Vue初始化入口文件
  • App.vue:应用配置,用来配置App全局样式以及监听
  • pages.json :配置页面路由、导航条、选项卡等页面类信息
  • manifest.json :配置应用名称、appid、logo、版本等打包信息
  • uni.scss : 内置的常用样式变量

4. uniapp 页面

我们运行项目之后,默认展示的是 index.vue 里面的内容

打开页面我们发现 script 里面默认是 Vue2 的选项式 API,接下来我们新建 Vue3 的组合式 API 页面。

4.1 新建页面

新建页面默认会创建同名目录

page.json 会自动添加该页面的配置

4.2 uniapp 页面标签

4.2.1 view 和 text

在 uniapp 的项目中,不能写 div 和 span 标签,只能用官方提供的组件标签代替。

其中 view 标签代替 div 标签,text 代替 span 标签。

css 复制代码
<view>
    <text class="title">{{title}}</text>
</view>

4.2.2 image

在 uniapp 的项目中, image 标签用来加载图片。

css 复制代码
<image class="logo" src="/static/logo.png"></image>

4.3 pages.json: 页面配置

官网 pages.json 相关的文档:

css 复制代码
https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

所有跟页面相关的配置都在 pages.json 这个文件里面。

  • pages:单个页面的配置,path 是该页面所在的路径,style 是样式配置
  • globalStyle:全局页面统一样式配置

我们新建两个页面:index.vue 和 order.vue

4.3.1 页面展示顺序

配置项中的第一个页面,作为当前工程的首页(启动页)

运行项目,展示的是 index.vue 页面的内容

这是因为 index.vue 的配置属性在最前面

我们将 order.vue 的配置属性放在最前面

保存之后,项目会优先展示 order.vue 的内容

4.3.2 单页面配置

单个页面的配置主要是配置 style 属性

  • navigationBarTitleText : 导航栏标题文字内容
  • navigationBarBackgroundColor : 导航栏背景颜色
  • navigationBarTextStyle : 导航栏标题颜色及状态栏前景颜色,默认 black, 仅支持 black/white
  • navigationStyle :导航栏样式,默认 default ,仅支持 default/custom。custom 即取消默认的原生导航栏
  • enablePullDownRefresh :是否开启下拉刷新,默认 false

单页面配置主要事项:

1.navigationStyle 默认是 default,如果设置为 custom,表示自定义,也就不会显示默认的页面导航栏。

2.enablePullDownRefresh 默认是 false,不刷新。当页面需要重新加载新数据的时候可以设置为 true。

4.3.3 全局页面配置

当单个页面没有配置页面样式时,就展示全局页面设置的样式

  • navigationBarTextStyle: 导航栏标题颜色及状态栏前景颜色,仅支持 black/white

  • navigationBarTitleText:导航栏标题文字内容

  • navigationBarBackgroundColor:导航栏背景颜色

  • backgroundColor:下拉显示出来的窗口的背景色

例:index.vue 沒有配置 style 样式,默认显示全局页面的配置

4.3.4 底部导航栏配置

底部导航栏需要在 pages.json 里面配置 tabBar 属性。

tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

  • color:tab 上的文字默认颜色
  • selectedColor:tab 上的文字选中时的颜色
  • position:tabBar 位置,默认 bottom,可选 top
  • fontSize: 文字默认大小
  • list:tab 列表
  • pagePath:页面路径,必须在 pages 中先定义
  • text:tab 上按钮文字
  • iconPath:图片路径
  • selectedIconPath:选中时的图片路径

这里设置 index.vue、message.vue、user.vue 三个页面为底部导航栏。

5. 内置组件

官网关于内部组件的文档:

css 复制代码
https://uniapp.dcloud.net.cn/component/

内置组件有很多,大家可以去官网查看文档学习,这里只列举几个常用的组件

5.1 按钮

css 复制代码
<button size="default" type="primary">按钮</button>
<button size="mini" type="warn">按钮</button>
  • size: 尺寸,只有 default 和 mini 两个选项
  • type: 类别,有 primary 、default、warn 三个选项

5.2 input 框

css 复制代码
<input class="uni-input" style="border: 1px solid gray;" placeholder="请输入用户名" />
<input class="uni-input" :password="true" placeholder="请输入密码" />
<input class="uni-input" type="number" placeholder="请输入数字" />
  • type:text、number、idcard
  • placeholder:输入框为空时占位符
  • disabled:是否禁用
  • maxlength:当 type 为 Number 时,最大输入长度,设置为 -1 的时候不限制最大长度

5.3 轮播图:swiper

css 复制代码
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
    <swiper-item>
        <view class="swiper-item uni-bg-red">A</view>
    </swiper-item>
    <swiper-item>
        <view class="swiper-item uni-bg-green">B</view>
    </swiper-item>
    <swiper-item>
        <view class="swiper-item uni-bg-blue">C</view>
    </swiper-item>
</swiper>
  • indicator-dots : 是否显示面板指示点
  • indicator-active-color:当前选中的指示点颜色
  • autoplay:是否自动切换
  • duration:滑动动画时长,默认500
  • interval:自动切换时间间隔,默认5000

6. 扩展组件: uni-ui

uniapp 的内置组件比较少,缺少例如弹框、下拉列表等常见组件。

为了满足大部分公司的功能需求,uniapp 的公司 DLCOUD 提供了的一个跨端的 ui 库:uni-ui。

uni-ui 是基于 vue 组件的、flex 布局的跨全端 ui 框架,它不包括内置组件,它是内置组件的补充。

uni-ui 官方文档:

css 复制代码
https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html

接下来介绍一下 uni-ui 的使用方法

方式一:直接新建内置 uni-ui 的项目

在代码区输入 u ,拉出各种内置或 uni-ui 的组件列表,选择其中一个,即可使用该组件。

css 复制代码
  <view class="container">
      <uni-card title="知否技术"  note="Tips">
          公众号: 知否技术
      </uni-card>
  </view>

方式二:单独导入某个组件

下载导入

接着就可以在代码里面使用了

7. 页面跳转

关于页面和路由的官方文档:

css 复制代码
https://uniapp.dcloud.net.cn/api/router.html#navigateto

7.1 跳转到指定页面:非 TabBar 页面

uni.navigateTo( )

参数:

  • url : 页面路径

例如:

css 复制代码
<template>
	<view class="content">
		<button type="primary" @click="toOrder"> 跳转到订单页</button>
	</view>
</template>

<script setup>
	const toOrder = () => {
		uni.navigateTo({
			url: "/pages/order/order"
		})
	}
</script>
<style lang="scss">
</style>

注:该方法只能跳转非 TabBar 的页面,也就是说不能用 navigateTo 方法跳转底部导航页面。

要跳转 TabBar(底部导航)页面,只能使用 switchTab 方法跳转,例如:

7.2 跳转页面并携带参数

1.跳转页面

css 复制代码
<template>
	<view class="content">
		<button type="primary" @click="toOrder"> 跳转订单页面</button>
	</view>
</template>
<script setup>
	const toOrder = () => {
		uni.navigateTo({
			url: "/pages/order/order?age=18&name=zhifou"
		})
	}
</script>
<style lang="scss">
</style>

2.获取参数

从 uniapp 的周期函数 onLoad 获取,后续会详细介绍 uniapp 的生命周期

css 复制代码
<template>
	<view>
		订单页
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	onLoad((option) => {
		console.log("name", option.name)
		console.log("age", option.age);
	})
</script>

3.结果

7.3 返回上一页

uni.navigateBack():关闭当前页面,返回上一页面或多级页面

参数:

  • delta: 默认 1 ,返回的页面数,如果 delta 大于现有页面数,则返回到首页。

例如:

css 复制代码
<template>
	<view>
		订单页
		<button type="primary" @click="back"> 返回上一页</button>
	</view>
</template>

<script setup>
	const back = () => {
		uni.navigateBack();
	}
</script>
相关推荐
每天都要喝奶茶16 分钟前
vue3uniapp实现自定义拱形底部导航栏,解决首次闪烁问题
前端·vue.js·uni-app
May_Xu_17 分钟前
vue3+less使用主题定制(多主题定制)可切换主题
前端·javascript·vue.js·vue·less·css3
1登峰造极19 分钟前
uniapp 打包安卓证书生成完整流程
uni-app
Python大数据分析32 分钟前
JetPack Compose安卓开发之底部导航Tabbar
android·vue.js·elementui
Jocelyn_书1 小时前
uniapp编译多端项目App、小程序,input框键盘输入后
小程序·uni-app·项目
雪芽蓝域zzs1 小时前
uni-app 运行HarmonyOS项目
uni-app·harmonyos
言6662 小时前
vue点击菜单,出现2个相同tab,啥原因
前端·javascript·vue.js
王哲晓11 小时前
第六章 Vue计算属性之computed
前端·javascript·vue.js
Hadoop_Liang11 小时前
Docker Compose一键部署Spring Boot + Vue项目
vue.js·spring boot·docker
yqcoder12 小时前
electron 监听窗口高端变化
前端·javascript·vue.js