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

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

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

未经本人允许，禁止转载

上篇我们讲了开发环境的搭建 文章入口
现在开始开发

components :组件 一般不用管
pages: 页面目录
static: 静态资源
unpackages:编译生成的小程序在这里
App.vue:入口
main.js js文件可以注册全局组件引入全局js等
manifest.json:基础配置文件
pages.json:页面配置文件
uni.scss:uni-app内置的常用样式变量

图标的选择

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

在Hbulider x中的static下新建tabs目录 将下载好的图片放在tabs目录下并改名 遵从英文翻译即可

active为选中状态

创建并注册页面

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

在pages目录下新建目录 在目录中新建index.vue文件
如下图

找到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"
	}

配置完成效果如下

我们可以通过这种方式来添加页面以及配置底部导航 当然也可以自定义导航






后续会推出

前端：js入门 vue入门 vue开发小程序 等
后端： java入门 springboot入门等
服务器：mysql入门 服务器简单指令 云服务器运行项目
python：推荐不温卜火 一定要看哦
一些插件的使用等

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