900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 微信小程序云开发form表单数据库

微信小程序云开发form表单数据库

时间:2023-07-16 05:48:54

相关推荐

微信小程序云开发form表单数据库

js代码回调数据库,使用的默认数据库,云开发中的;

如果需要指定数据库,需要在app.js文件中指定环境env:"xxx";

const db = wx.cloud.database()Page({/*** 页面的初始数据*/data: {},//点击提交表单内容至数据库btnSub(res) {console.log(res);// var name = res.detail.value.name;// var sex = res.detail.value.sex;// var phone = res.detail.value.phone;// var context = res.detail.value.context;var {name,sex,phone,context} = res.detail.value;// 回调的value是个对象,可直接引用var value = res.detail.value;console.log(name, sex, phone, context);db.collection("demolist").add({data: value}).then(res => {console.log(res);})},

.ml代码

<view class="view-page"><view class="test">测试云开发提交表单页面</view><!-- 表单页面 --><view class="view-form"><form action="" class="form" bindsubmit="btnSub"><view class="view-son"><text> 姓名</text><input name="name" type="text" /></view class="view-son"><view>性别<input name="sex" type="text" /></view><view class="view-son">手机号<input name="phone" type="number" /></view><view class="view-son">内容<textarea name="context"></textarea></view><button type="primary" form-type="submit">提交</button><button type="warn" form-type="reset">重置</button></form></view></view>

.ss代码

/* 总表单外部框架 */.view-page {background-color: #FFA500;}.view-form {width: 80%;margin: 0 auto;}.view-page .view-form .view-son {background-color: white;}form input,textarea {border: 1rpx solid #eee;width: 100%;}.test {text-align: center;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。