小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSON的形式返回给小程序。
下面举例将个人信息提交表单到数据库实例
先来看看目录结构图
·js文件是逻辑控制,主要是它发送请求和接收数据,
·json 用于此页面局部 配置并且覆盖全局app.json配置,
·wxss用于页面的样式设置,
·wxml就是页面,相当于html
样式和json文件暂时不管了,回顾一下form表单的提交
wxml文件代码:
姓名
性别
男
女
爱好
旅游
看书
电动
篮球
提交
重置
其中几个关键点需要理解:
A.Form表单,需要绑定一个submit事件,在小程序中,属性为bindsubmit,
bindsubmit=”formSubmit”这里的属性值formSubmit,命名可以为符合规范的任意值,相当于以前html中的 οnsubmit=”formSubmit()”,是一个函数名,当提交的时候触发formSubmit这个函数事件,这个函数写在js中。
B.其他的属性和之前的HTML差不多,注意的是,表单一定要有name=“value”,后端处理和以前一样,比如name=”username” PHP可以用 $_POST[‘username']来接收。
C.由于小程序没有input submit这个按钮,所以在每个form表单中都要有一个提交按钮,
提交,这个按钮就是用来开启提交事件的。
index.js代码://index.js
//获取应用实例
const app = getApp()
Page({
data: {
},
formSubmit: function (e) {
//console.log(e.detail.value);
if (e.detail.value.xingming.length == 0 || e.detail.value.xingming.length >= 8) {
wx.showToast({
title: '姓名不能为空或过长!',
icon: 'loading',
duration: 1500
})
setTimeout(function () {
wx.hideToast()
}, 2000)
} else if (e.detail.value.xingbie.length == 0) {
wx.showToast({<