ionic3 在微信中配置路由导航 DeepLinker实现指定页面URL

Ionic3使用了近似原生App的页面导航方式,并不支持Angular5的路由。


Ionic3的这种路由方式在开发本地App的时候比较方便,但如果要用来开发纯Web页面,或者微信公众号的时候就有点问题了。


比如:在首页是一个Tabs页面的情况下,如何控制用户看到的第一项Tab?默认情况下都是会导航到第一个Tab,而且地址栏的URL并不会跟随页面的切换而变化。在比如:微信公众号中按收据及返回按钮,让ionic程序返回上一页。这些功能如果用ionic现在的路由方式是没法实现的。



好在Ionic3提供了一种类似路由的DeepLinker功能,可以实现以上目的。



DeepLinker与NavController一起工作,但是用户基本不会直接与这个东西打交道。只有用户需要对URL进行处理的时候才需要配置这个。使用DeepLinker后,如果NavController push了一个新的页面,DeepLinker会在配置中寻找匹配的URL设置并更新URL。



我们的需求场景是这样的,在ionic3 在微信中配置路由导航,或者在微信公众号的菜单栏有N个菜单,点击不同的菜单,需要直接导航到我们页面对应的Tab上,而不是让用户再去选择Tab。下面说一下具体做法。



1、首先新建一个Ionic3项目。


ionic start IonicDemo tabs 


默认会建立有三个Tab页的项目。主要有4个页面,一个Tabs是主页面,其他三个Tab页分别是home,about,contact。



基本用法



DeepLinker是在IonicModule.forRoot方法中使用,作为第三个参数:


imports: [
    IonicModule.forRoot(MyApp, {}, {
        links: []
})

]


数组里的对象是DeepLinkerConfig,配置了URL和页面的匹配关系,一般来说是这样子的:


imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
    { component: HomePage, name: 'Home', segment: 'home' }
]
})

]



也就是说,当浏览HomePage这个页面的时候,URL会变成http://examplesite/



DeepLinker传参


有的时候也需要从URL传递参数,可以用下面的形式:


links: [
   { component: HomePage, name: 'Home', segment: 'home' }
   { component: DetailPage, name: 'Detail', segment: 'detail/:user' }

]


这样在DetailPage的ts文件中就可以接收user这个参数,进行处理。需要注意的是,这个参数应该是可以被DeepLinker序列化的,因此建议设置为一个string或number。


实现跳转到指定Tab


修改app.module.ts文件,将IonicModule.forRoot方法改为如下代码:


IonicModule.forRoot(MyApp, {}, {
links: [
{ component: TabsPage, name: 'Tabs', segment: 'tabs/:tabId' }
]

})


这里的意思是,给Tabs页传一个参数,如http://examplesite/,这样就让App直接跳到第二个Tab。


修改tabs.ts文件,改为如下代码:


export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
    tab1Root: any = HomePage;
    tab2Root: any = AboutPage;
    tab3Root: any = ContactPage;
    public tabId: number;
    public selectTabIndex: number;
constructor(public params: NavParams) {
    this.tabId = params.get("tabId");
        if(this.tabId != undefined || this.tabId !=null)
        {
            this.selectTabIndex = this.tabId;
        }
    }
}

添加了两个变量,然后通过NavParams取得传递过来的参数并赋值给selectTabIndex。


修改tabs.html,给Tabs组件添加一个绑定:



运行ionic serve命令,会自动打开http://localhost:8100/地址,现在打开一个新窗口,输入http://localhost:8100/#/tabs/1,OK,直接跳到第二个Tab了。打完收工。



默认历史


还有一种情况,如果从其他页面直接导航到内部的页面,当点击返回的时候,该返回哪个页面呢?比如从推送通知进到新闻详情页面,当点击返回的时候,应该返回首页。所以Ionic2提供了defaultHistory参数,如果页面历史堆栈中不存在历史页面的时候,就会返回到这个页面。用法如下:


links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user', defaultHistory: [HomePage] }

]


以上所述是小编给大家介绍的Ionic2系列之使用DeepLinker实现指定页面URL,希望对大家有所帮助,如果大家有任何疑问请方法 http://www.itying.com加qq群讨论