uniapp的相关介绍

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章