npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tinajs/tina-router

v0.6.0

Published

An elegant enhanced router for Tina.js based Wechat-Mini-Program

Downloads

20

Readme

tina-router

An elegant enhanced router for Tina.js based Wechat-Mini-Program

npm license PRs Welcome

快速上手

我们假设你已经在使用 Tinamina-webpack 开发小程序项目。

安装

npm i --save @tinajs/tina-router
/**
 * <script> in /app.mina
 */
import Tina from '@tinajs/tina'
import router from '@tinajs/tina-router'

Tina.use(router)

App(......)

使用

/**
 * <script> in /pages/demo.mina
 */
import { Page } from '@tinajs/tina'
import { api } from '../api'

Page.define({
  onLoad () {
    api.fetchUser({ id: this.$route.query.id }).then((data) => this.setData(data))
  },
  methods: {
    toLogin () {
      this.$router.navigate(`/pages/login?from=${this.$route.fullPath}`)
    },
  },
})

常见问题

无法正确地自动获取底部 tab 列表

若 tina-router 无法正确地自动获取底部 tab 列表,请尝试将微信开发者工具的 "ES6 转 ES5" 功能关闭:

若仍不生效,可以在注册插件时手动设置:

/**
 * <script> in /app.mina
 */
import Tina from '@tinajs/tina'
import router from '@tinajs/tina-router'

Tina.use(router, {
  tabs: [
    'page/home',
    'page/mine',
  ],
})

App(......)

API

Plugin.install

  • 参数:

    • {Object} Tina Tina
    • {Object} configcreateRouterMixin 中的参数 config
  • 说明:

    以插件的形式安装入 Tina。

createRouterMixin

  • 参数:

    • {Object} config
      • {Array <String>} tabs MINA tabbar 中的所有页面路径。

        插件默认将自动从全局配置中读取该信息。

  • 说明:

    创建混合对象。

对页面 / 组件的注入

$route

  • 说明:

    路由信息对象。 仅页面可用,混入组件不生效。

path
  • 类型: String

  • 说明:

    当前页面的路径。

    // /pages/demo?foo=bar
    Page.define({
      onLoad () {
        console.log(this.$route.path)
        // '/page/demo'
      },
    })
query
  • 类型: Object

  • 说明:

    当前页面的参数对象。 与小程序中 onLoad(Object query) 传入的 query 不同,这里的 $route.query 会对各个值进行 decodeURIComponent 解码。

    // /pages/demo?foo=bar
    Page.define({
      onLoad () {
        console.log(this.$route.query)
        // { foo: 'bar }
      },
    })
fullPath
  • 类型: String

  • 说明:

    当前页面的完整路径。

    // /pages/demo?foo=bar
    Page.define({
      onLoad () {
        console.log(this.$route.fullPath)
        // /pages/demo?full=bar
      },
    })

$router

  • 说明:

    Router 实例。

Router 实例

navigate(location, query)
  • 参数:

    • {String} location 前往的路径
    • {Object} query query 对象
  • 返回值: Promise

  • 说明:

    前往具体的路径。

    当目标路径属于导航栏标签 (tabs) 时,实际触发 reLaunch (需正确地设置导航栏页面列表)

    Page.define({
      onLoad () {
        this.$router.navigate('/page/home', { message: 'hi' })
      },
    })
redirect(location, query)
  • 参数:

    • {String} location 重定向的路径
    • {Object} query query 对象
  • 返回值: Promise

  • 说明:

    重定向具体的路径。

    当目标路径属于导航栏标签 (tabs) 时,实际触发 reLaunch (需正确地设置导航栏页面列表)

    Page.define({
      onLoad () {
        this.$router.redirect('/page/login')
      },
    })
switchTab(location)
  • 参数:

    • {String} location 重定向的路径
  • 返回值: Promise

  • 说明:

    切换到具体的一级页面 (属于导航栏标签的页面)。该方法运行效率更高,但不支持 query 参数。

    Page.define({
      onLoad () {
        this.$router.switchTab('/page/login')
      },
    })
back()
  • 参数:

  • 返回值: Promise

  • 说明:

    后退。

    Page.define({
      onLoad () {
        this.$router.back()
      },
    })
isTab(location)
  • 参数:

    • {String} location 路径
  • 返回值: Boolean

  • 说明:

    返回某路径是否属于导航栏项。 需正确地设置导航栏页面列表

    Page.define({
      onLoad () {
        if (this.$router.isTab('/page/home')) {
          console.log('homepage is one of the tabs')
        }
      },
    })

License

Apache-2.0 @ yelo