零基础学习App开发的第2天------配置

APP开发


浏览:688 次

1、 前言

正如我们之前提到的,Uniapp实际上是一种支持多个端的技术,因此它具有高度的兼容性和快速性。但是,如果我们想给它更多的功能,我们需要先配置每个页面,这与微信小程序相同。让我们看看下面的内容。

2、 创建App界面

要配置uniappApp,首先我们需要创建一个带有空模板的uniapp程序,如图所示:

相片

3、 配置

DCloud官方文档上的配置主要如下:

属性

类型

要求的

描述

平台兼容

全局样式

对象

设置默认页面的窗口表示

对象数组

设置页面路径和窗口表示

轻松通信

对象

自动导入零部件的规则

2.5.5+

选项卡栏

对象

设置底部选项卡的性能

条件

对象

引导模式配置

子包

对象数组

分包加载配置

预加载规则

对象

分包预下载规则

微信小程序

工人

一串

放置工作代码的目录

微信小程序

左侧窗口

对象

大屏幕左侧窗口

第5小时

顶部窗口

对象

大屏幕顶部窗口

第5小时

右侧窗口

对象

大屏幕右侧窗口

第5小时

4、 页面配置

如果我们希望页面出现在App中,我们需要在页面中设置它。json,类似于applet中的规则,如图所示:

相片

此时,我们可以看看空模板中显示的效果。我们直接让它在内置浏览器中运行,如图所示:

相片

如果我们想在此时更改顶部导航的文本,也非常简单,如图所示:

相片

如果要更改显示的内容,只需在vue文件中进行更改,如图所示:

相片

如果我们想配置其他页面,我们必须在页面中设置它们。json,如图所示:

相片

相片

将创建一个页面。

5、 生命周期

因为它基于vue,uniapp与vue具有相同的生命周期,也有类别,如下所示:

1.应用生命周期

这些功能只能在App.vue中收听。侦听其他页面无效。

函数名称

解释

启动时

当uni-app初始化完成时触发(仅全局一次)

在Show上

当uniApp启动或从后台进入前台时

打开隐藏

当uni app从前台进入后台时

打开错误

当uniApp报告错误时触发

onUniNView消息

监视nvue页面发送的数据

未处理拒绝

拒绝未处理Promise的事件侦听器函数(2.8.1+)

未找到页面

页面上不存在侦听器函数

关于主题更改

监控系统主题更改

2.页面生命周期

函数名称

解释

平台差异说明

启动

聆听页面的初始化。其参数与onLoad参数相同。它们是从上一页传输的数据。参数类型为Object(用于页面参数传输)。触发时间早于onLoad

百度小程序

加载

监视页面加载。该参数是从上一页传输的数据。参数类型为Object(用于页面参数传输)

在Show上

将显示监控页面。每次页面出现在屏幕上时触发,包括从较低的页面点返回以显示当前页面

打开就绪

首次呈现侦听器页面。请注意,如果渲染速度很快,它将在页面进入动画之前触发

打开隐藏

隐藏监视页面

打开卸载

监控页面卸载

调整大小

监控窗口尺寸变化

App、微信小程序

下拉刷新

侦听用户下拉操作,通常用于下拉刷新

到达底部

将页面滚动到底部(而不是将视图滚动到底部)的事件通常用于下拉下一页的数据。有关详细信息,请参见以下注意事项

在TabItemTap上

单击选项卡时触发。参数为Object。有关详细信息,请参见以下注意事项

微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App

在ShareAppMessage上

用户单击右上角共享

微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序

onPageScroll(页面滚动)

监视器页面滚动。参数为Object

NVUE暂时不支持

导航栏按钮点击

收听原始标题栏按钮的点击事件。参数为Object

App、H5

打开BackPress

监控页面返回事件={from:backbutton,navigateBack}。Backbutton表示源是左上角的返回按钮或android返回键;NavigateBack表示源是uni.NavigateBack。支付宝小程序只能由真机触发,只能监听非navigateBack导致的返回。无法阻止默认行为。

App,