UIのボタンの作り方(１日目です（12/1）)

Weexはおそらく人気ないですね。中国企業アリババのフレームワークです。
Vueを使ってます。

アドベントカレンダー１日目です（12/1）
ボタンの記事がないですね。中国語の記事は多い。

UIは色々大変。

実際、Weexでリリースされたアプリは日本にありますかね？
おそらく僕の作ったアプリが日本初じゃないですかね？

* BIG NUMBER QUIZ

* Apple

https://itunes.apple.com/jp/app/big-number-quiz/id1438479253?mt=8

<img width="754" alt="Screen Shot 2018-12-01 at 16.14.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/11951/1f28f1d7-0875-e607-c729-414045bd8c0f.png">

* Android

https://play.google.com/store/apps/details?id=jp.shinriyo.bignumber

<img width="698" alt="Screen Shot 2018-12-01 at 16.15.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/11951/187bbfea-8712-b2d2-07c2-fece2230534d.png">
＊スクショはiOSのっていうのは内緒だぞw

# Weex UI

これはアリババの公式のUIキットだ。
https://alibaba.github.io/weex-ui/

# インストール

インストール手順はgithubにあるのだが、このサイトが詳しいのでそれを参考にしてください。

http://shinriyo.hateblo.jp/entry/2018/09/24/WeexでUI_（weex-ui）

公式はnpmで入れてるが、Weex本体はyarnを推してるような気がする・・。
自分の好きな方で管理していいが、npmで入れたりyarnで入れたりすると、
インストールされたパッケージがおかしくなると思うので、
好きな方を決めたらそのプロジェクトでは終始それを使うのが無難です。

# Weexプロジェクトの実行

すでにいろんなWeexの初心者向けの記事があるのでそこで見てください。
Webで実行するコマンドです。自分のプロジェクト内で実行してください。

```bash
yarn serve
```

# 使い方

まずはスクショを見てください。
<img width="323" alt="Screen Shot 2018-12-01 at 16.22.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/11951/30ac6dff-667e-ecef-6bd4-79e52c9a1c8b.png">
これは`yarn serve`

```vue:src/components/HelloWorld.vue
<template lang="pug">
div
  //- 縦横サイズ.
  image.logo(style='width:672px;height:672px', :src='logo')
  text.greeting Number Training Tool
  //- ボタン.
  wxc-button(:btnStyle="menuBtnStyle", :textStyle="menuTextStyle", text='Start', @wxcButtonClicked="jump('/game')")
  wxc-button(:btnStyle="menuBtnStyle", :textStyle="menuTextStyle", text='Settings', @wxcButtonClicked="jump('/setting')")
  wxc-button(:btnStyle="menuBtnStyle", :textStyle="menuTextStyle", text='About', @wxcButtonClicked="jump('/about')")
</template>

<script>
import { WxcButton } from 'weex-ui';
// weex-uiのボタンスタイル.
import { STYLE_MAP, TEXT_STYLE_MAP } from 'weex-ui/packages/wxc-button/type';
var Assets = require('../assets/Assets').default;

export default {
  name: 'HelloWorld',
  components: { WxcButton },
  methods: {
    jump(url) {
      this.$router.push(url);
    },
  },
  data() {
    return {
      logo: Assets.LOGOS,
      // ボタンのスタイル.
      menuBtnStyle: STYLE_MAP.green,
      menuTextStyle: TEXT_STYLE_MAP.blue,
    };
  },
};
</script>

<style scoped>
.greeting {
  text-align: center;
  margin-top: 70px;
  font-size: 50px;
  color: #41b883;
}
</style>
```

# 解説

まず、ここはアプリのゴリラの画像を使うためにやっただけなので無視していいです。

```javascript
  data() {
    return {
      logo: Assets.LOGOS,
```

実は、Pugを使ってます。
Pugとは・・・HTMLの代わりにシンプルに書けるマークアップ言語です。

`<template lang="pug">`とすれば使えます。


公式ドキュメント https://vuejs.org/v2/guide/syntax.html に
`Vue.js uses an HTML-based template syntax`とあるので、
厳密には元々かけるHTMLはHTMLではないと思うが、便宜上HTMLとそのまま呼びます。

HTMLを書けばPugに変換するサイトです、しかしハマりどころはあるので注意

https://html2jade.org

* これはインポートです

```javascript
import { WxcButton } from 'weex-ui';
```

* 色の使い方

ボタンの色をテキトーに使いたいならgithubを見て

```
https://github.com/alibaba/weex-ui/blob/master/packages/wxc-button/type.js
```

このようにインポートするのが楽です。

```javascript
import { STYLE_MAP, TEXT_STYLE_MAP } from 'weex-ui/packages/wxc-button/type';
```

そしたら、このようにボタンに適用できます。

```javascript
wxc-button(:btnStyle="menuBtnStyle", :textStyle="menuTextStyle", text='Start', @wxcButtonClicked="jump('/game')")
```

気をつけるのが、`@wxcButtonClicked`のように`@`がいること、あと`:textStyle`これも`:`がないと右辺がただの文字列として認識されるっぽいですよ。

では、２日目の方へ！！！っていねーかな？