当前位置:主页 > 微信开发 > WeUI >

微信网页开发基础组件表单预览preview

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-04
  我们在淘宝或其它商城买东西时,在选择好商品后就会点立即购买,点完“立即购买”后并没有马上付款,而是进入到了一个付款的预览界面,这里面列出来了您即将要付款的产品、金额、运费等信息,下一步才是真正的付款购买,这样做的好处就是可以再次提醒用户让用户确认是否选择的商品是正确的,如果错误还可以在这一步修改,而且,这一步预览可能增加用户体验,试想如果一个用户选择了一个商品点立即购买后,也没有什么提示立马付款,万一点错了商品或是购买的数量错了那很危险。

  同样的道理,在做微信公众号开发或是小程序开发时,也要在微信上面做一个预览界面,这样用户在付款时可以再次检查错误再次确认。

  WeUI框架提供了表单预览组件Preview,微信开发者在开发时可以使用这一系列的预览组件进行预览开发。

一个表单预览界面可以分为head、body和foot部分,如下图所示:

表单预览三部分

  这三部分对应着三个类:weui-form-preview__hd、weui-form-preview__bd、weui-form-preview__ft 。

  第一部分显示的是金额、第二部分显示的是购买的商品的说明信息、第三部分是相应的操作,例如,确定购买,返回等操作,具体可以根据业务需要进行相应的设置。

示例

表单预览
示例代码:

<div class="weui-form-preview">
            <div class="weui-form-preview__hd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">付款金额</label>
                    <em class="weui-form-preview__value">¥2400.00</em>
                </div>
            </div>
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">商品</label>
                    <span class="weui-form-preview__value">电动打蛋机</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">标题标题</label>
                    <span class="weui-form-preview__value">名字名字名字</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">标题标题</label>
                    <span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span>
                </div>
            </div>
            <div class="weui-form-preview__ft">
                <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</a>
            </div>
        </div>
        <br>
        <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">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">商品</label>
                    <span class="weui-form-preview__value">电动打蛋机</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">标题标题</label>
                    <span class="weui-form-preview__value">名字名字名字</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">标题标题</label>
                    <span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span>
                </div>
            </div>
            <div class="weui-form-preview__ft">
                <a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:">辅助操作</a>
                <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</button>
            </div>
        </div>