太阳集团5493conlogo
  • 微博
  • 微信
  • QQ好友
  • QQ空间
  • 百度

S

滚屏网站

crolling  website

太阳集团2138手机版
太阳集团2138手机版新闻
行业新闻
专业知识
太阳集团2138手机版教育
太阳集团2138手机版游记
详细内容

WeUI官方组件库：助力小程序高效设计与开发-杭州网站建设制作定制开发为你播报

时间：2020-05-21     作者：杭州网站建设制作定制开发【转载】   来自：高校微信小程序开发大赛

提起 WeUI，相信大家都不陌生，WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

不过，对于 WeUI 样式库，开发者就有疑问了。

1.png



1

有什么


我们来看看 WeUI 组件库到底有什么可用的 UI 组件呢？WeUI 样式库有的各个元素，WeUI 组件库是基于 WeUI 样式库做了组件化处理，开发者可以便捷的使用，无需考虑组件层面的逻辑问题。


2

怎么用


有了心动的组件之后，大家肯定想知道 WeUI 组件库是怎么使用的。

第一步：

引用


要使用 WeUI，首先要把 WeUI 引入我们的小程序项目，引入 WeUI 的方式有以下两种，使用其中一种即可～
方法一：通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。（推荐👍）
方法二：可以通过 npm方式下载构建，npm 包名为 weui-miniprogram。
与方法一不同，npm 引入的方式需要多操作一步，在 app.wxss 中引用 weui.wxss。
    // app.wxss@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';



    第二步

    使用


    引入之后，我们就要开始来使用了，WeUI 组件库是基于小程序自定义组件构建的，所以使用是以自定义组件的形式来使用。
    下面通过几个例子来感受下 WeUI 组件库的使用。
    由于是自定义组件的形式，所以使用组件都需要在页面配置中引入，像这样：
      // page.json{  "usingComponents": {    "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog",    "mp-searchbar": "weui-miniprogram/searchbar/searchbar"  }}

      引入组件之后，就可以直接在 wxml 中使用了，当然，为了让开发者接入更加简便，我们也加入了做了一些常见的实用性功能。

      半屏弹窗
      小程序提供了 wx.showModal、wx.showToast 供开发者进行页面交互，在开发过程中，可能需要自定义按钮相关的内容，所以 WeUI 提供了半屏弹窗让开发者可以有更多的自定义空间。
      我们来看下代码，使用很简单，直接使用 mp-half-screen-dialog，配置相关属性即可。
        // page.wxml    bindbuttontap="buttontap"    show="{{show}}"    mask-closable="{{false}}"    title="测试标题B"    sub-title="测试标题B的副标题"    desc="辅助描述内容，可根据实际需要安排"    tips="辅助提示内容，可根据实际需要安排"    buttons="{{buttons}}">
        // page.js data配置buttons: [  {    type: 'default',    className: '',    text: '辅助操作',    value: 0},{    type: 'primary',    className: '',    text: '主操作',    value: 1  }]
        来看下半屏弹窗的效果～

        u1s1，这交互体验真的爱了😍



        Form 表单校验

        Form 表单这里，除了基础的的功能之外，WeUI 组件库还提供了表单校验的能力，通过 rules 规则的配置（支持长度、手机号码、电子邮件、url 链接地址等），轻松解决表单校验问题。


        左滑删除
        相比 Web 端，手机端的操作按钮更多的是通过⬅️左滑等来实现，考虑到左滑删除的普遍性，WeUI 组件库也是支持的。
        在 mp-slideview 组件中设置 buttons属性即可。


        搜索组件
        同样是基本功能的搜索，WeUI 组件库也封装了搜索组件，开发者只需配置搜索结果即可拥有搜索功能～


        除了这些组件之外，WeUI 组件库还提供了很多实用的组件，包括基础的 icon、loading，表单的 uploader、cell 等等。


        第三步

        适配DarkMode


        伴随客户端、小程序对 DarkMode 的支持，WeUI 组件库也同步适配 DarkMode 的模式，让 WeUI 组件库的使用同学可以快速适配 DarkMode。
        在根结点（或组件的外层结点）增加属性 data-weui-theme="dark" ，即可把 WeUI 组件切换到 DarkMode 的表现，如：
          ...

          3

          体验WeUI


          最后，如果想体验 WeUI 组件库的效果，欢迎点击下方小程序示例体验👏及接入使用，使用过程中如有建议或者疑问，欢迎到微信开放社区与我们交流。

          小程序示例小程序UI组件库image.png小程序


          文章已于2020-05-15修改阅读原文

          相关信息
          1. 派，发一点春-杭州APP开发为你呈现
          2. 最新财报：增！-杭州网站建设为你呈现
          3. 这3个微信功能，谢谢老朋友！-杭州网站建设为你呈现
          4. 深圳大学，刷个掌-杭州网络公司为你呈现
          5. 挖一挖！5个微信“隐藏”功能-杭州网络公司为你呈现
          6. Q1财报，主要说两点：-杭州APP开发为你呈现
          7. 5.17-5.23 节目单是......杭州抖音短视频直播商城制作开发为你呈现
          8. 这份名单，第一次发布-杭州微信小程序开发为你呈现
          9. 今天，一起推广这个公众号-杭州网站建设为你呈现
          10. 微信帮帮“零”-杭州网络公司为你呈现
          太阳集团2138手机版
          更多
          • 2022 Q4 用户最喜爱的朋友圈广告-

            2022 Q4 用户最喜爱的朋友圈广告-

            基于用户的互动行为及广告效果数据指标，我们找出了2022年第四季度用户最喜爱的朋友圈广告TOP 10(排名不分先后)，期待更多好创意与你相见。TOP朋友圈广告用

          • 生活特辑 Vol.14 ᅵ

            生活特辑 Vol.14 ᅵ

            Good Life生活广告榜吃喝玩乐品生活，发现身边新乐趣。快来看看本季最受欢迎的身边广告。今天“吃”什么?吃喝福利,任你选新的一年不如用味觉拉开序幕不知道吃什

          • 速速集合，新年红包封面领取攻略来了-杭州

            速速集合，新年红包封面领取攻略来了-杭州

            新年怎样发红包姿势最帅？当然是用上最炫的红包封面！今年，红包封面又又又升级啦，全新动态红包封面上线，祝福更“动”人心。微信广告将携手众多品牌派发多款精美别致的红

          • 视频号互选好内容｜11月-杭州网络公司为

            视频号互选好内容｜11月-杭州网络公司为

            精选11月优秀视频号互选案例，为创作者指引好内容的风向，洞悉好商单的秘诀。理想汽车× 所长林超通俗科普，干货满满科技自主的路上，理想汽车的答案是什么。所长观察敏

          • 微信创作者营销价值与营销策略白皮书发布-

            微信创作者营销价值与营销策略白皮书发布-

            腾讯广告互选平台始于内容致远商业一图读懂微信创作者营销方法论微信创作者四大特点长久创作,深耕原创内容长久创作87.2%公众号运营超过2年垂类丰富体育 媒体 财经

          • 精华笔记｜2022 腾讯广告创作者营销峰

            精华笔记｜2022 腾讯广告创作者营销峰

            12月22日，腾讯广告以直播形式举办首届创作者营销峰会（以下简称“峰会”）。无论对广告主 / 代理商，还是创作者 / MCN机构，今年的峰会可谓是“一场及时雨”

          • 烟花贺岁：朋友圈点赞互动广告上线-杭州微

            烟花贺岁：朋友圈点赞互动广告上线-杭州微

            新年有新喜，微信广告全新推出朋友圈点赞互动广告，让品牌和用户一起放烟花，迎新年。品牌领赞，首枚烟花惊喜绽放；用户跟赞，个性化品牌烟花跃然出框；双向互动中激发更强

          • 即刻预约｜2022 腾讯广告创作者营销峰

            即刻预约｜2022 腾讯广告创作者营销峰

            连接放大价值腾讯广告创作者营销峰会2022/12/22邀请函尊敬的嘉宾:在内容创作者的黄金时代，无数品牌借力优质内容开辟出了商业增长新路径。作为微信商业内容官方

          • 搞笑与搞钱，这些创作者都很认真-杭州网络

            搞笑与搞钱，这些创作者都很认真-杭州网络

            在微信视频号上有着许多视频创作者，他们因为热爱，而创作出非常多有趣的视频。然而每一个视频背后，创作者都要付出无数的心血和努力。当粉丝达到一定数量，也具备相对成熟

          • 朋友圈橱窗广告上线-杭州APP开发为你呈

            朋友圈橱窗广告上线-杭州APP开发为你呈

            微信广告上线朋友圈橱窗广告，满足广告主更丰富的素材展示诉求。广告支持配置一个主素材和三个副素材，组合形式突破原生形态，更易吸引用户停留点击。朋友圈橱窗广告示意橱

          太阳集团5493con是一家专门致力于为企业提供全方位网站建设服务。年轻的我们带着梦想和对网络的热情走在互联网道路的前沿，一路走来，我们的努力和真诚得到了更多客户的认可。在未来的发在未来的发...

          浙公网安备：33010602011153

          seo seo