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

微信网页开发操作反馈结果页Msg

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-05
  结果页指的是进行某些操作后的最终结果页,这个WeUI组件在很多地方都使用,如果看官方的文档的话这个不好理解,让我给大家举一个例子。

  例如,您到某电子商务网站看到一部手机非常好,您非常喜欢于是您就注册一个会员后,然后,选择这部手机的型号、颜色、购买数量等手机属性,选择好后您就可以点马上购买,进行付款购买后,当付款成功后就显示一个结果页,在这个结果页提供了您购买的相关的信息,例如,您购买了哪部手机、什么时候会发货、什么时候到货等与这部手机相关的信息,并且,在这个页面还提供了一些与这个手机相关的操作,例如,购买手机套、理财、下载app推荐等信息,这个页面就是结果页。

  在做微信小程序开发时,如果您开发的小程序是提供的卖产品的服务,那么,这个页面肯定会有付款,这时就需要一个结果页面,等用户购买了某产品后就会给用户提供一下结果页。

  当然,并不只是只有在卖产品小程序里面会用到结果页信息,有些地方也会用到结果页Msg,例如,在微信里面上传头像时也会用到结果页面、上传图片时也可以使用结果页给上传完成的用户一个提示结果页,还有很多地方都可以使用结果,使用结果页提示信息的好处是,可以增加用户体验。如果用户一个重要操作没有任何提示的话会让用户感觉不知道所措的。

示例:


示例代码:

<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 class="weui-msg__extra-area">
        <div class="weui-footer">
            <p class="weui-footer__links">
                <a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
            </p>
            <p class="weui-footer__text">Copyright &copy; 2008-2016 phpos.net</p>
        </div>
    </div>
</div>

结果页源码分析:

  1)结果提示页最外层是容器 .weui-msg:这个容器定义了结果提示页面距离顶部36px,并在这个容器里面的文本居中显示。

  2)结果信息图标:在结果页设置一个与结果相关的提示的图标也是非常有意义的,例如,当用户操作了不该操作的功能时,就来一个警告提示,使用的类是.weui-msg__icon-area ,这个类定义了图标距离底部的距离。

  3)结果页文本信息:通过类weui-msg__text-area定义了这个结果页的文本数据容器,在这个容器里面是具体的操作的提示信息,可以有超链接等。

   类 weui-msg__title定义了结果页的标题:这个类所在的容器定义了操作成功与否的标题信息。

   类 weui-msg__desc 定义操作的具体描述信息:这个结果页的具体的描述信息都在这个类所在的div里面进行定义。

  4) 操作区域:通过类weui-msg__opr-area定义了操作区域具体操作,例如,“确认”、“取消”、“推荐信息”等。

  5) 其它区域:通过weui-msg__extra-area类定义了在这个容器里面的一些与结果页相关的信息,例如,小程序底部的版权信息等。