[小程序开发之uniapp]页面与路由

页面与路由

目录导航

• 页面路由√
• 页面栈√
• 页面通讯√
• 路由跳转√
• 返回上一页√
• reLaunch√
• 窗口动画√

——————————————————————————————————————

页面路由

2.uniapp如何管理页面及路由？

//pages.json
{
    "pages": [
        {
            "path": "pages/index/index", 
            "style": { ... }
        }, {
            "path": "pages/login/login", 
            "style": { ... }
        }
    ]
}

3.如何配置pages.json？

pages：pages节点接收一个对象数组，数组中每一个对象分别指代一个页面。其中分别包含path、style属性。

——————————————————————————————————————

页面栈

2.什么是页面栈？

——————————————————————————————————————

页面通讯

2.uniapp页面通讯的方法有哪些？

• uni.$emit(eventName,OBJECT)

触发全局的自定义事件。附加参数都会传给监听器回调。

uni.$emit('update',{msg:'页面更新'})

• uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

uni.$on('update',function(data){
	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

• uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

uni.$once('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})

• uni.$off([eventName, callback])

移除全局自定义事件监听器。

3.页面通讯的简单示例？

1. 触发add事件，携带data参数为2
2. 监听add事件，触发add方法
3. 移除add事件，触发add方法

setInterval(()=>{    uni.$emit('add', {data: 2})   },1000)

uni.$on('add', this.add)

uni.$off('add', this.add)

add(e) {   this.val += e.data   }

——————————————————————————————————————

路由跳转

1.uniapp有几种路由跳转的方法？

2.什么是navigator跳转？

组件跳转。即用组件代替功能，内嵌按钮以达到跳转的效果。
举一个简单的示例。

<!-- open-type为navigate，如果不写open-type跳转方式默认为navigate -->
<navigator :url="url" open-type="navigate">
  <button type="default">跳转到新页面</button>
</navigator>
<!-- open-type为redirect -->
<navigator :url="url" open-type="redirect">
  <button type="default">在当前页打开</button>
</navigator>
<!-- open-type为switchTab -->
<navigator :url="url" open-type="switchTab">
  <button type="default">跳转到tab页面</button>
</navigator>

3.open-type的默认值与有效值？
open-type 默认值为navigate、其他有效值如下。

3.什么是调用api跳转？
点击事件绑定方法的形式，以uni. 触发跳转方法，并携带对应的url。

navigateTo(){
  uni.navigateTo({
    url: this.url
  })
},
redirectTo(){
  uni.redirectTo({
  url: this.url
  });
},
switchTab(){
  uni.switchTab({
    url: this.url
  });
}

——————————————————————————————————————

返回上一页

• uni.navigateBack(OBJECT)

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
// delta 指代返回的页面数。如果大于现有页面数则返回到首页。
uni.navigateBack({
	delta: 2    
});

——————————————————————————————————————

reLaunch

1.什么是reLaunch？

uni.reLaunch({
	url: 'test?id=1'
});

贴一段关于reLaunch问题的问答：

——————————————————————————————————————

窗口动画

1.在哪里能配置窗口动画？

• API
• 组件
• pages.json

2.窗口动画的配置方法？

API

uni.navigateTo({
	url: '../test/test',
	animationType: 'pop-in',
	animationDuration: 200
});
uni.navigateBack({
	delta: 1,
	animationType: 'pop-out',
	animationDuration: 200
});

组件

<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

pages.json

"style": {
	"app-plus": {
		"animationType": "fade-in",
		"animationDuration": 300
	}
}