叮当App组件化的使用方法 (一)DIY组件

叮当App组件化刚刚推出,官方暂时也没有出一个使用教程,很多朋友都不会用,这里呢,我就简单分享一下我自己在捣鼓组件化时的一点点经验。

操作方法

  • 01

    一、创建组件。 点击【组件库】菜单,进入组件库管理界面,点击【新增组件】,选择一个类型的组件样式,这里我们选择一个ListUI选项卡下面的样式,之后设置如图的一些参数,便可以创建一个组件。

  • 02

    二、使用组件之【DIY组件】 1.其实这里叫DIY组件,可能不太确切,原本意思是让用能够自由组合这些组件,并且展示在同一个页面(原来列表的界面)。 2.使用时,首先在组件库里面点击【去模块设置】,然后点击某一个模块,这里我们随便点击一个模块,找到模块类型区域,点击蓝色按钮,弹出【选择界面风格界面】,选择【DIY组件】,选好之后保存设置,然后找到【组件设置】,弹出组件设置界面,我们可以点击右边的组件选择该模块的界面由哪些组件所组成,同样的,我们也可以在左侧小手机里面对组件进行排序,排序的结果直接影响打包出来之后,按照什么样的顺序展示组件的内容。选择好之后,就ok了,可以自己打包看一看效果,因为组件功能刚上,官方还没有跟进组件页面的预览,所以您选好之后,页面的手机是看不到效果的,必须自己打包之后才能看出效果。

  • 03

    三、内容设置 1.经过上面两步,其实DIY组件的使用已经可以了,但是可能有些朋友打包打出来,看不到任何东西,这个时候,不用担心,我们点击【内容】菜单,进入内容管理界面,我们会看到列表中有一个【权重】的标签,任意点击某一条内容,就可以对这条内容的权重进行设置。 2.可能有朋友有疑问,设置这个权重有什么用呢?大家还记得在第一个步骤创建组件的时候,有一个设置组件权重的选项吗?这个地方就派上用场了。 举个例子:如果我创建了一个组件,并且设置了这个组件绑定的栏目叫【美食】,并且设置权重是在41 ~ 60 之间。设置好之后,如果我内容里面,【美食】这个栏目下,有某一条内容的权重是在41 ~ 60 之间的,那么该条内容就会显示在这个组件里面,【注】:前提是设置的数据数目不能为0。

  • 04

    四、打包出来的样子 这个是我打包出来的样子,紫色的部分是一个组件,下面是另外一个组件

(0)

相关推荐

  • 干货!实例组件化设计与开发合作分享

    小编:今天是@可乐橙公司的一个内部分享,内容有点多,先mark再看哦- 终于迎来一期特刊.最近打算在公司内部做一个分享,讲的是组件化的设计与开发的思维方式.准备完演讲资料,发现这完全可以改成一篇文章. ...

  • 组件化设计思维 – 从规范到工具的构建与探索

    @斓青  阿里巴巴在中台战略的背景下,设计提效又再次推动着设计思维的变革.设计师们不仅仅需要出色地完成业务需求的设计,同时还需要思考设计的价值,也就是经常提到的最佳方案性价比.我们需要在设计的个性化表 ...

  • 途牛iPhoneX适配揭秘:组件化系统下的动态设计

    过去不久的11月,不知道有多少小伙伴已经成功入坑苹果公司的新一代肾机iPhoneX了呢,作为苹果近几年来的突破之作,其外观及屏幕的变化也是让我们UED的设计师们虎躯为之一震. 本着全心全意为用户服务的 ...

  • 设计的“整理术” —滴滴表单项目的组件化设计思维沉淀

    以滴滴表单项目解析如何运用组件化设计思维去"整理"项目. 『 写在之前 』 最近在阅读<佐藤可士和的超整理术>,书里讲述的是作者通过对空间.信息和思考的整理,来解决复杂 ...

  • 视觉改版中组件化设计思维

    经历过几次视觉大改版,在原来的公司也做过比较完整的规范体系,但是在具体实际操作中还是会出现效率不高的情况,最近也一直在思考如何高效完成设计规范,并能在实际工作流中减少设计资源重复使用现象. 在去年我看 ...

  • 世纪佳缘app用ID查找好友方法图解

    很多小伙伴不知道怎么用ID查找人的,甚至不知道有查找的功能,今天小编就来告诉你了,有需要的小伙伴就一起往下看——世纪佳缘怎么用ID查找好友。 1)打开【世纪佳缘】app,点击导航栏的【找人】。(如下图 ...

  • Win7系统通过删除不常用的系统组件提高运行速度的方法

    Win7系统通过删除不常用的系统组件提高运行速度的方法 1.点击"开始--控制面板--程序和功能",打开与之对应的窗口; 2.点击右侧窗口的"打开或关闭Windows功能 ...

  • 时光小视频APP如何使用?时光小视频APP创建视频作品的方法

    时光小视频APP如何使用?时光小视频app是由腾讯科技开发营运的软件,这款软件主要的用处和抖音短视频的性质一样,都是分享搞笑视频的,有些用户不太清楚它是如何使用的,在接下来的文章中小编将带来详细的操作 ...

  • 邮储银行APP可以指纹登录吗?邮储银行APP开启指纹登录的方法

    邮储银行APP可以指纹登录吗?邮储银行的全称是中国邮政储蓄银行,由中国邮政储蓄银行开发的一款安卓软件,用户使用这款app可以办理一些基本的业务,能够省下不少时间,现在新版的邮储银行APP已经实现了指纹 ...