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

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

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

一、功能总览:

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

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

相关推荐
耶啵奶膘22 分钟前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡3 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼6 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_17448285759 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502779 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__15 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收