WeUI は WeChat Web サービス向けに設計されています
概要
WeUI は、WeChat ネイティブのビジュアル体験と一致する基本スタイルライブラリです。WeChat 公式デザインチームが WeChat Web 開発向けに設計し、ユーザーの使用感をより統一することができます。含まれるのは、button、cell、dialog、toast、article、iconなどの各種要素です。
インストール
方法1（推奨）
WeChat 公式、Staticfile CDN、cdnjs が WeUI に CDN リンクを提供しています。推奨です。リンクは以下のとおりです：
方法2：
bower を使用してインストールします
bower install --save weui
方法3：
npm を使用してインストールします
npm install --save weui
開発
git clone https://github.com/weui/weui.git cd weui npm install -g gulp npm install gulp -ws
実行gulp -wsコマンドで、srcディレクトリ内のすべてのファイルの変更を監視し、デフォルトでは8080ポートでサーバーを起動し、ブラウザで開きますhttp://localhost:8080/example。
スマホプレビュー
WeChatでスキャンしてください
ボタン（Button）
ボタンは使用できますaまたはbuttonタグ。WAP上でボタンのactive状態をトリガーするには、ontouchstartイベントをトリガーする必要があり、body上に付与してontouchstart=""グローバルにトリガーします。
ボタンの一般的な操作シーン：確定、キャンセル、警告は、それぞれclassに対応します：weui_btn_primary、weui_btn_default、weui_btn_warn各シーンには独自のグレーアウト状態がありますweui_btn_disabledこのほかに、アウトラインボタン（中空ボタン）もありますweui_btn_plain_xxxクライアントのwebview内のボタンサイズには2種類あり、デフォルトの幅は100%、小型ボタンの幅は自動調整され、両側のボーダーとテキストの間隔は0.75emです：
<a href=".." class="weui_btn weui_btn_primary">按钮</a>
<a href=".." class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
<a href=".." class="weui_btn weui_btn_warn">确认</a>
<a href=".." class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
<a href=".." class="weui_btn weui_btn_default">按钮</a>
<a href=".." class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
<div class="button_sp_area">
<a href=".." class="weui_btn weui_btn_plain_default">按钮</a>
<a href=".." class="weui_btn weui_btn_plain_primary">按钮</a>
<a href=".." class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
<a href=".." class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
</div>
セル（Cell）
Cellリストビューであり、情報をリスト構造でページに表示するために使用され、WAP上で最も一般的なコンテンツ構造です。Cell複数のsectionで構成され、各sectionにはsection headerが含まれますweui_cells_titleおよびcellsweui_cells。
cellthumbnailから、weui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft3つの部分で構成され、cell自動調整レイアウトを採用し、自動調整が必要な部分にclassを追加しますweui_cell_primaryするだけです：
説明付きのリスト項目
<div class="weui_cells_title">带说明的列表项</div>
<div class="weui_cells">
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<p>标题文字</p>
</div>
<div class="weui_cell_ft">
说明文字
</div>
</div>
</div>
Cell必要に応じて、補助説明、ジャンプ、単一選択、複数選択などのさまざまなカスタム拡張が可能です。以下は、アイコン、説明、ジャンプ付きのリスト項目を例としています。その他の場合は、直接参照できますexampleの下のコード：
<div class="weui_cells_title">带图标、说明、跳转的列表项</div>
<div class="weui_cells weui_cells_access">
<a class="weui_cell" href="..">
<div class="weui_cell_hd">
<img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>cell standard</p>
</div>
<div class="weui_cell_ft">
说明文字
</div>
</a>
<a class="weui_cell" href="..">
<div class="weui_cell_hd">
<img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>cell standard</p>
</div>
<div class="weui_cell_ft">
说明文字
</div>
</a>
</div>
ダイアログ（Dialog）
システムのalertウィンドウがウェブページの一時的なビューコンテンツのニーズを満たせない場合、alert形式に似たdialogをカスタム実装でき、dialog内でさまざまなコントロールをカスタム使用してニーズを満たすことができます。
<div class="weui_dialog_confirm">
<div class="weui_mask"></div>
<div class="weui_dialog">
<div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
<div class="weui_dialog_bd">自定义弹窗内容<br>...</div>
<div class="weui_dialog_ft">
<a href=".." class="weui_btn_dialog default">取消</a>
<a href=".." class="weui_btn_dialog primary">确定</a>
</div>
</div>
</div>
<div class="weui_dialog_alert">
<div class="weui_mask"></div>
<div class="weui_dialog">
<div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
<div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
<div class="weui_dialog_ft">
<a href=".." class="weui_btn_dialog primary">确定</a>
</div>
</div>
</div>
Toast
toastは特定の情報を一時的に表示し、数秒後に自動的に消えます。これらの情報は通常、軽量操作の成功、失敗、または待機状態の情報です。
<div id="toast" style="display: none;">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<i class="weui_icon_toast"></i>
<p class="weui_toast_content">已完成</p>
</div>
</div>
<div id="loadingToast" class="weui_loading_toast" style="display:none;">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<div class="weui_loading">
<!-- :) -->
<div class="weui_loading_leaf weui_loading_leaf_0"></div>
<div class="weui_loading_leaf weui_loading_leaf_1"></div>
<div class="weui_loading_leaf weui_loading_leaf_2"></div>
<div class="weui_loading_leaf weui_loading_leaf_3"></div>
<div class="weui_loading_leaf weui_loading_leaf_4"></div>
<div class="weui_loading_leaf weui_loading_leaf_5"></div>
<div class="weui_loading_leaf weui_loading_leaf_6"></div>
<div class="weui_loading_leaf weui_loading_leaf_7"></div>
<div class="weui_loading_leaf weui_loading_leaf_8"></div>
<div class="weui_loading_leaf weui_loading_leaf_9"></div>
<div class="weui_loading_leaf weui_loading_leaf_10"></div>
<div class="weui_loading_leaf weui_loading_leaf_11"></div>
</div>
<p class="weui_toast_content">数据加载中</p>
</div>
</div>
結果ページ（Msg Page）
結果ページは、一連の操作ステップを実行した後、フローの終了時の総括ページと考えることができます。結果ページの主な役割は、ユーザーに操作処理結果や必要な関連詳細（以前の操作が正しかったかどうかの確認に使用可能）などの情報を知らせることです。そのフローが何らかの重要な機能のオン/オフに使用される場合は、結果ページにその機能に関連する説明コンテンツを追加できます。さらに、結果ページは抽選や公式アカウントのフォローなどの付加価値操作のエントリを提供することもできます。
<div class="weui_msg">
<div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
<div class="weui_text_area">
<h2 class="weui_msg_title">操作成功</h2>
<p class="weui_msg_desc">内容详情，可根据实际需要安排</p>
</div>
<div class="weui_opr_area">
<p class="weui_btn_area">
<a href=".." class="weui_btn weui_btn_primary">确定</a>
<a href=".." class="weui_btn weui_btn_default">取消</a>
</p>
</div>
<div class="weui_extra_area">
<a href="">查看详情</a>
</div>
</div>
記事ページ
テキストビューは大量のテキストを表示します。これらのテキストは通常、ページの主要なコンテンツです。Article段落分け、複数レベルの見出し、引用、埋め込み画像、順序付き/順序なしリストなどのリッチテキストスタイルをサポートし、ユーザーの選択操作に応答できます。
WeChatクライアントのwebviewで使用する場合Article文字に十分な可読性と識別性を確保し、標準的なフォントを使用し、十分な段落間隔を確保し、段落の先頭にインデントを付けないようにする必要があります。
<article class="weui_article">
<h1>大标题</h1>
<section>
<h2 class="title">章标题</h2>
<section>
<h3>1.1 节标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute</p>
</section>
<section>
<h3>1.2 节标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</section>
</article>
アイコン
<i class="weui_icon_msg weui_icon_success"></i>
<i class="weui_icon_msg weui_icon_info"></i>
<i class="weui_icon_msg weui_icon_warn"></i>
<i class="weui_icon_msg weui_icon_waiting"></i>
<i class="weui_icon_safe weui_icon_safe_success"></i>
<i class="weui_icon_safe weui_icon_safe_warn"></i>
<div class="icon_sp_area">
<i class="weui_icon_success"></i>
<i class="weui_icon_success_circle"></i>
<i class="weui_icon_success_no_circle"></i>
<i class="weui_icon_info"></i>
<i class="weui_icon_waiting"></i>
<i class="weui_icon_waiting_circle"></i>
<i class="weui_icon_circle"></i>
<i class="weui_icon_warn"></i>
<i class="weui_icon_download"></i>
<i class="weui_icon_info_circle"></i>
</div>
プロジェクトのダウンロードURL
Github アドレス：https://github.com/weui/weui
当サイトのアドレス：weui-master.zip