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
});