微信小程序+云开发实现表单数据提交到云开发的数据库里面

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})}});//把数据给云数据库}
});

微信小程序+云开发实现表单数据提交到云开发的数据库里面相关推荐

微信小程序：二开版优化新紫色UI云开发新款壁纸小程序源码
这是一款由旧版https://airymz.com/3387.html进行优化二开的一个新版本本壁纸表情包头像小程序采用(dcloud云开发)所以无需服务器与域名无需服务器.无需域名.云开发直接上 ...
uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
超市微信小程序怎么做_微信小程序便利店怎么开？便利店和百货超市怎么开发小程序？...
微信小程序便利店怎么开?便利店和百货超市怎么开发小程序?下面跟随小编一起来看看吧! 现在很多商家还在小程序是什么,流行的说法是开店到微信,创建一个互联网离线模式,将近五公里的小程序显示出来,只要别人用 ...
微信小程序（应用号）实战课程之记账软件开发
http://git.oschina.net/dotton/finance [2016-10-12] 更新缘起:昨天官方开发有了更新v0.10.101100,Picker的mode属性已经支持dat ...
轻松实现微信小程序上传多文件/图片到腾讯云对象存储COS（免费额度）
概述对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储和查看数据. 个人账户首次开通COS可以免费领取50GB 标准存 ...
微信小程序之九九乘法表
之前跟大家讲过用python Flask编写九九乘法表,今天就为大家讲讲如何使用微信小程序来实现九九乘法表? 关于九九乘法表其中的规律,在这里我就不再阐述,如想了解.请访问:https://blog. ...
微信小程序示视频应用场景例利用腾讯云仅限开发案例四
场景四:视频应用场景微信小程序框架具备丰富的wxml/wcss/js api以及配套的文档帮助开发者快速地搭建时下热门的视频类应用,微信小程序框架主要提供了客户端的解决方案,但构建完整的视频类应用必 ...
开发微信小程序商城（源代码+教程），新商云-全渠道互通
微信小程序的出现,使一些电商行业经营者看到了新的营销模式,小程序不仅可以带来大量的客源,其简便的交易流程也是众多人选择它的原因.新商云微信小程序商城,微信内部高效获客,迅速裂变增加会员数量. 想要搭建 ...
微信小程序-如何获取用户表单控件中的值
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...

微信小程序+云开发实现表单数据提交到云开发的数据库里面

微信小程序+云开发实现表单数据提交到云开发的数据库里面相关推荐

最新文章

热门文章

微信小程序+云开发 实现表单数据提交到云开发的数据库里面

微信小程序+云开发 实现表单数据提交到云开发的数据库里面相关推荐

最新文章

热门文章

微信小程序+云开发实现表单数据提交到云开发的数据库里面

微信小程序+云开发实现表单数据提交到云开发的数据库里面相关推荐