tinajs - intro example

app.mina

<!-- /app.mina -->

<config>
{
  "pages": [
    "pages/home.mina",
  ]
}
</config>

<script>
import Tina from '@tinajs/tina'
import router from '@tinajs/tina-router'

Tina.use(router)

App()
</script>

home.mina

<!-- /pages/home.mina -->

<config>
{
  "usingComponent": {
    "logo": "../components/logo.mina"
  }
}
</config>

<template>
  <view>
    <text>I'm {{ name }}. </text>
    <button bindtap="sayHi">Say Hi</button>
    <logo />
  </view>
</template>

<script>
import { Page } from '@tinajs/tina'
import { fetchUser } from '../api'

Page.define(({
  data: {
    firstname: 'Tina',
    lastname: 'S',
  },

  // 由 tina 集成的计算属性能力
  compute ({ firstname, lastname }) {
    return {
      name: `${firstname} ${lastname}`,
    }
  },

  async onLoad () {
    // 由 tina-router 提供的路由能力扩展
    let { id } = this.$route.query
    try {
      let { firstname, lastname } = fetchUser(id)
      this.setData({ firstname, lastname })
    } catch (error) {
      this.$router.redirect(`/pages/login?from=${this.$route.fullPath}`)
    }
  },

  methods: {
    sayHi () {
      wechat.showModal({
        title: `Hi ${this.data.name}`,
      })
    },
  },
}))
</script>

<style>
view {
  padding: 30px 20px;
}
button {
  margin: 20px 0;
}
</style>

carbon setting

• basic style
• drop shadow
  • offset-y: 0
  • blur-radius: lower than padding (both v and h)