1.pages.json
官網地址:https://uniapp.dcloud.io/collocation/pages?id=%e9%85%8d%e7%bd%ae%e9%a1%b9%e5%88%97%e8%a1%a8
pages.json是對uniapp進行全局配置,決定了頁面文件的路徑,窗口樣式,原生導航欄,底部原生tabbar等,類似於微信小程序中的app.json的頁面管理部分
{
"pages": [{ //頁面路徑和窗口的表現
"path": "pages/component/index", //配置路徑
"style": {
"navigationBarTitleText": "組件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置,僅開發期間生效
"current": 0, //當前激活的模式(list 的索引項)
"list": [{
"name": "test", //模式名稱
"path": "pages/component/view/index" //啓動頁面,必選
}]
},
"globalStyle": { //頁面的默認樣式
"navigationBarTextStyle": "black", //導航欄標題顏色及狀態欄前景色(white/black)
"navigationBarTitleText": "演示", //導航欄文字內容
"navigationBarBackgroundColor": "#F8F8F8", //導航欄背景色
"backgroundColor": "#F8F8F8", //下拉顯示窗口背景色
"usingComponents":{ //引用小程序組件
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 僅微信小程序,webrtc 無法正常時嘗試強制關閉同層渲染
"pageOrientation": "portrait"//橫屏配置,全局屏幕旋轉設置(僅 APP/微信/QQ小程序),支持 auto / portrait / landscape
},
"tabBar": { //底部tab的表現
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "組件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": { //組件自動引入規則
"autoscan": true, //是否自動掃描組件
"custom": {//自定義掃描規則
"uni-(.*)": "@/components/uni-$1.vue"
}
}
}
2.跳轉,傳參與接收
1.鏈接跳轉
官網 - https://uniapp.dcloud.io/component/navigator
傳參 地址?參數名=參數值&參數名=參數值
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover"> <button type="default">跳轉到新頁面</button> </navigator>
屬性:open-type 可以選擇跳轉方式
2.點擊等事件觸發跳轉
官網 - https://uniapp.dcloud.io/api/router?id=navigateto
注意:跳轉的路徑爲非tabbar的頁面路徑
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
3.接收
在生命週期中接收
onLoad: function (option) { //option爲object類型,會序列化上個頁面傳遞的參數
console.log(option.id); //打印出上個頁面傳遞的參數。
console.log(option.name); //打印出上個頁面傳遞的參數。
}
3.修改頂部的標題的值
//修改標題
uni.setNavigationBarTitle({
title:option.title
});