vue微信小程序开发(二)---页面以及导航

﹏ヽ暗。殇╰゛Y 2022-12-20 12:43 160阅读 0赞

# vue微信小程序开发(二)—菜单以及页面 #

### 这里写目录标题 ###

*  vue微信小程序开发(二)---菜单以及页面
 *  图标的选择
 *  创建并注册页面
 *  底部导航

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`  
> ![在这里插入图片描述][20201110144238980.gif_pic_center]

上篇我们讲了开发环境的搭建 [文章入口][Link 1]  
现在开始开发  
![在这里插入图片描述][20201112150648580.png_pic_center]  
**components :组件 一般不用管  
pages: 页面目录  
static: 静态资源  
unpackages:编译生成的小程序在这里  
App.vue:入口  
main.js js文件可以注册全局组件引入全局js等  
manifest.json:基础配置文件  
pages.json:页面配置文件  
uni.scss:uni-app内置的常用样式变量**

# 图标的选择 #

往往我们切换个人和首页切换图标会改变颜色  
但是首先我们要去选择图标 一个图标下载两个颜色版本 一个为选择状态 一个未选择状态  
推荐 [阿里矢量图][Link 2]  
找到想要的图片

![在这里插入图片描述][20201112150522502.gif_pic_center]  
在Hbulider x中的static下新建tabs目录 将下载好的图片放在tabs目录下并改名 遵从英文翻译即可  
![在这里插入图片描述][20201112151139367.png_pic_center]

active为选中状态

# 创建并注册页面 #

基础配置文档入口 :[https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]

可以使用Hbuilder X快速创建 创建的页面会自动导入pages.json  
![在这里插入图片描述][20210104211518677.gif]

在pages目录下新建目录 在目录中新建index.vue文件  
如下图  
![在这里插入图片描述][20201112151511559.png_pic_center]

找到pages.json文件注册页面

"pages": [{
    		"path": "pages/index/index",
    		"style": {
    			"navigationBarTitleText": "首页"
    		}
    	},
    	{
    		"path": "pages/mine/index",
    		"style": {
    			"navigationBarTitleText": "我的"
    		}
    	}]

如上代码，我们创建了两个页面并注册了页面

# 底部导航 #

tabBar中绑定导航页面  
color backgroundColor等为设置样式，按照翻译意思理解即可  
在list中\{  
text为页面名称  
pagePath为页面地址  
iconPath为图标地址(未选中)  
selectedIconPath为选中时图片地址  
\}

"tabBar": {
    	  "color": "#999",
    	  "backgroundColor": "#fafafa",
    	  "selectedColor": "#333",
    	  "borderStyle": "white",
    	
    	  "list": [{
    	    "text": "首页",
    	    "pagePath": "pages/index/index",
    	    "iconPath": "static/tabs/home.png",
    	    "selectedIconPath": "static/tabs/home-active.png"
    	  }, {
    	    "text": "我的",
    	    "pagePath": "pages/mine/index",
    	    "iconPath": "static/tabs/mine.png",
    	    "selectedIconPath": "static/tabs/mine-active.png"
    	  }],
    	  "position": "bottom"
    	}

配置完成效果如下  
![在这里插入图片描述][20201112150151439.gif_pic_center]  
我们可以通过这种方式来添加页面以及配置底部导航 当然也可以自定义导航  
  
  
  
  
  
  
后续会推出

前端：js入门 vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 3] 一定要看哦  
一些插件的使用等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
有问题可以下方留言，看到了会回复哦

[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: /images/20221120/4f0385caf81d43ca97fc0106e2091b7b.png
[Link 1]: https://blog.csdn.net/qq_42027681/article/details/109498751
[20201112150648580.png_pic_center]: /images/20221120/1e149127085a47dab12c891361c63323.png
[Link 2]: https://www.iconfont.cn/
[20201112150522502.gif_pic_center]: /images/20221120/abeecb647db14697bdf89ca80edb1050.png
[20201112151139367.png_pic_center]: /images/20221120/68ca9b71425046f4aa182785a2b90915.png
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[20210104211518677.gif]: /images/20221120/fe555ce31c4d460f80bd2c8d85662f0f.png
[20201112151511559.png_pic_center]: /images/20221120/4ca1098355dc495faf91656af39c78a4.png
[20201112150151439.gif_pic_center]: /images/20221120/776d2d9a907145c3b01136b6bb63f0f1.png
[Link 3]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/82eb4b3f644f453291f3c1591bbff1b7.png