Smart business card applet creates business card page function and realizes key code

When creating a business card page , The whole operation process is like this , Form filling 、 Head picture upload 、 Address selection 、 Form verification 、 Submit data to database .

The form layout is mainly form、input、textarea For page elements , It's simple , Mainly talk about the key code implementation of relevant function points .

Image upload

call wx.cloud.uploadFile Method , Upload the picture to the cloud storage server .

wx.cloud.uploadFile({
        cloudPath: cloudPath, //  Path to the cloud 
        filePath: this.data.tempFilePath, //  Applet temporary file path 
        success: res => {
          //  Return file  ID
          const fileID =  res.fileID;
        },
        fail: console.error
      })

Address selection

Add a click event listener to the page , And then in js In the corresponding function body in , Add this code , You can adjust the map function , Make address selection .

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

Form verification

Use common regular expressions , call .test() check .

MOBILE_TEST.test(formData.mobile)

Submit data to database

Submit the electronic business card data to the cloud database for saving .

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