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

如何基于云开发进行快速搭建企业智能名片小程序?

首先,需要注册一个小程序账号,获取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后台管理

去使用

创建

启用云后台

智能名片管理

新建模型

名片管理

可以对名片进行增删查改操作

然后能够在客户端小程序同步获取数据

当然了,当全部搭建完毕后,可以上传,发给大家体验

可以选择体验版

完美!

相关推荐
说私域2 分钟前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8682 分钟前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165021 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦8 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac11 小时前
微信小程序的组件
微信小程序
stormjun12 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck12 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23415 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong15 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟15 小时前
小程序跳转另一个小程序
小程序