微信小程序编程式跳转、页面跳转组件navigator、页面EventChannel通信

一时失言乱红尘 2021-07-24 18:17 1153阅读 0赞

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
    		
    2、获取路径参数
      在onLoad生命周期函数中接收
        onLoad:function(option形参代表参数)
        {
          	option.query
        }
        
    3、页面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,手指松开后点击态保留时间,单位毫秒

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

代码示例:  
**待跳转页面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>

**待跳转页面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'
        })
      }
    
    })

**跳转页面js:**

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/c69f1f367fd140ae9b33ddf2b9913710.png