WeUI está diseñado a medida para servicios web de WeChat

Resumen

WeUI es una biblioteca de estilos básica que coincide con la experiencia visual nativa de WeChat, diseñada a medida por el equipo de diseño oficial de WeChat para el desarrollo web de WeChat, lo que hace que la percepción de uso del usuario sea más uniforme. Incluyebutton、cell、dialog、toast、article、icony otros diversos elementos.

Instalación

Método 1 (recomendado)

WeChat oficial, Staticfile CDN y cdnjs proporcionan enlaces CDN para WeUI; se recomienda usarlos. Los enlaces son los siguientes:

Fuente	Dirección
WeChat oficial	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étodo 2:

Instalar usando bower

bower install --save weui

Método 3:

Instalar usando npm

npm install --save weui

Desarrollo

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

Ejecutargulp -wsel comando, se supervisaránsrclos cambios de todos los archivos en el directorio, y por defecto en el8080puerto se iniciará el servidor, y luego abra en el navegadorhttp://localhost:8080/example。

Vista previa en el móvil

Por favor, escanee el código con WeChat

Ejemplo en línea de WEUI

Botón (Button)

El botón puede usaraobuttonetiqueta. En wap, para activar el estado active del botón, debe dispararse el evento ontouchstart; se puedebodyagregar enontouchstart=""para disparar globalmente.

Escenarios comunes de operación de los botones: confirmar, cancelar, alerta; corresponden respectivamente a las clases:weui_btn_primary、weui_btn_default、weui_btn_warn, cada escenario tiene su propio estado grisweui_btn_disabled, además, hay un botón de contornoweui_btn_plain_xxx, en la webview del cliente hay dos tipos de tamaños de botón: el ancho predeterminado es 100%, el botón pequeño tiene ancho adaptable, y la distancia entre el borde y el texto en ambos lados es 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>

Celda (Cell)

Cell, vista de lista, utilizada para mostrar la información en una estructura de lista en la página, es la estructura de contenido más común en wap.CellCompuesto por varias secciones, cada sección incluye un section headerweui_cells_titley cellsweui_cells。

cellcompuesto por thumbnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ftcompuesto por tres partes,cellutiliza un diseño adaptable; en la parte que necesita adaptarse, agregue la claseweui_cell_primarybasta con:

Elemento de lista con descripción

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

CellSe pueden realizar varias extensiones personalizadas según sea necesario, incluyendo descripción auxiliar, salto, selección única, selección múltiple, etc. A continuación se muestra un elemento de lista con icono, descripción y salto; para otros casos, puede consultar directamenteexampleel código en:

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

Diálogo (Dialog)

Si la ventana de alerta del sistema no puede satisfacer las necesidades de contenido de vista temporal de la página web, puede personalizar un diálogo similar al formulario de alerta, y dentro del diálogo puede usar varios controles personalizados para satisfacer las necesidades.

<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

El toast se utiliza para mostrar temporalmente cierta información y desaparece automáticamente después de unos segundos. Esta información suele ser información de estado de éxito, error o espera de operaciones ligeras.

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

Página de resultados (Msg Page)

La página de resultados, en general, puede considerarse como la página de resumen que concluye el flujo después de una serie de pasos de operación. Su función principal es informar al usuario sobre el resultado del procesamiento de la operación y los detalles necesarios relacionados (que se pueden usar para confirmar si la operación anterior fue correcta), entre otra información; si el flujo se utiliza para activar o desactivar ciertas funciones importantes, se puede agregar contenido descriptivo relacionado con la función en la página de resultados; además, la página de resultados también puede contener operaciones de valor agregado, como proporcionar entradas a funciones como sorteos y seguir la cuenta oficial.

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

Página de artículo

La vista de texto muestra grandes bloques de texto, que generalmente son el contenido principal de la página.ArticleAdmite estilos de texto enriquecido como párrafos, títulos de varios niveles, citas, imágenes incrustadas, listas ordenadas/no ordenadas, y puede responder a las operaciones de selección del usuario.

Al usar en la webview del cliente de WeChatArticle, se debe garantizar que el texto tenga suficiente legibilidad y claridad, usar tipografías estándar, garantizar un espacio adecuado entre párrafos y sin sangría al inicio del párrafo.

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

Iconos

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

Dirección de descarga del proyecto

Dirección de Github:https://github.com/weui/weui

Dirección de este sitio:weui-master.zip