wx-nav
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    wx-nav

    中文说明

    powerful weixin miniapp router.

    wx-nav 's APIs relative to weixin miniapp official API:

    wx-nav API
    wx.navigateTo navigateTo
    wx.navigateBack navigateBack
    navigateBackTo
    navigateLastTo
    refresh
    wx.switchTab switchTab
    wx.redirectTo redirectTo
    wx.reLaunch reLaunch

    Feature

    1. router interceptor

    2. new API

    3. deal with the max count of weixin miniapp page stack

    4. when target page is repeated sequential, navigateBacknavigateBackTonavigateLastTo will merge them

    5. auto deal tabBar page

    6. better performance and code experience

    install

    require ./dist/wx-nav.cjs.js or ./dist/wx-nav.esm.js.

    or use npm or yarn:

    npm i --save wx-nav

    yarn add wx-nav

    Usage

    // src/utils/wxnav.js
    import WxNav from "wx-nav"
     
    export const {
      navigateTo,
      navigateBack,
      navigateBackTo,
      navigateLastTo,
      refresh,
      switchTab,
      redirectTo,
      reLaunch 
    = new WxNav({
      // optional. default value 10. max length of page stack.
      maxStack: 10,
      // optional. for `refresh()` or `switchTab(pageAlias)`
      tabBarPages: {
        // pageAlias: pageRoute
        home: "pages/home/main",
        userCenter: "pages/userCenter/main"
      },
      // optional
      beforeEach(to, from, next, apiName){
        next()
      },
      // optional
      afterEach(to, from, apiName){}
    })
     
    // index.vue
    goToNextPage(){
      navigateTo("pages/nextpage/main", {from: "home"}, (isSuccess) => {
        if(!isSuccess){
          console.log("navigateTo fail")
        }
      })
    }

    API

    navigateTo

    navigateTo(url [, query [, cb]]) navigateTo(url [, cb])

    • url: string.
    • query: object. like {a:b, c:d} will be transform to ${url}?a=b&c=d.
    • cb: function. optional. receive a boolean value that mark the function call success or fail.

    like wx.navigateTo, but navigateTo will use redirectTo instead when current pages length is MAX_PAGES_LENGTH.

    navigateBack

    navigateBack(delta ,cb) navigateBack(cb) navigateBack()

    • delta: integer. default value is 1.

    like wx.navigateBack, but navigateBack() will check the target url whether repeat sequential or not. if page stack is [A, B, C, C, C, D], navigateBack() will be back to page C, stack is [A, B, C].

    navigateBackTo

    navigateBackTo(url [, cb])

    navigateBackTo(url) will find the latest url page in page stack, and back to the page. there is also check url whether repeat sequential or not. if url is repeated, back to the earlist url. if page stack is [A, B, C, C, C, D, E, F], navigateBackTo(C) will be back to page C, stack is [A, B, C].

    navigateLastTo

    navigateLastTo(url [, cb])

    navigateLastTo(url) assert last page is url, and back to url

    1. if last page is url and repeat: page stack is [A, B, C, C, C, D], navigateLastTo(C) will change page stack to [A, B, C]
    2. if last page is not url,there is call redirectTo(url) inside。 page stack is [A, B, C, D], navigateLastTo(C) will cahnge page stack to [A, B, C]. page stack is [A, B, C, D], navigateLastTo(D) will change page stack to [A, B, C, D], current page D will refresh。

    refresh

    refresh(cb) refresh()

    refresh current page, such as TabBar page.

    switchTab

    switchTab(target [, cb])

    • target: string. url or alias of url. why there doesn't support query? see official document

    redirectTo

    redirectTo(url [, query [, cb]]) redirectTo(url [, cb])

    reLaunch

    reLaunch(url [, query [, cb]]) reLaunch(url [, cb])

    it's better perfermance than wx.reLaunch.

    License

    MIT

    Install

    npm i wx-nav

    DownloadsWeekly Downloads

    5

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    45 kB

    Total Files

    26

    Last publish

    Collaborators

    • microj