深入解析Tencent weui.js示例代码：前端组件实战指南

前言

weui.js是一个轻量级的JavaScript库，专为移动端Web应用设计，提供了一系列符合微信设计规范的UI组件。本文将通过分析示例代码，深入讲解weui.js的核心组件使用方法和实现原理，帮助开发者快速掌握这一优秀的前端工具库。

基础配置

在开始使用weui.js之前，我们需要进行一些基础配置：

import FastClick from 'fastclick';
import weui from '../src/weui';

FastClick.attach(document.body);

这段代码做了两件事：

1. 引入FastClick库解决移动端300ms点击延迟问题
2. 引入weui.js核心库

对话框组件

警告框(Alert)

weui.alert('自定义标题的alert', function() {
    console.log('ok')
}, {
    title: '自定义标题'
});

参数解析：

• 第一个参数：提示内容
• 第二个参数：确认回调函数
• 第三个参数：配置对象，可设置标题等属性

确认框(Confirm)

weui.confirm('自定义内容的confirm', function() {
    console.log('yes')
}, function() {
    console.log('no')
});

与alert不同，confirm提供了两个回调函数，分别处理用户点击"确认"和"取消"的情况。

提示类组件

轻提示(Toast)

weui.toast('操作成功', {
    duration: 3000,
    className: "bears",
    extClass: "x"
});

配置选项：

• duration: 显示时长(毫秒)
• className: 自定义类名
• extClass: 额外类名

加载提示(Loading)

var loading = weui.loading('loading');
setTimeout(function() {
    loading.hide();
}, 3000);

Loading组件需要手动调用hide()方法关闭，适合异步操作场景。

操作菜单(ActionSheet)

weui.actionSheet([
    {
        label: '拍照',
        onClick: function() { console.log('拍照'); }
    },
    // 更多选项...
], [
    {
        label: '取消',
        className: 'weui-actionsheet__cell_warn',
        onClick: function() { console.log('取消'); }
    }
], {
    title: 'actionTitle',
    className: "custom-classname",
    onClose: function(){ console.log('关闭'); },
    onClickMask: function() { console.log('点击mask'); }
});

ActionSheet分为两个部分：

1. 选项列表
2. 取消按钮列表
3. 配置对象

每个选项都可以设置label(显示文本)和onClick(点击回调)。

表单组件

选择器(Picker)

weui.js提供了多种选择器：

1. 普通选择器
2. 时间选择器
3. 多列选择器
4. 级联选择器

以级联选择器为例：

weui.picker([
    {
        label: '广东',
        value: 0,
        children: [
            {
                label: '广州',
                value: 0,
                children: [
                    { label: '海珠', value: 0 },
                    { label: '番禺', value: 1 }
                ]
            }
            // 更多选项...
        ]
    }
    // 更多省份...
], {
    depth: 3,
    defaultValue: [0, 1, 1],
    onChange: function(result) { console.log(result); },
    onConfirm: function(result) { console.log(result); },
    id: 'cascadePicker',
    title: '嵌套选择器'
});

关键配置：

• depth: 级联深度
• defaultValue: 默认选中值
• onChange: 值变化回调
• onConfirm: 确认选择回调

表单验证

weui.form.checkIfBlur('#form', {
    regexp: {
        IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/,
        VCODE: /^.{4}$/
    }
});

weui.form.validate('#form', function(error) {
    if (!error) {
        var loading = weui.loading('提交中...');
        setTimeout(function() {
            loading.hide();
            weui.toast('提交成功', 3000);
        }, 1500);
    }
}, regexp);

表单验证功能支持：

1. 失焦验证(checkIfBlur)
2. 提交验证(validate)
3. 自定义正则规则

文件上传

weui.js提供了强大的文件上传组件，支持自动和手动两种模式。

自动上传

weui.uploader('#uploader', {
    url: 'http://' + location.hostname + ':8002/upload',
    auto: true,
    type: 'file',
    compress: {
        width: 1600,
        height: 1600,
        quality: .8
    },
    onBeforeQueued: function(files) {
        // 文件类型和大小验证
    },
    onQueued: function(){
        // 文件加入队列
    },
    onSuccess: function (ret) {
        // 上传成功处理
    }
});

手动上传

weui.uploader('#uploaderCustom', {
    url: 'http://localhost:8002/upload',
    auto: false,
    onQueued: function() {
        uploadCustomFileList.push(this);
    }
});

// 手动触发上传
uploadCustomFileList.forEach(function(file){
    file.upload();
});

上传组件关键特性：

1. 图片压缩
2. 多文件选择
3. 上传进度显示
4. 缩略图预览
5. 文件删除功能

其他实用组件

搜索栏(SearchBar)

weui.searchBar('#searchBar');

简单一行代码即可实现符合微信风格的搜索框。

滑块(Slider)

weui.slider('#slider', {
    defaultValue: 50,
    onChange: function(percent){
        console.log(percent);
    }
});

支持功能：

1. 基础滑块
2. 步进滑块(step配置)
3. 分块滑块

标签页(Tab)

weui.tab('#tab',{
    defaultIndex: 0,
    onChange: function(index){
        console.log(index);
    }
});

最佳实践建议

1. 组件组合使用：如提交表单时结合Loading和Toast组件提升用户体验
2. 合理设置回调：充分利用各组件的生命周期回调函数
3. 移动端优化：所有组件都针对移动端做了触摸优化
4. 样式定制：通过className等参数可以轻松定制组件样式
5. 性能考虑：对于频繁操作的组件(如Slider)，注意回调函数的性能影响

结语

weui.js通过简洁的API提供了丰富的移动端UI组件，极大提高了开发效率。本文详细解析了核心组件的使用方法，掌握这些知识后，开发者可以快速构建出符合微信设计规范的移动Web应用。建议读者在实际项目中多加练习，深入理解各组件的特性和适用场景。