weui.js怎么使用

WeUI.js的使用：简单、灵活、模块化

WeUI.js 是一个为 WeChat（微信）Web 开发量身定制的前端库，它提供了一套丰富的 UI 组件，帮助开发者快速搭建微信风格的移动端页面。WeUI.js 简单易用、灵活、模块化。在本文中，我们将详细介绍如何使用 WeUI.js 以及它的主要功能。

一、WeUI.js 简介

WeUI.js 是基于 WeUI 的 JavaScript 库，旨在简化微信 Web 开发。WeUI（WeChat UI）是微信官方设计团队推出的一个 Web UI 库，包含了各种常用的 UI 组件，如按钮、弹窗、列表、表单等。WeUI.js 在此基础上，进一步提供了 JavaScript 方法和事件处理，使得开发者可以更便捷地操作和控制这些 UI 组件。

二、安装和引入 WeUI.js

使用 WeUI.js 非常简单，可以通过以下几种方式进行安装和引入：

1. 通过 npm 安装

npm install weui.js

安装完成后，在你的项目中引入 WeUI.js：

import weui from 'weui.js';

2. 通过 CDN 引入

你也可以直接通过 CDN 引入 WeUI.js：

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.5.0/weui.min.css">
<script src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>

三、基本用法

1. 创建一个简单的按钮

WeUI.js 提供了多种按钮样式，可以通过简单的 HTML 代码创建一个按钮：

<button class="weui-btn weui-btn_primary">按钮</button>

2. 使用 JavaScript 创建一个弹窗

WeUI.js 提供了丰富的弹窗功能，包括警告框、确认框、提示框等。以下是创建一个警告框的示例：

weui.alert('这是一个警告框', {
    title: '警告',
    buttons: [{
        label: '确定',
        type: 'primary',
        onClick: function(){ console.log('确定'); }
    }]
});

四、详细功能介绍

1. 表单组件

WeUI.js 提供了丰富的表单组件，包括输入框、选择框、单选按钮、复选框等。

1.1 输入框

<div class="weui-cell">
    <div class="weui-cell__hd"><label class="weui-label">输入框</label></div>
    <div class="weui-cell__bd">
        <input class="weui-input" type="text" placeholder="请输入文本">
    </div>
</div>

1.2 选择框

<div class="weui-cell weui-cell_select weui-cell_select-after">
    <div class="weui-cell__hd">
        <label for="" class="weui-label">选择框</label>
    </div>
    <div class="weui-cell__bd">
        <select class="weui-select" name="select1">
            <option value="1">选项一</option>
            <option value="2">选项二</option>
        </select>
    </div>
</div>

1.3 单选按钮和复选框

<div class="weui-cells__title">单选按钮</div>
<div class="weui-cells weui-cells_radio">
    <label class="weui-cell weui-check__label" for="x11">
        <div class="weui-cell__bd">
            <p>选项一</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="radio1" id="x11">
            <span class="weui-icon-checked"></span>
        </div>
    </label>
    <label class="weui-cell weui-check__label" for="x12">
        <div class="weui-cell__bd">
            <p>选项二</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="radio1" id="x12">
            <span class="weui-icon-checked"></span>
        </div>
    </label>
</div>
<div class="weui-cells__title">复选框</div>
<div class="weui-cells weui-cells_checkbox">
    <label class="weui-cell weui-check__label" for="s11">
        <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" name="checkbox1" id="s11">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>选项一</p>
        </div>
    </label>
    <label class="weui-cell weui-check__label" for="s12">
        <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" name="checkbox1" id="s12">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>选项二</p>
        </div>
    </label>
</div>

2. 列表组件

WeUI.js 提供了各种风格的列表组件，如文本列表、带图标的列表等。

2.1 文本列表

<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p>标题一</p>
        </div>
        <div class="weui-cell__ft">详细信息</div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p>标题二</p>
        </div>
        <div class="weui-cell__ft">详细信息</div>
    </div>
</div>

2.2 带图标的列表

<div class="weui-cells weui-cells_access">
    <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__hd">
            <img src="icon_nav_button.png" alt="" style="width:20px;margin-right:5px;">
        </div>
        <div class="weui-cell__bd">
            <p>标题一</p>
        </div>
        <div class="weui-cell__ft">详细信息</div>
    </a>
    <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__hd">
            <img src="icon_nav_msg.png" alt="" style="width:20px;margin-right:5px;">
        </div>
        <div class="weui-cell__bd">
            <p>标题二</p>
        </div>
        <div class="weui-cell__ft">详细信息</div>
    </a>
</div>

五、弹窗组件

WeUI.js 提供了多种弹窗组件，包括警告框、确认框、提示框、加载提示等。

1. 警告框

weui.alert('这是一个警告框', {
    title: '警告',
    buttons: [{
        label: '确定',
        type: 'primary',
        onClick: function(){ console.log('确定'); }
    }]
});

2. 确认框

weui.confirm('这是一个确认框', {
    title: '确认',
    buttons: [{
        label: '取消',
        type: 'default',
        onClick: function(){ console.log('取消'); }
    }, {
        label: '确定',
        type: 'primary',
        onClick: function(){ console.log('确定'); }
    }]
});

3. 提示框

weui.toast('操作成功', {
    duration: 3000,
    className: 'custom-classname',
    onClose: function(){ console.log('关闭'); }
});

4. 加载提示

const loading = weui.loading('加载中...');
// 关闭加载提示
loading.hide();

六、其他功能

WeUI.js 还提供了其他一些实用功能，如顶部提示、操作表、图片预览等。

1. 顶部提示

weui.topTips('这是一个顶部提示', {
    duration: 3000,
    className: 'custom-classname',
    onClose: function(){ console.log('关闭'); }
});

2. 操作表

weui.actionSheet([
    {
        label: '选项一',
        onClick: function () {
            console.log('选项一');
        }
    }, {
        label: '选项二',
        onClick: function () {
            console.log('选项二');
        }
    }
], [
    {
        label: '取消',
        onClick: function () {
            console.log('取消');
        }
    }
], {
    className: 'custom-classname',
    onClose: function () {
        console.log('关闭');
    }
});

3. 图片预览

weui.gallery('<img src="image.jpg" alt="">', {
    className: 'custom-classname',
    onDelete: function () {
        console.log('删除');
    }
});

七、总结

WeUI.js 为微信 Web 开发提供了一套丰富且易用的 UI 组件和工具，使得开发者可以更高效地构建移动端页面。简单、灵活、模块化是 WeUI.js 的核心优势。通过本文的介绍，相信你已经对 WeUI.js 的使用有了全面的了解。无论是基础的按钮和表单，还是复杂的弹窗和操作表，WeUI.js 都能为你的开发工作提供强大的支持。

如果你正在从事微信 Web 开发，不妨尝试一下 WeUI.js，它将帮助你快速搭建高质量的微信风格页面。