博客

1、开通云开发

2、第一次开通云开发会设置环境

顶部会有当前环境的名称，如tjn-k3u19

3、创建表（集合就是表）

点击集合名称上的+号，gold就是我刚才创建的表

4、创建字段

添加索引，删除索引，全看你心情；索引就是表里面的字段

在app.js里面配置数据库

环境名称不能搞错了

  //数据库
    const db = wx.cloud.database({
      env: "tjnk3u19"
    });
    //数据库

5、wxml代码

<view class="container">
  <view class="bg-fff p-lr30 border-t">
    <view class="ipt-wrap border-b flex ai-center">
      <label for="" class="font14">姓名</label>
      <input type="text" class="ml40 flex1" placeholder="请输入姓名" bindinput="getNameValue"></input>
    </view>
  </view>

    <view class="ipt-wrap border-b flex ai-center">
      <label for="" class="font14">手机号码</label>
      <input type="text" class="ml40 flex1" maxlength="11" placeholder="请输入手机号码" bindinput="getPhoneValue"></input>
    </view>
 
    <view class="ipt-wrap border-b flex ai-center jc-sb">
      <view class="flex ai-center">
        <label for="" class="font14">所在地区</label>
        <picker mode="region" class="ml40 flex1 region" placeholder="省、市、区" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
          <view class="picker flex1 texthide">
            {{region[0]}} {{region[1]}} {{region[2]}}
          </view>
        </picker>
      </view>
      <view class="flex">
        <text wx:if="{{regionFlag}}">请选择</text>
        <text class="iconfont icon-youjiantou color-a5a5a5 ml20"></text>
      </view>
    </view>

    <view class="ipt-wrap border-b flex ai-center">
      <label for="" class="font14">佛语</label>
      <input type="text" class="ml40 flex1" maxlength="25" placeholder="请输入您的佛语" bindinput="getFoValue"></input>
    </view>

  <view class="combtn font16 color-fff _w100 bg-btn" bindtap="saveNewAddress">
    在线登记
  </view>
</view>

6、wxss代码

/*  */
.ipt-wrap{
  min-height: 100rpx;
  line-height: 100rpx;
}
.ipt-wrap label{
  min-width: 120rpx;
}
.icon-youjiantou{
  position: relative;
  top: 1rpx;
}
.textarea{
  height: 100rpx;
}
/*swtich样式-start*/
/*swtich整体大小*/
.wx-switch-input{
  width:82rpx !important;
  height:40rpx !important;
}
/*白色样式（false的样式）*/
.wx-switch-input::before{
  width:80rpx !important;
  height: 36rpx !important;
}
/*绿色样式（true的样式）*/
.wx-switch-input::after{
  width: 40rpx !important;
  height: 36rpx !important;
}
.ipt-wrap:last-child{
  border-bottom:none;
}
/*swtich样式end*/
.region{
  width: 500rpx;
  position: absolute;
  left: 150rpx;
}

7、js代码

const app = getApp();
Page({
  data: {
    elevatorFlag: 0,
    nameValue: '',
    phoneValue: '',
    foValue: '',
    region: ["省", "市", "区"],
    regionFlag: 1,
    // addressStatus: 0,
    // userID: 0
  },
  onLoad: function () {
    // let self = this;
    // this.setData({ userID: app.globalData.userID });
  },
  getNameValue: function (e) {
    this.setData({ nameValue: e.detail.value });
  },
  getPhoneValue: function (e) {
    this.setData({ phoneValue: e.detail.value });
  },
  getFoValue: function (e) {
    this.setData({ foValue: e.detail.value });
  },
  bindRegionChange: function (e) {
    this.setData({ region: e.detail.value, regionFlag: 0 });
  },
  saveNewAddress: function () {
     let self = this,
      regionFlag = self.data.regionFlag,//地址
      addressStatus = self.data.addressStatus,
      region = self.data.region,
      str = '';
    for (let i = 0, len = region.length; i < len; i++) {
      if (region[i].length == 1) { region[i] = region[i - 1]; }
      str += region[i] + ' ';
    }
    if (self.data.nameValue == "" || self.data.nameValue == 'None') {
      wx.showToast({
        title: '请输入姓名',
        icon: 'fail',
        duration: 2000
      })
      return;
    } else if (self.data.phoneValue.length!=11) {
      wx.showToast({
        title: '请输入正确的11位手机号码',
        icon: 'success',
        duration: 2000
      })
      return;
    } else if (self.data.regionFlag) {
      wx.showToast({
        title: '请选择省市区',
        icon: 'success',
        duration: 2000
      })
      return;
    }
    //把数据给云数据库
    const db = wx.cloud.database({});
    const cont = db.collection('gold');
    cont.add({
      data: {
        name: self.data.nameValue,
        tell: self.data.phoneValue,
        address: str,
        fo: self.data.foValue
      },
      success: function (res) {
        console.log(res._id)
        wx.showModal({
          title: '成功',
          content: '您已经登记成功',
          showCancel: false
        })
      }
    });
    //把数据给云数据库
  }
});