小程序navigation API如何开发?
微信小程序的开发相信很多人已经学会了如何使用了，那么小程序navigation API是如何开发的呢，今天小编给大家整理了小程序navigation API开发实例的相关内容。希望对大家的学习有所帮助。
首先给大家看看效果图：
从上图的演示效果来看，小程序也就提供这几个处理导航控制。但值得注意的是只能同时导航五个页面。
接下来给大家介绍下navigation的主要属*：
首先是导航条一些方法
wx.setNavigationBarTitle(object) 设置导航条的Title
小程序导航标题可以通过三种方式设置，第一种是通过全局配置名字统一，第二种就是在page中新建个json文件配置它会覆盖全局配置的title，第三种就是通过API设置。
wx.showNavigationBarLoading()设置在导航条上显示Loading加载状态
wx.hideNavigationBarLoading() 隐藏Loading加载状态
导航视图的一些方法
wx.navigateTo() 保留当前页面进行跳转，传参时就像拼接GET参数一样即可，代码中会有体现
wx.redirectTo() 销毁当前页面进行跳转，
wx.navigateBack() 返回上一个页面
wxml
json
{
"navigationBarTitleText": "我是通过json配置的title"
}
js
//导入另一个页面
var file = '../audio/audio'
Page({
data:{
text:"Page navigation"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
/**
* 设置NavigationTitle
*/
setNavigationBarTitle: function() {
wx.setNavigationBarTitle({
title: '我是通过API设置的NavigationBarTitle'
})
},
/**
* 设置加载状态
*/
showNavigationBarLoading: function() {
wx.showNavigationBarLoading()
},
/**
* 隐藏加载状态
*/
hiddenNavigationBarLoading: function() {
wx.hideNavigationBarLoading()
},
/**
* 保留当前Page跳转
*/
navigateTo: function() {
wx.navigateTo({
//传递参数方式向get请求拼接参数一样
url: file + '?phone=18939571&password;=1992',
success: function(res) {
console.log(res)
},
fail: function(err) {
console.log(err)
}
})
},
/**
* 关闭当前页面进行跳转当前页面会销毁
*/
redirectTo: function() {
wx.redirectTo({
//传递参数方式向get请求拼接参数一样
url: file + '?phone=189395719&password;=1992'
})
},
/**
* 退回到上一个页面
*/
navigateBack: function() {
wx.navigateBack()
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
以上就是小程序navigation API开发实例的相关内容啦，相信大家都知道小程序navigation API是怎样开发的了，其实操作起来也是比较简单的，感兴趣的小伙伴们可以自己尝试下。想了解更多精彩内容的话请关注微小乔吧。
相关推荐：
微信小程序搜索排名详解
小程序扫一扫怎么扫?小程序功能介绍
小程序扫一扫功能实现有什么好处?
上一篇：微信小程序营销怎么做呢?