小程序开发之 导航组件（navigator）

效果图

属性

参考：navigator

实例

app

1. app.js

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. app.json

{
  "pages": [
    "pages/pageA/navigator",
    "pages/pageB/navigate",
    "pages/pageC/redirect",
    "pages/pageD/pageD"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/pageA/navigator",
        "text": "页面A"
      },
      {
        "pagePath": "pages/pageD/pageD",
        "text": "页面D"
      }
    ]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

3. app.wxss

{
	"description": "项目配置文件",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true,
		"autoAudits": false,
		"coverView": true,
		"showShadowRootInWxmlPanel": true,
		"scopeDataCheck": false
	},
	"compileType": "miniprogram",
	"libVersion": "2.10.2",
	"appid": "wx8c507272cc079a6a",
	"projectname": "navigator",
	"debugOptions": {
		"hidedInDevtools": []
	},
	"isGameTourist": false,
	"simulatorType": "wechat",
	"simulatorPluginLibVersion": {},
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

pageA

1. navigator.js

Page({})

2. navigator.json

{
  "navigationBarTitleText": "navigator"
}

3. navigator.wxml

<view class="container">
  <view class="page-body">
    <view class="btn-area">
      <navigator url="../pageB/navigate?title=navigate" hover-class="navigator-hover">
        <button type="default">跳转到新页面</button>
      </navigator>
      <navigator url="../pageC/redirect?title=redirect" redirect hover-class="other-navigator-hover">
        <button type="default">在当前页打开</button>
      </navigator>
      <navigator url="../pageD/pageD" open-type="switchTab">
        <button type="default">切换tab页面</button>
      </navigator>
      <navigator url="/pages/pageA/navigator" open-type="reLaunch">
        <button type="default">重加载页面</button>
      </navigator>
    </view>
  </view>
</view>

4. navigator.wxss

.navigator-hover button{
  background-color: #DEDEDE;
}
.other-navigator-hover button{
  background-color: #DEDEDE;
}

pageB

1. navigate.js

Page({
  onLoad: function (options) {
    console.log(options)
  }
})

2. navigate.json

{
  "navigationBarTitleText": "navigate页面"
}

3. navigate.wxml

<view class="container">
    <view>
        新的navigate页面
    </view>
    <navigator open-type="navigateBack">
        <button type="default">返回页面A</button>
    </navigator>
</view>

pageC

1. redirect.js

Page({
  onLoad: function (options) {
    console.log(options)
  }
})

2. redirect.json

{
  "navigationBarTitleText": "redirect页面"
}

3. redirect.wxml

<view class="container">
    <view>
        重定向页面
    </view>
</view>

pageD

1. navigator.js

Page({})

2. navigator.wxml

<!--pages/pageD/pageD.wxml-->
<view class="container">
  <view>
    页面D
    </view>
</view>