Weex UI

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

インストール

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

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

Weexプロジェクトの実行

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

yarn serve

使い方

まずはスクショを見てください。

これはyarn serve

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>

解説

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

  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に変換するサイトです、しかしハマりどころはあるので注意

これはインポートです

import { WxcButton } from 'weex-ui';

色の使い方

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

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

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

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

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

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

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

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

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

Weex UI

インストール

Weexプロジェクトの実行

使い方

解説