1.小程序目录图
js文件是逻辑控制,主要是它发送请求和接收数据,json用于此页面局部配置并且覆盖全局app.json配置,wxss用于页面的样式设置,wxml就是页面,相当于html2.Wxml文件代码
formbindsubmit="formSubmit"bindreset="formReset"
viewview姓名/viewinputname="xingming"placeholder="请输入姓名"//viewviewview性别/viewradio-groupname="xingbie"labelradiovalue="男"/男/labellabelradiovalue="女"/女/label/radio-group/viewviewview爱好/viewcheckbox-groupname="aihao"labelcheckboxvalue="旅游"/旅游/labellabelcheckboxvalue="看书"/看书/labellabelcheckboxvalue="电动"/电动/labellabelcheckboxvalue="篮球"/篮球/label/checkbox-group/viewviewbuttonformType="submit"提交/buttonbuttonformType="reset"重置/button/view/form
重点
A.Form表单,需要绑定一个submit事件,在小程序中,属性为bindsubmit,
bindsubmit=”formSubmit”这里的属性值formSubmit,命名可以为符合规范的任意值,相当于以前html中的οnsubmit=”formSubmit()”,是一个函数名,当提交的时候触发formSubmit这个函数事件,这个函数写在js中。
B.其他的属性和之前的HTML差不多,注意的是,表单一定要有name=“value”,后端处理和以前一样,比如name=”username”PHP可以用$_POST[‘username']来接收。
C.由于小程序没有inputsubmit这个按钮,所以在每个form表单中都要有一个提交按钮,
buttonformType="submit"提交/button,这个按钮就是用来开启提交事件的。
3.js代码
//index.js//获取应用实例constapp=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)}elseif(e.detail.value.xingbie.length==0){wx.showToast({title:'性别不能为空!',icon:'loading',duration:1500})setTimeout(function(){wx.hideToast()},2000)}elseif(e.detail.value.aihao.length==0){wx.showToast({title:'爱好不能为空!',icon:'loading',duration:1500})setTimeout(function(){wx.hideToast()},2000)}else{wx.request({url:'接口路径',header:{"Content-Type":"application/x-www-form-urlencoded"},method:"POST",data:{xingming:e.detail.value.xingming,xingbie:e.detail.value.xingbie,aihao:e.detail.value.aihao},success:function(res){console.log(res.data);if(res.data.status==0){wx.showToast({title:'提交失败!!!',icon:'loading',duration:1500})}else{wx.showToast({title:'提交成功!!!',//这里打印出登录成功icon:'success',duration:1000})}}})}},})js中需要注意的是
Page()这个方法是必须有的,里面放置js对象,用于页面加载的时候,呈现效果
data:{},数据对象,设置页面中的数据,前端可以通过读取这个对象里面的数据来显示出来。
formSubmit:function小程序中方法都是方法名:function(),其中function可以传入一个参数,作为触发当前时间
(这里的e,就是当前触发事件的对象,类似于htmlοnclick=“foo(this)”this对象,小程序封装了许多内置的调用方法,
e.detail.value.xingming就是当前对象name=”xingming”的对象的值,e.detail.value.xingming.length就是这
个值的长度showToast类似于JS中的alert,弹出框,title是弹出框的显示的信息,icon是弹出框的图标状态,目前
只有loading和success这两个状态。duration是弹出框在屏幕上显示的时间。)
重点来了
wx.request({url:'接口路径',header:{"Content-Type":"application/x-www-form-urlencoded"},method:"POST",data:{xingming:e.detail.value.xingming,xingbie:e.detail.value.xingbie,aihao:e.detail.value.aihao},success:function(res){console.log(res.data);if(res.data.status==0){wx.showToast({title:'提交失败!!!',icon:'loading',duration:1500})}else{wx.showToast({title:'提交成功!!!',//这里打印出登录成功icon:'success',duration:1000})}}
wx.request({})是小程序发起https请求,注意http是不行的。
wx.request({})是小程序发起https请求,注意http是不行的。
这里
A.url是你请求的网址,比如以前在前端,POST表单中action=‘index.php',这里的index.php是相对路径,而小程序
请求的网址必须是网络绝对路径。比如:https://www.xxxxxcom/wx/form.php
B.
header:{"Content-Type":"application/x-www-form-urlencoded"},由于POST和GET传送数据的方式不一样,POST的header必须是
"Content-Type":"application/x-www-form-urlencoded"GET的header可以是'Accept':'application/json'
C.一定要写明method:“POST”默认是“GET”,保持大写
data:{xingming:e.detail.value.xingming,xingbie:e.detail.value.xingbie,aihao:e.detail.value.aihao},这里的data就是POST给服务器端的数据以{name:value}的形式传送
D.成功回调函数
success:function(res){//console.log(res.data);if(res.data.status==0){
wx.showToast({
title:'提交失败!!!',
icon:'loading',
duration:1500
})
}else{
wx.showToast({
title:'提交成功!!!',
icon:'success',
duration:1000
})
}
}E.success:function()是请求状态成功触发是事件,也就是200的时候,注意,请求成功不是操作成功,请求只是这个
程序到服务器端这条线的通的。
F.if(res.data.status==0){
wx.showToast({
title:'提交失败!!!',
icon:'loading',
duration:1500
})
}
加一条,单独写的事件也是也可的。具体问题具体对待
saveEvaluate:function(e){letthat=this;letanswerPaths=this.data.listData.studentQuestionList[this.data.m].answerPaths;letstudentId=this.data.listData.studentQuestionList[this.data.m].studentId;request.post({url:接口名称,data:{photoId:this.data.detail.homeworkId,userId:studentId,photoRemark:e.detail.value.photoRemark,photoScore:e.detail.value.photoScore,answerPaths:answerPaths,access_token:app.getToken()}}).then(res={if(res.data.code==200){that.setData({studentList:that.data.studentList,completeStudentList:that.data.completeStudentList})//刷新弹框页面数据wx.navigateTo({url:'/pages/xxx/xxx/xxx',})}})}
学习链接:
最新资讯
-

小程序制作平台选型踩坑记录:2026年五大主流方案横向对比
2026 年微信小程序月活达 10.7 亿、覆盖 108 个行业,本次横向对比即速应用、乔拓云、凡科、有赞、微盟五大主流平台,分三阶段给出选型结论,核心聚焦成本、扩展性、运营能力三大维度。 -

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。










