熏风徐来，麦穗摇曳；麦类等夏熟作物生长旺盛，籽粒灌浆渐趋饱满，但尚未完全成熟，故称"小满"。
今日小满，基于云开发快速搭建智能名片小程序，发文以记录输入和输出过程。
一、功能总览：
1、名片列表
1）展示头像、姓名、岗位信息；
2）加载列表；
3）点击跳转查看名片详情；
2、名片详情
1）名片卡片样式，仿纸质卡片；
2）展示头像、姓名、岗位、公司信息；
3）展示邮箱、电话、地址；
4）存入手机通讯录功能；
5）分享名片功能；
6）一键复制功能；
7）一键拨号功能；
8）内嵌腾讯地图，并实现一键导航功能；
3、名片管理系统
1）名片分页查询；
2）创建名片；
3）名片编辑；
4）删除名片；
二、搭建智能名片，先画个草图
三、创建项目
之前有写过相关的文章，这里就不展开重复叙述了。感兴趣的话，可以翻阅历史文章。
四、新建页面，配置页面路由
"pages": [
"pages/cardDetail/cardDetail"
]
五、设置页面标题
"navigationBarTitleText": "我的名片"
六、页面布局分析
布局分析，一个大盒子，里面有两个子盒子，元素按照文档流进行排版布局。而②号盒子里面又有左右两个子盒子，按照flex布局。
普通流（文档流）就是元素按照其在 HTML 中的位置顺序决定排布的过程。
块级元素(display: block)：<view>，从上到下依次排列，独占一行，两个元素直接的垂直距离由元素的垂直margin计算得到。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，而这个容器我们称作flex容器，它的所有子元素自动成为容器成员，称为flex项目。
盒模型：
七、构建页面
1）实现卡片布局样式
2）实现头像样式
3）引入图片资源
4）添加职位、公司展示
5）完善其他信息展示
6）添加图标，丰富细节
7）还可以实现不同主题
比如，简约风格
比如，商务蓝
当然，还有其他皮肤或主题定制，需要大家动手实现了。
8）实现存入手机通讯录、分享名片
<view class="padding flex justify-between align-center padding-top-xs">
<view class="flex-sub">
<button class='cu-btn block line-blue lg'>
存入手机通讯录
</button>
</view>
<view class="flex-sub padding-left">
<button class='cu-btn block bg-blue margin-tb-sm lg'>
<text class='icon-share'></text> 分享名片
</button>
</view>
</view>
9）实现信息区域和操作栏
一键复制、一键拨号、一键导航
飞机稿
10）智能名片列表
八、小结
小满时节，麦穗渐满。收获与希望，随风而至。
我比较崇尚简洁明了、专业感强、清晰易读这些UI设计理念，所以我这里牛刀小试，设计和搭建了一款智能名片小程序，可以更好地展示个人形象和专业性，提升用户体验和印象。
当然，后续还需要完善其智能交互功能，以增强智能名片的智能性。