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；

npm i @smt-ui/component

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

{
    "usingComponents": {
        "smt-icon": "@smt-ui/component/src/icon"
    }
}

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

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

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

1）打开开发者工具，显示编辑器界面

2）点击编辑器右上角，打开组件面板

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

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

---

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

1. 通过npm 安装引入

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

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

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

├── project.swan.json                   
├── app.json                            
├── app.js                              
├── pages
    └──  @smt-ui-template-status  // 模板文件

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

{
    "pages": [
        ...
        "pages/@smt-ui-template-status/index"
        ...
    ]
}

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/wannamakeu...）

配套示例模板

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

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

下方为图文详情页、办理类服务（多流程）模板效果示例；更多模板，可以查看官网文档https://smartprogram.baidu.co...

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