Weii is customized for wechat Web Services

Summary

WeUI is a set of basic style library consistent with wechat native visual experience, which is designed by wechat official design team for wechat Web development, which can make users' use perception more unified. Contains button, cell, dialog, toast, article, icon and other elements.

>

Mobile Preview

Please scan code with wechat or long press to identify

WeUI core components

**Weii component * * is not very rich at present, but it can meet most requirements. Not to mention the experience, I've tried to know that it's very convenient and direct to use. **The core file of WeUI * * is * * weui.css * *. If you publish a formal environment, you can compress it.

Simple framework construction

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <!-- Quote weui.min.css -->
    <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css">
</head>
<body ontouchstart>
    <!-- Use WeUI -->
    <a href="" class="weui_btn weui_btn_primary">Green button</a>
</body>
</html>

//Note: the meta tag of the HTML header viewport and the ontouchstart attribute of the body tag also need to be added.

HTML is built with the basic framework of WeUI. You can use various components of WeUI at will. The official Demo can be copied directly.

Demo component Dialog

In mobile web development, there are dialog reminders. Let's take a look at the effect of using the dialog component of WeUI!

Custom 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">Pop up title</strong></div>
        <div class="weui_dialog_bd">Custom pop up content<br>...</div>
        <div class="weui_dialog_ft">
            <a href="javascript:;" class="weui_btn_dialog default">cancel</a>
            <a href="javascript:;" class="weui_btn_dialog primary">Determine</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">Pop up title</strong></div>
        <div class="weui_dialog_bd">Pop up the contents, inform the current page information, etc</div>
        <div class="weui_dialog_ft">
            <a href="javascript:;" class="weui_btn_dialog primary">Determine</a>
        </div>
    </div>
</div>

OK, you can try other components yourself!
More frequent content please pay attention to the IT real battle alliance official account.

Tags: Javascript Web Development Mobile Attribute

Posted on Thu, 30 Apr 2020 06:04:45 -0700 by nigma