Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

UIは色々大変。

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

  • BIG NUMBER QUIZ

  • Apple

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

Screen Shot 2018-12-01 at 16.14.25.png

  • Android

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

Screen Shot 2018-12-01 at 16.15.12.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で実行するコマンドです。自分のプロジェクト内で実行してください。

yarn serve

使い方

まずはスクショを見てください。
Screen Shot 2018-12-01 at 16.22.09.png
これは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に変換するサイトです、しかしハマりどころはあるので注意

https://html2jade.org

  • これはインポートです
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これも:がないと右辺がただの文字列として認識されるっぽいですよ。

では、2日目の方へ!!!っていねーかな?

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away