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