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

熏风徐来，麦穗摇曳；麦类等夏熟作物生长旺盛，籽粒灌浆渐趋饱满，但尚未完全成熟，故称“小满”。
今日小满，基于云开发快速搭建智能名片小程序，发文以记录输入和输出过程。

一、功能总览：

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设计理念，所以我这里牛刀小试，设计和搭建了一款智能名片小程序，可以更好地展示个人形象和专业性，提升用户体验和印象。
当然，后续还需要完善其智能交互功能，以增强智能名片的智能性。