uni-app实战教程-----H5移动app以及小程序(三)---页面跳转以及底部选项

墨蓝 2023-01-10 01:28 113阅读 0赞

> 创建项目已经完成了  
> qq交流群 974178910  
> 最终效果体验  
> [http://dadandmother.cn/stt/][http_dadandmother.cn_stt]
> 
> 这节课我们来讲下 页面跳转以及底部选项  
> 开发工具: Hbuilder X  
> 完整代码已上传github [https://github.com/dmhsq/image-recognition-flask-uniapp][https_github.com_dmhsq_image-recognition-flask-uniapp]  
> bilibili教程视频 [https://www.bilibili.com/video/BV1R5411H7r2/][https_www.bilibili.com_video_BV1R5411H7r2]  
> 底部有视频教程

### 页面跳转以及底部选项 ###

*  新建页面
 *  底部选项卡
 *   *  选项图标获取
     *  选项卡
 *  页面跳转传参
 *  接收参数
 *  本节课视频
 *  项目体验
 *   *  大学之道亦在自身，努力学习，热血青春

# 新建页面 #

右键你的项目 点击新建页面  
自己命名即可 这里为mine  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]建好后在 pages.json能看到 已被自动添加页面  
![在这里插入图片描述][20210123172546106.png]

# 底部选项卡 #

官方文档地址 [https://uniapp.dcloud.io/collocation/pages?id=tabbar][https_uniapp.dcloud.io_collocation_pages_id_tabbar]  
参考文档给出属性 按照自己需求即可

## 选项图标获取 ##

阿里矢量图 [https://www.iconfont.cn/][https_www.iconfont.cn]  
大家可以根据自己的喜欢去下载  
比如我们要下载 主页选项图标  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]下载两个颜色 一个亮色 一个暗色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]重新命名文件 亮色为 home 暗色为 no-home

在static 目录下 新建image目录 将图片拷贝进去  
![在这里插入图片描述][20210123173408401.png]

同理可得 mine

这里我们一共两个页面 一个当主页 一个当我的

## 选项卡 ##

在pages.json 根目录下添加 tabBar  
官方文档地址 [https://uniapp.dcloud.io/collocation/pages?id=tabbar][https_uniapp.dcloud.io_collocation_pages_id_tabbar]  
有H5基础 或者英文基础 应该都能看懂 看不懂去看文档

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]

"tabBar": {
    	    "color": "#7A7E83",
    	    "selectedColor": "#3cc51f",
    	    "borderStyle": "black",
    	    "backgroundColor": "#ffffff",
    	    "list": [{
    	        "pagePath": "pages/index/index",
    	        "iconPath": "static/image/no-home.png",
    	        "selectedIconPath": "static/image/home.png",
    	        "text": "首页"
    	    }, {
    	        "pagePath": "pages/mine/mine",
    	        "iconPath": "static/image/no-mine.png",
    	        "selectedIconPath": "static/image/mine.png",
    	        "text": "我的"
    	    }]
    	}

效果如下  
![在这里插入图片描述][20210123173755889.gif]

# 页面跳转传参 #

uni.navigateTo(OBJECT)  
官方文档 [https://uniapp.dcloud.io/api/router?id=navigateto][https_uniapp.dcloud.io_api_router_id_navigateto]

这里我们新建一个页面 test  
![在这里插入图片描述][20210123174310601.png]  
在主页 也就是 pages/index/index.vue中 编写函数

我们给图片添加了 点击事件 goTest()

goTest()中 我们要跳转 test页面 (注意tarBar页面不能用这个 而要用uni.switchTab(OBJECT))

goTest()\{  
uni.navigateTo(\{  
url:’…/test/test?name=哈士奇’ 跳转test页面并且传参?后是传参 格式 ?key1=value1$key2=value2…  
\})  
\}

<template>
    	<view class="content">
    		<image class="logo" src="/static/logo.png" @click="goTest()"></image>
    		<view class="text-area">
    			<text class="title">{
       {title}}</text>
    		</view>
    	</view>
    </template>
    
    <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { goTest(){ uni.navigateTo({ url:'../test/test?name=哈士奇' }) } } } </script>
    
    <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style>

# 接收参数 #

在我们跳转的页面 test中  
在onLoad生命页面生命周期中接收参数  
onLoad(xxxx)\{  
console.log(xxx.key1) // value1  
console.log(xxx.key2) // value2  
this,name = xxxx.name //赋值给页面data的name  
\}

<template>
    	<view>
    		<text>{
       {name}}</text>
    	</view>
    </template>
    
    <script> export default { data() { return { name:"" } }, onLoad(option) { this.name = option.name }, methods: { } } </script>
    
    <style> </style>

效果如下  
![在这里插入图片描述][20210123175209161.gif]

# 本节课视频 #

uniapp开发教程-P2-页面跳转以及底部选项

项目 交流群  
535620886  
聊天代码交流总群  
974178910

# 项目体验 #

http://dadandmother.cn/stt/  
或者二维码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]

## 大学之道亦在自身，努力学习，热血青春 ##

[http_dadandmother.cn_stt]: http://dadandmother.cn/stt/
[https_github.com_dmhsq_image-recognition-flask-uniapp]: https://github.com/dmhsq/image-recognition-flask-uniapp
[https_www.bilibili.com_video_BV1R5411H7r2]: https://www.bilibili.com/video/BV1R5411H7r2/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221119/a8fbde7ca50e4a899a88fc0043b35b34.png
[20210123172546106.png]: /images/20221119/b75f6b7052b245a494a4081d809540a7.png
[https_uniapp.dcloud.io_collocation_pages_id_tabbar]: https://uniapp.dcloud.io/collocation/pages?id=tabbar
[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210123173222597.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210123173300788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210123173311565.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20210123173408401.png]: https://img-blog.csdnimg.cn/20210123173408401.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210123173109374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20210123173755889.gif]: https://img-blog.csdnimg.cn/20210123173755889.gif
[https_uniapp.dcloud.io_api_router_id_navigateto]: https://uniapp.dcloud.io/api/router?id=navigateto
[20210123174310601.png]: https://img-blog.csdnimg.cn/20210123174310601.png
[20210123175209161.gif]: https://img-blog.csdnimg.cn/20210123175209161.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210123175957659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70