基于云开发快速搭建智能名片小程序

熏风徐来，麦穗摇曳；麦类等夏熟作物生长旺盛，籽粒灌浆渐趋饱满，但尚未完全成熟，故称"小满"。

今日小满，基于云开发快速搭建智能名片小程序，发文以记录输入和输出过程。

一、功能总览：

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设计理念，所以我这里牛刀小试，设计和搭建了一款智能名片小程序，可以更好地展示个人形象和专业性，提升用户体验和印象。

当然，后续还需要完善其智能交互功能，以增强智能名片的智能性。