今天我们继续学习weui框架，今天介绍的是weui框架里的结果页和预览。

结果页：

结果页我们在微信中经常见到，比如我们操作某一步步骤是会提示您成功，再比如付款成功等。

直接进入主题，来看看我们的代码：

<div class="weui-msg">
    <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
    <div class="weui-msg__text-area">
        <h2 class="weui-msg__title">操作成功</h2>
        <p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p>
    </div>
    <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
            <a href="javascript:history.back();" class="weui-btn weui-btn_primary">确定</a>
            <a href="javascript:history.back();" class="weui-btn weui-btn_default">取消</a>
        </p>
    </div>
</div>

代码如上，简单的布局，主要是这几个样式，可以多检查看看这些类的样式。我们再来看看效果图：                                                                                                      效果图如上，是不是觉得眼熟。付款经常有的提示。

预览详情：

小伙伴们在微信上购买物品之后都会有详情提示页。今天我们来讲讲。首先我们来看代码：

<div class="weui-form-preview">
    <div class="weui-form-preview__hd">
        <label class="weui-form-preview__label">付款金额</label>
        <em class="weui-form-preview__value">¥2400.00</em>
    </div>
    <div class="weui-form-preview__bd">
        <p>
            <label class="weui-form-preview__label">商品</label>
            <span class="weui-form-preview__value">电动打蛋机</span>
        </p>
        <p>
            <label class="weui-form-preview__label">标题标题</label>
            <span class="weui-form-preview__value">名字名字名字</span>
        </p>
        <p>
            <label class="weui-form-preview__label">标题标题</label>
            <span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span>
        </p>
    </div>
    <div class="weui-form-preview__ft">
        <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</a>
    </div>
</div>

实践出真知，样式就不一一介绍了，实际操作之后多了解一下它的样式。最后我们来看看它的效果图：

                                                                                           效果图如上。今天的介绍就到这里，后续持续更新，希望给正在阅读文章的你带来收益。以上纯属个人观点，如有错误欢迎指正。谢谢大家。