智能名片小程序创建名片页功能实现关键代码

智能名片小程序创建名片页功能实现关键代码

创建名片页时，整个操作流程是这样的，表单填写、头像图片上传、地址选择、表单校验、提交数据至数据库。

表单布局主要form、input、textarea为页面元素，很简单，主要讲一下相关功能点的关键代码实现。

图片上传

调用wx.cloud.uploadFile方法，将图片上传至云存储服务器。

wx.cloud.uploadFile({
        cloudPath: cloudPath, // 上传至云端的路径
        filePath: this.data.tempFilePath, // 小程序临时文件路径
        success: res => {
          // 返回文件 ID
          const fileID =  res.fileID;
        },
        fail: console.error
      })

地址选择

在页面加个点击事件监听器，然后在js中对应的函数体里面，添加这段代码，即可实现调起地图功能，进行地址选择。

wx.chooseLocation({
      success: function (res) {
        // success
        that.setData({
          address: res.address,
          latitude: res.latitude,
          longitude: res.longitude
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })

表单校验

使用常用的正则表达式，调用.test()进行校验。

MOBILE_TEST.test(formData.mobile)

提交数据至数据库

将电子名片数据提交至云数据库进行保存。

wx.cloud.database().collection('card').add({})

智能名片小程序创建名片页功能实现关键代码