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
有問題可以下方留言，看到了會回復哦
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/216175.html
標籤：其他