Weexはおそらく人気ないですね。中国企業アリババのフレームワークです。
Vueを使ってます。
アドベントカレンダー１日目です（12/1）
ボタンの記事がないですね。中国語の記事は多い。
UIは色々大変。
実際、Weexでリリースされたアプリは日本にありますかね？
おそらく僕の作ったアプリが日本初じゃないですかね？
-
BIG NUMBER QUIZ
-
Apple
- Android
＊スクショはiOSのっていうのは内緒だぞw
Weex UI
これはアリババの公式のUIキットだ。
https://alibaba.github.io/weex-ui/
インストール
インストール手順はgithubにあるのだが、このサイトが詳しいのでそれを参考にしてください。
公式はnpmで入れてるが、Weex本体はyarnを推してるような気がする・・。
自分の好きな方で管理していいが、npmで入れたりyarnで入れたりすると、
インストールされたパッケージがおかしくなると思うので、
好きな方を決めたらそのプロジェクトでは終始それを使うのが無難です。
Weexプロジェクトの実行
すでにいろんなWeexの初心者向けの記事があるのでそこで見てください。
Webで実行するコマンドです。自分のプロジェクト内で実行してください。
yarn serve
使い方
まずはスクショを見てください。
これはyarn serve
<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これも:がないと右辺がただの文字列として認識されるっぽいですよ。
では、２日目の方へ！！！っていねーかな？