如何基于云开发进行快速搭建企业智能名片小程序？
首先，需要注册一个小程序账号，获取AppID。如果还不知道怎么注册的朋友，可以去看我前面写的那篇教程，有比较详细的注册步骤图文教程。
复制AppID，打开开发者工具，导入我提供的智能名片小程序项目，进行粘贴填写AppID。
记得，开通云开发服务。
复制环节ID。
在app.js进行配置。
在数据库中创建集合。
填写集合名称，比如：
数据权限设置一下，选择“所有用户可读”。
可以手动添加记录。或者选择导入数据的方式，前提是需要准备好对应的json数据文件。
我这提供了一份示例数据。
导入后：
其他集合的创建以此类推即可。
然后在小程序项目中，编写代码进行读取数据，代码如下：
// pages/cardList/cardList.js
// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const businessCard = db.collection('businessCard');
Page({
/**
* 页面的初始数据
*/
data: {
list: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getList()
},
// 获取名片列表
getList() {
// 发起查询，对记录进行筛选
businessCard
.where({
_id: db.command.exists(true)
})
.get()
.then(res => {
console.log(res)
// 获取集合数据，或获取根据查询条件筛选后的集合数据。
let list = res.data;
// 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
this.setData({
list
});
})
}
})在控制台打印
基本上，很便捷就能实现对数据库的读取操作了。对了，为了提升用户体验，需要把加载提示加上，请求完毕后隐藏。
// 显示 loading 提示框
wx.showLoading({
title: '数据加载中'
});// 隐藏 loading 提示框
wx.hideLoading();完整代码：
// pages/cardList/cardList.js
// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const businessCard = db.collection('businessCard');
Page({
/**
* 页面的初始数据
*/
data: {
list: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getList()
},
// 获取名片列表
getList() {
// 显示 loading 提示框
wx.showLoading({
title: '数据加载中'
});
// 发起查询，对记录进行筛选
businessCard
.where({
_id: db.command.exists(true)
})
.get()
.then(res => {
console.log(res)
// 获取集合数据，或获取根据查询条件筛选后的集合数据。
let list = res.data;
// 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
this.setData({
list
});
// 隐藏 loading 提示框
wx.hideLoading();
})
}
})接下来在wxml里面使用列表渲染：
wx:for="{{list}}" wx:key="index"大致代码：
<view wx:for="{{list}}" wx:key="index">
<image src='{{item.picUrl}}' mode='widthFix'></image>
<view>{{item.cname}}</view>
<view>{{item.position}}</view>
</view>页面效果：
通过navigator实现点击Item跳转到名片详情，当然切换页面还有其他方式，我前面的文章有归纳整理。
需要把跳转的目标页面路径和携带的参数给配置了。
<navigator wx:for="{{list}}" wx:key="index" hover-class='none' url="/pages/cardDetail/cardDetail?id={{item._id}}">这样就能实现点击列表项进行跳转到名片详情页了。
然后在详情页通过options接收所传递的参数，打印一下看看，传递成功了，可以通过枚举的方式读取id值。
拿到id之后，就能通过数据库方法去获取文档信息了。
完整代码：
// pages/cardDetail/cardDetail.js
// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const businessCard = db.collection('businessCard');
Page({
/**
* 页面的初始数据
*/
data: {
cardDetail: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options)
this.getDetail(options.id)
},
// 查询名片详情信息
getDetail(id) {
// 显示 loading 提示框
wx.showLoading({
title: '加载详情中'
});
businessCard
.doc(id)
.get()
.then(res => {
console.log(res)
// 获取详情
let cardDetail = res.data;
// 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
this.setData({
cardDetail
})
// 隐藏 loading 提示框
wx.hideLoading();
})
}
})打印一下，看到能成功获取到详情数据。
然后就是通过{{}}在页面进行读取渲染了。
实现一键复制功能：
wxml
<button bindtap="tapCopyFun">
一键复制
</button>
js
// 一键复制功能
tapCopyFun() {
// 设置系统剪贴板的内容
wx.setClipboardData({
data: '公众号：木番薯科技',
success(res) {
wx.getClipboardData({
success(res) {
console.log(res.data)
}
})
}
});
}可以通过data-来携带点击参数
<button bindtap="tapCopyFun" data-content="{{cardDetail.weChat}}">
一键复制
</button>通过e接收，通过e.currentTarget.dataset读取
// 一键复制功能
tapCopyFun(e) {
const content = e.currentTarget.dataset.content;
// 设置系统剪贴板的内容
wx.setClipboardData({
data: content,
success(res) {
wx.getClipboardData({
success(res) {
console.log(res.data)
}
})
}
});
}点击看看效果，成功了
实现存入手机通讯录功能：
实现一键导航功能：
搭建CMS后台管理
去使用
创建
启用云后台
智能名片管理
新建模型
名片管理
可以对名片进行增删查改操作
然后能够在客户端小程序同步获取数据
当然了，当全部搭建完毕后，可以上传，发给大家体验
可以选择体验版
完美！