App二级页面怎么做

‘壹’ 商城APP搭建需要准备什么

这个搭建的话，他无非就是资料的问题，包括认证的资料和搭建商城用的素材，视频，照片，以及需要上架的商品的资料。
认证的这部分要根据运营商的不同，准备不同的资料，一般是身份证和营业执照，和收款的银行卡手机号，市场上基本都是需要营业执照要收款的，据我了解，广州的软猫引擎是个人身份证就 可以开通
首先第一步要明确框架结构，包括主题色调，呈现给客户的是要达到什么样的效果
第二部步就是正对每一个UI页面的部件进行增加调整修改，这个包括提前上架好相应的产品，好让产品在界面展示。接下来就是二级三级页面的搭建，完成后对每一个页面每一个组件做一个跳转功能，基本的商城就以及成型了。

‘贰’ uniapp项目实践总结(七)编写一个简单的应用页面

之前已经自定义了顶部和底部导航栏，现在我们将编写一个简单的二级页面，这是除了导航页面之外，经常需要用到的。

一个普通页面的结构通常如下所示：

uniapp 内置了常用的组件，可以直接使用，与微信小程序类似。

样式支持css、scss、less、stylus，支持@import导入外部样式表。

支持以下通用尺寸：

nvue 不支持，vue 支持：

nvue 不支持百分比;

uni-app 中页面的宽度计算公式为：750 * 元素在设计稿中的宽度 / 设计稿基准宽度；

例如：

使用@import 'path/name.scss';

例如：

App.vue中的样式即为全局样式，对于每一个页面通用，nvue 页面不支持全局样式。

在组件的属性中使用 class 或者 style 添加样式。

在 uniapp 中，*选择器无效，page相当于body，微信小程序仅支持class选择器。

使用@font-face自定义字体。

以下是一些js中的内容。

这里重点关注生命周期，包括页面的组件的生命周期。

常用到的就是onLaunch，onLoad，onShow，onHide等钩子函数。

常用到的就是created，onLoad，onShow，onHide等钩子函数。

以下都是 vue3 中的setup 语法糖下面的使用场景。

导入你要使用的方法。

在pages.json配置:

导入你要使用的方法。

例如：

例如：

父组件接收:

例如：

vuex 状态管理，主要是引入和使用。

在pages/index文件夹下面新建一个list.vue的文件，在pages.json注册路由。

在uni.scss里面定义以下全局变量。

一个导航页面包括状态栏、顶部导航栏、中间内容区和底部导航栏四块区域，一个普通的页面就是没有底部导航栏。

可以在之前的styles文件夹的global.scss里面定义全局样式规则，包括整体页面，中间部分，状态栏部分的样式。

以上就是编写一个简单的应用页面的主要内容，有不足之处，请多多指正。

‘叁’ 移动APP的常见的几种导航形式

当确定了APP的设计需求和产品的整体结构之后，要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好，很大部分取决于APP界面布局的合理性。这个时候就要想以最优的设计结构将APP的内容展现给用户，那么，如何将信息以最优的形式展现出来呢？这就涉及到了APP的导航应用方式，可以说一个优秀的导航设计对一款App的核心体验起到了决定性的作用！

知道了导航的重要性，在考虑导航设计时，需要注意以下事项：

1.可达性：

移动应用的导航功能可以说是所有界面最重要的组成部分，因此一定要保证其可达性，并把最关键的要素尽量突出，同时不要影响到内容本身。

2.目的性：

确保导航中的每个按钮要素简单明了，有明确的引导用户点击的目的性。让用户一看就知道是什么意思以及操作结果是什。不要弄的太过花哨，这样反而会让迷惑用户，起到反作用。

3.易于理解：

如果想设计比较高级的导航功能（例如链接图片、允许滑动或其他手势导航，或者访问隐藏菜单），请务必在设计过程中保证前后一致，以便用户熟悉你所使用的模式，同时还应加入一些额外的信息（例如小箭头、文字或改变颜色或高亮等）来吸引用户注意力，并以微妙的方式对用户进行引导。不要给用户呈上“看得见摸不着的导航功能”。

4.通用性

导航功能应当以一定的形式显示于移动应用的各个界面。各个导航模式不一定要完全相同，但其基本结构应当在应用内保持一致，可以根据背景进行小幅度的调整。

明确上述几点注意事项后，将APP的信息结构分层，把主要、最核心、最根本的功能放在第一层级，次要内容放在第二层级甚至更深。然后根据层级关系、结构关系确定导航的形式。

结合产品的深度和广度来共同探讨一下目前APP界面常见的几种导航形式，并分析其优缺点，从而进一步判断每一种导航形式更适合应用于哪种类型的APP！

标签式导航，也就是常说的Tab式导航。是目前应用最广泛、最常见的导航形式。

标签式导航可分为 顶部标签式导航、底部标签式、舵式导航（底部扩展式导航）。

顶部标签式导航

顶部标签式导航顾名思义，存在于页面的顶部。顶部标签导航多应用于Android平台，因其平台特性，底部含有虚拟的物理按键，如华为手机存在手机屏幕内的物理按键。

很多App为了适配安卓平台，采用了顶部标签式导航，目的是为了不与底部虚拟按钮组合在一起产生的信息堆叠和误操作，这也是一种妥协行为。但不断升级的Android平台app现如今也和ios尽量保持一致。

不过也有很多ios平台根据产品结构应用此类型的导航。

上图是虾米音乐app首页导航模式，采用了顶部标签式导航。这样设计是为了 更多展示标签下的内容，还有一点是支持快捷操作 。方便展示/点击下方快捷区域的内容和按钮（当前曲目、歌手、播放/暂停和下一曲）。

底部标签式导航

底部标签式导航是最常用的导航形式，一般存在于页面底端，不超过5个模块。

如果应用需要用户 频繁的在不同分页切换 ，可以采用这种导航，如上图微信最新版的APP界面设计图。这种导航栏符合拇指操作热区。

舵式导航（底部扩展式导航）

舵式导航是底部导航的一种扩展形式，是一种变体。因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。

当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口 ，就可以采用这种APP导航模式。 中间项标签不紧操作最频繁，最重要，且需要引人注意，方便寻找 。

左图为懒人听书App，右图为新浪微博手机客户端。两款App的主要功能都采用了舵式导航的布局方式，将操作最频繁的按钮进行特殊处理，在视觉设计上突出，与导航上的其他按钮进行区分，引导用户操作。

顶部导航+底部导航（双导航模式）

今日头条和网易新闻这种新闻类APP，由于内容、分类较多，运用顶部和底部双tab导航，而切换频率最高的tab放在顶部，这是为什么呢？因为新闻在每个tab都是沉浸式阅读，最常用的操作是在一个tab中不断地下滑阅读内容，将常用的tab放在顶部，向左或向右滑动切换tab的手势操作，能带来更好地阅读体验。

在两种情况下可以选择顶部tab式导航：某项功能必须固定在底部，那么其他tab只能固定在顶部，但为了方便操作，顶部tab导航最好支持手势操作，即滑动即可切换;该APP是沉浸式体验，如新闻、小说等，为了带给用户更好的阅读体验，可以将tab放在顶部。

实际上，底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式，他不怎么出彩，但是绝对不会犯错。在大屏幕时代，底部Tab模式的导航更能适应，也更好设计。

适用于：

入口分类数目不多，可以控制在5个以内，且用户需要在入口间频繁切换来执行多个任务

注意：

结构太过复杂而且不稳定的应用不适合标签式导航。

抽屉式导航模式一般采用将导航主体隐藏在app侧边的方式，以一个按钮来呼出导航，在使用完成之后在使用相同的按钮隐藏起来。一拉一缩，从形象上与抽屉类似，因此称之为抽屉式导航。

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。 设想你的产品信息层级有非常多的页面和内容，难以在一屏内显示全部内容，那么你一定首先会想到去设计一个底部或顶部的tab导航，但导航太多无疑显得臃肿，而且使用户难以点击，那么这个时候，抽屉式导航是个不错的选择。

抽屉式导航存在几个缺陷：

1.左上角的导按钮存在于单手拇指操作热区难以到达的位置，导致导航按钮难以触达；2.降低了用户对产品一半的参与度；3.可见性低。

有些人认为“现在的APP的发展不仅仅是从前单一的功能，功能随产品的发展变得越来愈多，抽屉式导航已经不适应大多数的产品，这种导航终将被遗弃”。但是，导航栏的使用方式并不是单纯随着看产品的功能增加而不被使用，而是随着整个产品的信息结构和功能形式来设计决定的。抛开产品的功能表现而去讲产品设计是不合理的。

何种情况下适合使用抽屉式导航：

1.如果应用主要的功能和内容都在一个页面里面。只是一些低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观，可以把这些辅助功能放在抽屉栏里。

2.如果应用有不同的视图，且他们是平级的，需要用户同等地对待，抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。

3.在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个不错的选择。

注意：

需要用户有一定参与的信息层级，最好不好放置在抽屉栏

跳板／快速启动／宫格导航是将主要入口全部聚合在页面，让用户做出选择。

采用这种导航的应用已经越来越少， 往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。 如下图新浪微博，点击导航栏中间的发布按钮，弹出二级菜单，这个二级页面就是采用的宫格式导航，作为发布微博的入口。

这种导航模式非常常见，但是却不常用。

无论你用的是Android还是iOS，每天一打开手机，宫格式导航就会对你说hello了。

每一个APP都是一个宫格，这些宫格聚集在中心页面，用户只能在中心页面进入其中一个宫格，如果想要进入另一个宫格，必须要先回到中心页面，再进入另一个宫格。每个宫格相互独立，它们的信息间也没有任何交集，无法跳转互通。因为这种特质，宫格式导航被广泛应用于各平台系统的中心页面。

宫格式导航的缺陷 ：

信息互斥，无法相互通达，只能给用户带来了更多的操作步骤。无法让用户在第一时间看到内容，选择压力较大。

何种情况下适用于宫格式导航：

适合入口相互独立互斥，且不需要交叉使用的信息归类

注意：

一旦入口需要有所交集，必然导致更多的操作负累，这个时候只能根据产品特性做出权衡，如果不适合，建议果断拒绝这种方式。

列表式导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。作为辅助导航来展示二级甚至更深层级的内容

列表式导航分为3类： 标题式列表、内容式列表、嵌入式列表。

标题式列表 :一般只显示一行文字，有的显示一行文字加一张图片等等。

内容式列表： 主要以内容为主，所以在列表中就会体现出部分内容信息，点击进去就是详情。

嵌入式列表： 嵌入式其实就是由多个列表层级组合而成的导航。能很好的解决次要功能非常多的问题

所有关于列表导航的例子大部分都是依附于标签导航之上的。前面我就说过现在以列表形式作为主导航的产品是越来越少，因为确实它不是一个好的主要展示形式。 列表项目可以通过间距、标题等进行分组，形成扩展列表。 列表菜单导航可以将重要的UI部分以列表的形式进行呈现，让用户可以滚动查看自己要执行的操作或内容。

而在二次层级上，它们还会 将列表分模块进行展示 ，如微信中“我的”模块“新消息通知、隐私、通用”是一组，“帮助与反馈、关于微信”又是一组。虽然你能看到，但是不仔细观察就不会发现其中的要点。只要善用这个细节，可以更好的加以区分次要功能，并提升用户体验度。

悬浮icon导航，是将导航页面分层，无论你到达APP的哪个页面，悬浮icon永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方。

悬浮式icon会遮挡某些页面的操作，在设计的时候应该考虑进去，比如无论在那个页面永远为悬浮icon留有位置。

标签式导航： 最常用、最不易出错，请第一时间考虑它

抽屉式导航： 如果你的信息层级繁多，可以考虑将辅助类内容放在抽屉中

跳板式／宫格式导航： 不建议在APP中作为主导航使用，如果非使用不可，请增加跳转的关联性

列表式导航： 作为辅助导航来展示二级甚至更深层级的内容，每个APP必不可少，但请注意数量与分类

悬浮式导航： 更适应大屏的导航模式，不妨试一试，但注意不要让它遮挡住某些页面的操作

还是那句话，优秀的app导航设计，能够合理地完美展示产品的功能，并快速引导用户使用，增强用户的识别度。合理的导航设计，会让用户轻松达到目的而又不会干扰和困扰用户的选择。

感谢大家的耐心阅读，还有一路陪伴的行业大牛为我指点迷津！如果内容观点有不对的地方，欢迎批评指正！

‘肆’ APP的一级页面，二级页面是怎么划分的

输入考试吧网站域名进入考试森携缺吧首页，这就是一级页面，然后再点击它上面的“英语”或者“计算机“类别，就进入了二级页面。

二级页面就是在一级页面上的链接，当然一级页面指网站主页的链接的页面。动态2级页面就是指的在动态网页中。

(4)App二级页面怎么做扩展阅读：

通过超链接链接到隐含某文件（如DOC，习，SGML等）。元数据与语义的元信息，字符集信息，文件类型描述（DTD），等等。网页实际是一个文件，它存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。

网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序。网页文件会被传送到你的计算机，然后再通此辩过浏览器解释网页的内容，再展示到你的眼前。

‘伍’ 什么是APP的一级界面和二级界面

我们拿考试吧的网站来举例吧，输入考试吧网站域名进入考试吧首页，这就是一级页面，然后再点击它上面的“英语”或者“计算机“类别，就进入了二级页面，比如说我们刚点击的是计算机等级考试进入的二级页面，在计算机等级考试的页面中点击“计算机一级”就进入了三级页面。