WeUI conçu exclusivement pour les services Web WeChat

Aperçu

WeUI est une bibliothèque de styles de base cohérente avec l'expérience visuelle native de WeChat, conçue par l'équipe de conception officielle de WeChat pour le développement Web WeChat, rendant la perception des utilisateurs plus unifiée. Elle comprendbutton、cell、dialog、toast、article、iconet divers autres éléments.

Installation

Méthode 1 (Recommandée)

WeChat Official, Staticfile CDN, et cdnjs fournissent des liens CDN pour WeUI ; ils sont recommandés. Les liens sont les suivants :

Source	Adresse
WeChat Official	https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css
Staticfile CDN	https://cdn.staticfile.net/weui/0.4.3/style/weui.css
cdnjs	https://cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css

Méthode 2 :

Installer avec bower

bower install --save weui

Méthode 3 :

Installer avec npm

npm install --save weui

Développement

git clone https://github.com/weui/weui.git
cd weui
npm install -g gulp
npm install
gulp -ws

Exécutezgulp -wscommande, qui surveillerasrcles modifications de tous les fichiers du répertoire, et par défaut8080démarrera le serveur sur le port, puis ouvrira dans le navigateurhttp://localhost:8080/example。

Aperçu mobile

Veuillez scanner le code QR avec WeChat

Exemples en ligne WEUI

Bouton

Les boutons peuvent utiliseraoubuttonbalise. Sur WAP, pour déclencher l'état actif d'un bouton, l'événement ontouchstart doit être déclenché. Vous pouvezbodyajouter sur leontouchstart=""déclencheur global.

Scénarios courants d'utilisation des boutons : confirmer, annuler, alerte, correspondant aux classes :weui_btn_primary、weui_btn_default、weui_btn_warnchaque scénario a son propre état désactivéweui_btn_disabledDe plus, il y a aussi un bouton creuxweui_btn_plain_xxxDans la webview client, il existe deux types de tailles de bouton : largeur par défaut 100%, petits boutons à largeur adaptative, et l'espacement entre les bordures et le texte des deux côtés est de 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>

Cellule

Cellune vue de liste utilisée pour afficher des informations dans une structure de liste sur la page ; c'est la structure de contenu la plus couramment utilisée sur WAP.CellIl se compose de plusieurs sections, chaque section comprend un en-tête de sectionweui_cells_titleet des cellulesweui_cells。

cellse compose d'une vignetteweui_cell_hd、corpsweui_cell_bd、accessoireweui_cell_fttrois parties,cellUtilise une mise en page adaptative ; ajoutez la classe à la partie qui doit être adaptéeweui_cell_primaryet c'est fait :

Élément de liste avec description

<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>

CellIl peut être personnalisé et étendu selon les besoins, notamment avec des descriptions auxiliaires, une navigation, une sélection unique, une sélection multiple, etc. Ci-dessous figure un élément de liste avec icône, description et navigation ; pour les autres cas, vous pouvez directement vous référer auexamplecode ci-dessous :

<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>

Boîte de dialogue

Si la fenêtre d'alerte du système ne peut pas répondre aux exigences de contenu de vue temporaire de la page web, vous pouvez implémenter une boîte de dialogue personnalisée de forme similaire à alert, et vous pouvez librement utiliser divers contrôles dans la boîte de dialogue pour répondre à vos besoins.

<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 est utilisé pour afficher temporairement certaines informations, et il disparaît automatiquement après quelques secondes. Ces informations sont généralement des messages de succès, d'échec ou d'état d'attente pour des opérations légères.

<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>

Page de résultat (Msg Page)

La page de résultat peut généralement être considérée comme une page récapitulative après une série d'étapes d'opération, servant de fin à un processus. Son objectif principal est d'informer les utilisateurs du résultat du traitement de l'opération et des détails pertinents nécessaires (qui peuvent être utilisés pour confirmer si les opérations précédentes étaient correctes). Si le processus est utilisé pour activer ou désactiver certaines fonctions importantes, un contenu descriptif lié à la fonction peut être ajouté à la page de résultat. En outre, la page de résultat peut également porter des opérations à valeur ajoutée, telles que fournir des points d'entrée pour des tirages au sort, suivre le compte officiel, etc.

<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>

Page d'article

La vue texte affiche de longs passages de texte, qui constituent généralement le contenu principal de la page.ArticleElle prend en charge des styles de texte enrichi tels que des paragraphes, des titres à plusieurs niveaux, des citations, des images intégrées, des listes ordonnées/non ordonnées, et peut répondre aux opérations de sélection de l'utilisateur.

Lors de l'utilisation dans la WebView du client WeChatArticlevous devez vous assurer que le texte a une lisibilité et une reconnaissabilité suffisantes, utiliser des polices appropriées, garantir un espacement adéquat entre les paragraphes, et aucune indentation au début des paragraphes.

<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>

Icônes

<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>

Adresse de téléchargement du projet

Adresse Github :https://github.com/weui/weui

Adresse de ce site : weui-master.zip