Smart UI :创造大于1的辅助系数

作者:有点粘的井

疫情的缘故,一整年都没去过电影院,在家用投影仪看的片子也屈指可数;不过有一部,足足看了两遍——《超体》。这是个14年的科幻动作片,女主误入黑帮交易,被迫在腹中缝入了高浓度提纯的CPH4(孕妇产生的微量元素可以帮助胎儿形成骨骼)走私毒品,运输过程中因为被打,药品破了渗透到了她的血液,自此,她的大脑被一步步开发,最后到达100%……

吸引我反复去看的,是片子的哲学观。

女主意识到逐渐开发的大脑,既是超能力,也是超能量,自己的肉体只是一个容器,当容器本身不足以支持这么大的超级能量时,基因为了生存的本能,会驱动细胞自主去寻找合适的土壤——穿越古今不断学习人类、地球乃至宇宙的所有信息,最后,女主肉体消失,变成一个超级计算机的载体u盘,留下一句“我无处不在”~~89分钟,叙事一气呵成——一切生物都是基因创造的机器,生命短暂,基因不朽

从电影回到现实,人类在有限的生命里,其实做着无限的被基因驱使的无意识行为;我们看似强大,站在食物链顶端,却经常无法分辨究竟哪些行为是我要,哪些是它想。作为凡人去思考这种庞大的知识理论,也许得到的答案,往往只能是草草的一句_物理的尽头是数学,数学的尽头是哲学,而哲学的尽头是神学_。

所以,既然我们无力与基因抗衡,那么只能顺应它的趋势;在能力范围内,保持清醒,有意识地做出让我们更幸福的行为决策,让短暂的肉体生命体验更多的愉悦和满足。

那么,幸福,是什么?

柳生雄宽说,所谓幸福,是能明确自己的价值观,并真正实现这种价值观的状态;而成功,则是让与自己持有相同价值观的人,也觉得你幸福,成功是幸福的延长线。

一个人,哪怕一天只工作8小时(互联网行业,应该不止),那么起码有 1/3 的时间,是在工作中度过的。如果你的工作内容,恰好是小程序开发,那么你生活中 1/3 时间的幸福公式便是:

  1. 价值观 = 希望高效开发小程序

  2. 实现价值观 = 辅助工具系数 ✖️(产出 ✖️ 质量)/ 时间

Smart UI 设计和开发的初衷,便是提升辅助工具系数。

Smart UI 是什么

智能小程序Smart UI 扩展组件库,及其衍生的示例模板库,是对小程序基础能力的扩容,包含更多元的能力和组合样式,当前已支持33种组件(组件列表),并沉淀出14套组合能力示例模板(模板列表)。

它根据原子理论进行拆解,像搭积木一般,以单体的积木元件通过组合形成千变万化的小程序实体。开发者可以自由选择,是自己对毛坯进行定制化装修,还是直接入住我们的精装房。

但无论怎样,搬砖、打地基、刮水泥这种繁重的工作,已经由 Smart UI 完成。

可视化辅助编程

在探索小程序开发提效时,我们意识到,可视化辅助编程所见即所得,既能降低语言的学习门槛,又保留了开发者自开发的灵活度,对我们来说是一个平衡感极佳的提效手段。

因此,我们选取开发者工具GUI辅助编程,作为上文提到的关键辅助系数

Smart UI 组件的使用,首先,支持最常规的npm 引入:

1)第一步,要在项目中 npm 安装依赖包@smt-ui/component

1npm i @smt-ui/component 2

2)引入 npm 包中的自定义组件

1{ 2 "usingComponents": { 3 "smt-icon": "@smt-ui/component/src/icon" 4 } 5} 6

3)在对应页面的 swan 中直接使用该组件

1<smt-icon name="arrow-left"></smt-icon> 2

与此同时,也支持结合开发者工具面板,进行可视化辅助编程:

1)打开开发者工具,显示编辑器界面

2)点击编辑器右上角,打开组件面板

3)选择 Smart UI 面板,即可查看 Smart UI 的组件列表

4)在面板上选中组件,点击插入,即可将组件插入当前的 .swan 文件中,模拟器中也可查看效果


同样的,组合能力示例,我们也提供了与上文类似的两种使用方式。

  1. 通过npm 安装引入

1)在小程序根目录执行下方命令,下载页面模板的对应的 npm 包

1npm i @smt-ui-template/page-status // 模板名称 2

2)将对应的模板文件拷贝到当前小程序合适的目录下(如 pages): “模板文件”为 npm 包内 @smt-ui-template-xxx 文件

1├── project.swan.json 2├── app.json 3├── app.js 4├── pages 5 └── @smt-ui-template-status // 模板文件 6

3)在小程序根目录的 app.json 中配置模板页面的 path 路径,查看效果

1{ 2 "pages": [ 3 ... 4 "pages/@smt-ui-template-status/index" 5 ... 6 ] 7} 8

2. 可视化辅助编程,开发者工具欢迎页面板

打开开发者工具,点击“页面模板”,选择相应模板,选中后点击右下角“立即使用”,填写相关信息点击右下角“完成”按钮。

 

丰富的图标库

在日常的小程序项目实践中,设计师们将以往沉淀的284个图标进行细节优化,使其在应用中更具准确性、多样性和丰富度,并且封装成SVG格式对外输出,塑造为一套真正能够为开发者所用的Smart UI图标库(icon组件使用方式详见文档)。

 

轻量级图表

当我们遇到一些数据、报表需求时,自己绘制的成本很高,往往会去寻找一些图表第三方库;Smart UI 中实现了小程序图表组件,可以使用扁平化数据配置快速接入,体积轻便,满足常规的折线图、柱状图、饼图需求,支持 SVG + Canvas 两种渲染引擎。(clfe-chart组件使用方式详见文档)。 

信息流卡片组件

如果小程序本身是内容类组件,那么信息流则是不可缺少的。

Smart UI 提供了多种模式的信息流卡片组件,由小程序UE专业团队设计,符合信息流设计规范;包括左文右图、纯文本、上文下图、多图及视频等多种模式。(feed-item组件使用方式详见文档

关注引导蒙层组件

为帮助小程序开发者更好地留存用户,在未来持续性与用户进行互动,智能小程序官方推出了小程序关注组件,而关注引导蒙层组件,可以引导用户关注小程序。

​mask组件,可以一键引导用户关注小程序,提升小程序的用户粘性;同时支持默认顶部导航和自定义导航。(mask组件使用方式详见文档) 

当然,蒙层引导能使用户注意力聚焦在引导上,此时原页面功能均无法使用;考虑到它会打断用户的任务路径和沉浸式体验,我们建议谨慎使用,可在用户首次进入小程序首页时展示1次。

实战小程序

表白整蛊神器小程序,应用了Smart UI 组件库中的自定义导航和下拉刷新,完成首页模板瀑布流。 (源码地址:https://github.com/wannamakeudance/swan-artifact)

配套示例模板

对于一个刚刚接触小程序开发的同学来说,学习文档是第一步,但是文档的api、组件内容齐全且庞大,每个都学会再去开发小程序,将会是一个相对漫长的过程。

这个时候,如果有一些现成的的小程序模板,开箱即用,开发者在二次开发的过程中,边使用边学习,可以大幅降低学习成本——Smart UI 组件结合小程序日常业务,沉淀出了组合能力示例,用以解决这个的痛点。

下方为图文详情页、办理类服务(多流程)模板效果示例;更多模板,可以查看官网文档https://smartprogram.baidu.com/docs/develop/example/template/templatelist/

 

以上就是想要跟大家分享的内容,希望 Smart UI 能够作为大于1的辅助系数,让小程序的开发者,提升 1/3 时间的幸福

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

一篇文章带你了解JavaScript日期

日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用