微信小程序 编程式跳转、页面跳转组件navigator、插件跳转组件functional-page-navigator、页面EventChannel通信_微信小程序 navigator 数组

获取路由器:this.router|this.pageRouter
获取当前页面栈:getCurrentPages()
	数组中第一个元素为首页,最后一个元素为当前页面
	不要在App.onLaunch的时候调用getCurrentPages(),此时page还没有生成
	
1、编程式跳转
	小程序中页面栈最多十层。
	初始化:小程序打开的第一个页面,触发:onLoad, onShow
	
	(1)跳转到tabBar页面
		wx.switchTab({	此时原来的页面栈会被清空
			url:"app.json中tabBar字段定义的页面", 路径后不能带参数
			success,		成功回调
			fail,			失败回调
			complete		调用结束回调(调用成功、失败都会执行)
		})
		
		Tab 切换对应的生命周期(以 A、B页面为Tabbar页面,C是从A页面打开的页面,D页面是从C页面打开的页面为例):
		当前页面 	路由后页面 			触发的生命周期（按顺序）
		A 				A 				Nothing happend
		A 				B 				A.onHide(), B.onLoad(), B.onShow()
		A 				B（再次打开） 	A.onHide(), B.onShow()
		C 				A 				C.onUnload(), A.onShow()
		C 				B 				C.onUnload(), B.onLoad(), B.onShow()
		D 				B 				D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
		D（从转发进入） 	A 				D.onUnload(), A.onLoad(), A.onShow()
		D（从转发进入） 	B 				D.onUnload(), B.onLoad(), B.onShow()
		
	(2)关闭所有页面,打开到应用内的某个页面
		wx.reLaunch({url:"可携带参数path?key=value&key2=value2",success,fail,complete})
		之前页面触发:onUnload
		之后页面触发:onLoad,onShow
		
	(3)关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到tabbar页面。
		wx.redirectTo({url:"可携带参数",success,fail,complete})
		之前页面触发:onUnload
		之后页面触发:onLoad,onShow
		
	(4)保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面。
		wx.navigateTo({
			url:"可携带参数",events:{监听页面间通信钩子}
			,success,fail,complete
		})
		之前页面触发:onUnload
		之后页面触发:onShow
		
	(5)关闭当前页面,返回上一页面或多级页面。
		wx.navigateBack({
			delta:"1",	返回的页面索引,默认为1,	
				可通过getCurrentPages()获取当前页面栈,数组中第一个元素为首页,最后一个元素为当前页面。
				不要在App.onLaunch的时候调用getCurrentPages(),此时page还没有生成。
			success,fail,complete
		})
		之前页面触发:onHide 	
		之后页面触发:onLoad,onShow

编程式跳转方式二:使用this.pageRouter|this.router
	this.pageRouter|this.router获得的页面路由器对象进行跳转,跳转方式和wx.的方式相同
	
	优点:
		this.pageRouter获得的页面路由器对象具有更好的基路径稳定性
	区别:
	 和wx.跳转的区别
		Page({
		  wxNavAction: function () {
		    wx.navigateTo({
		      url: './new-page'
		    })
		  },
		  routerNavAction: function () {
		    this.pageRouter.navigateTo({
		      url: './new-page'
		    })
		  }
		})
		页面index/index代码如上
		如果此时已经跳转到了一个新页面pack/index,然后才调用到上面的wxNavAction方法,跳转的新页面路径将是pack/new-page；
		而如果调用的是 routerNavAction 方法，跳转的新页面路径仍然是 index/new-page 。
		换而言之,this.pageRouter 获得的路由器对象具有更好的基路径稳定性,通常情况下,使用this.pageRouter.navigateTo代替wx.navigateTo是更优的。
 	
 	 this.pageRouter和this.router的区别
 	 	获得同样的页面路由器对象
 	 	在自定义组件中调用:
 	 		this.pageRouter将相对于自定义组件所在的页面来进行路由跳转
 	 		this.router相对于自定义组件自身的路径。
		
2、获取路径参数
  在onLoad生命周期函数中接收
    onLoad:function(option形参代表参数)
    {
      	option.query
    }
    
3、插件跳转组件functional-page-navigator
	<functional-page-navigator
		version		跳转到的小程序版本,线上版本必须设置为release
			develop	开发版	
			trial	体验版	
			release	正式版
		name    	要跳转到的功能页
			loginAndGetUserInfo	用户信息功能页	
			requestPayment	支付功能页	
			chooseAddress	收货地址功能页	
			chooseInvoice	获取发票功能页
			chooseInvoiceTitle	获取发票抬头功能页	
		args    	功能页参数,参数格式与具体功能页相关	
		bindsuccess 	功能页返回,且操作成功时触发,detail格式与具体功能页相关	
		bindfail    	功能页返回,且操作失败时触发,detail格式与具体功能页相关	
		bindcancel  	因用户操作从功能页返回时触发
	>
		...触发跳转内容
	</functional-page-navigator>

4、页面EventChannel通信
	只在wx.navigateTo中有效
	
	wx.navigateTo({
	  url: 'test?id=1',
	  events: {
	    fn: function(data) {
	      console.log(data)
	    }
	  },
	  success: function(res) {
	    res.eventChannel.emit('fn2', { data: 'test' })
	  }
	})
	
	跳转的页面
	Page({
	  onLoad: function(option){
	  
	    const eventChannel = this.getOpenerEventChannel()
	    eventChannel.emit('fn', {data: 'test'});
	    
	    监听navigateTo触发的事件
	    eventChannel.on('fn2', function(data) {
	      console.log(data)
	    })
	    
	  }
	})
	
	监听一次事件
		eventChannel.once("监听名称",fn)
		
	取消监听事件
		eventChannel.off("监听名称",fn)	不给fn取消所有监听函数
	

navigator组件跳转:
	<navigator url='跳转路径'>xxx</navigator>
	target:默认为"self",在哪个目标上发生跳转,默认当前小程序
		"miniProgram"	跳转其他小程序
	open-type:跳转方式
		navigate:对应wx.navigateTo或wx.navigateToMiniProgram的功能 	
		redirect:对应wx.redirectTo的功能 	
		switchTab:对应wx.switchTab的功能 	
		reLaunch:对应wx.reLaunch的功能
		navigateBack:对应wx.navigateBack的功能 
		exit:退出小程序,target="miniProgram"时生效
		
	跳转小程序:
	app-id:target="miniProgram"时有效,要打开的小程序 appId
	path:target="miniProgram"时有效,打开的页面路径,如果为空则打开首页
	extra-data:target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow()中获取到这份数据。
	version:target="miniProgram"时有效,要打开的小程序版本
		develop:开发版 	
		trial:体验版 	
		release:正式版,仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。 	
	bindsuccess:target="miniProgram"时有效,跳转小程序成功回调函数名称
	bindfail:target="miniProgram"时有效,跳转小程序失败回调函数名称
	bindcomplete:target="miniProgram"时有效,跳转小程序完成回调函数名称
		
	跳转页面:
	url:跳转路径
	delta:默认为"1",open-type为'navigateBack'时有效,表示回退的层数 
	
	跳转样式:
	hover-class:指定点击时的样式类,当hover-class="none"时,没有点击态效果
	hover-stop-propagation:是否阻止本节点的祖先节点出现点击态 
	hover-start-time:默认为50,按住后多久出现点击态,单位毫秒
	hover-stay-time:默认为600,手指松开后点击态保留时间,单位毫秒
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

代码示例:
待跳转页面wxml:

<!--pages/news/news.wxml-->
<import src='./new-temp/new-temp.wxml' />


<block wx:for="{{newsData}}" wx:for-item="item" wx:for-index="index" wx:key="key">

  <view bindtap='goNewsDetail' data-newsid='{{item.newsId}}'>
    <template is='temp' data='{{...item}}'/>
  </view>
  
</block>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

待跳转页面js:

var useData=require("../data/newsdata")

Page({
  data: {
      flag:true
  },
  onLoad: function (options) {
   this.setData({
     newsData:useData.newsData
   })

  },
  goNewsDetail:function(event)
  {
   wx.navigateTo({
     url: 'news-detail/news-detail?id=' + event.currentTarget.dataset.newsid
   })

  },
  goNews:function(event)
  {
    console.log("跳转");
    wx.navigateTo({
      url:'../news/news'
    })
  }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

跳转页面js:

// pages/news/news-detail/news-detail.js
Page({

  data: {

  },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log(options.id);
  }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14