微信小程序 PHP后端form表单提交实例详解 - 陈达辉 - 博客园
键盘上的生活
posts - 370, comments - 28, trackbacks - 4, articles - 5
微信小程序后端form表单
1.小程序相对于之前的WEB+PHP建站来说，个人理解为只是将web放到了微信端，用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取，服务器端可以用任何后端语言写，但是所有的数据都要以JSON的形式返回给小程序。
2.昨天写了登录注册、忘记密码功能，他们实质上都是一个表单提交操作。因此就拿注册功能来写这个例子。
js文件是逻辑控制，主要是它发送请求和接收数据，json 用于此页面局部 配置并且覆盖全局app.json配置，wxss用于页面的样式设置，wxml就是页面，相当于html
4.样式和json文件暂时不管了，我只是想回顾一下form表单的提交
5.Wxml文件代码
&view class="load-head"&
&image src="../../images/return.png" /&
&view class="login"&
&form bindsubmit="formSubmit"&
&view class="field clearfix"&
&label for="name"&&image src="../../images/phone.png" /&&/label&
&input id="name" name="mobile" class="login-input" type="text" placeholder="请输入手机号" /&
&view class="field clearfix"&
&label for="password"&&image src="../../images/code.png" /&&/label&
&input id="password" class="login-input" type="password" placeholder="请输入验证码" /&
&button class="get-code" hover-class="code-hover"&获取验证码&/button&
&view class="field clearfix"&
&label for="password"&&image src="../../images/password.png" /&&/label&
&input id="password" name="password" class="login-input" type="password" placeholder="请设置6-20位登录密码" /&
&view class="field clearfix"&
&label for="repassword"&&image src="../../images/password.png" /&&/label&
&input id="repassword" name="repassword" class="login-input" type="password" placeholder="请输入确认密码" /&
&button class="btn_login" formType="submit"&注册&/button&
&view class="reg_forget clearfix"&
&navigator url="../login/index" class="btn_reg"&登录&/navigator&
&navigator url="../forget/index" class="btn_forget"&忘记密码&/navigator&
&6.其中几个关键点需要理解
a.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,
bindsubmit=&formSubmit&&& 这里的属性值formSubmit，命名可以为符合规范的任意值，相当于以前html中的& onsubmit=&formSubmit()&,是一个函数名，当提交的时候触发formSubmit这个函数事件，这个函数写在js中。
b.其他的属性和之前的HTML差不多，注意的是，表单一定要有name=&value&，后端处理和以前一样，比如name=&username& PHP可以用 $_POST[&username']来接收。
C.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，
&button formType="submit"&注册&/button&，这个按钮就是用来开启提交事件的。
7.index.js代码
formSubmit: function(e) {
if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){
wx.showToast({
title: '手机号码或密码不得为空!',
icon: 'loading',
duration: 1500
setTimeout(function(){
wx.hideToast()
}else if(e.detail.value.mobile.length != 11){
wx.showToast({
title: '请输入11位手机号码!',
icon: 'loading',
duration: 1500
setTimeout(function(){
wx.hideToast()
}else if(e.detail.value.password.length &6 ||e.detail.value.password.length&20){
wx.showToast({
title: '请输入6-20密码!',
icon: 'loading',
duration: 1500
setTimeout(function(){
wx.hideToast()
}else if(e.detail.value.password != e.detail.value.repassword){
wx.showToast({
title: '两次密码输入不一致!',
icon: 'loading',
duration: 1500
setTimeout(function(){
wx.hideToast()
wx.request({
url: 'https://shop.yunapply.com/home/Login/register',
"Content-Type": "application/x-www-form-urlencoded"
method: "POST",
data:{mobile:e.detail.value.mobile,password:e.detail.value.password},
success: function(res) {
if(res.data.status == 0){
wx.showToast({
title: res.data.info,
icon: 'loading',
duration: 1500
wx.showToast({
title: res.data.info,//这里打印出登录成功
icon: 'success',
duration: 1000
8.需要注意的是
Page()这个方法是必须有的，里面放置js对象，用于页面加载的时候，呈现效果
data: {},数据对象，设置页面中的数据，前端可以通过读取这个对象里面的数据来显示出来。
formSubmit: function& 小程序中方法都是 方法名:function()，其中function可以传入一个参数，作为触发当前时间的对象
下面是函数的执行，由于验证太多，我只拿一部分出来理解。
if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){
wx.showToast({
title: '手机号码或密码不得为空!',
icon: 'loading',
duration: 1500
这里的e，就是当前触发事件的对象，类似于html onclick=&foo(this)&this对象，小程序封装了许多内置的调用方法，e.detail.value.mobile 就是当前对象name=&mobile&的对象的值e.detail.value.mobile.length就是这个值的长度
&showToast类似于JS中的alert，弹出框，title& 是弹出框的显示的信息，icon是弹出框的图标状态，目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。&
9.重点来了
wx.request({
url: 'https://shop.com/home/Login/register',
"Content-Type": "application/x-www-form-urlencoded"
method: "POST",
data:{mobile:e.detail.value.mobile,password:e.detail.value.password},
success: function(res) {
if(res.data.status == 0){
wx.showToast({
title: res.data.info,
icon: 'loading',
duration: 1500
wx.showToast({
title: res.data.info,//这里打印出登录成功
icon: 'success',
duration: 1000
fail:function(){
wx.showToast({
title: '服务器网络错误!',
icon: 'loading',
duration: 1500
wx.request({})是小程序发起https请求，注意http是不行的。
a.url是你请求的网址，比如以前在前端，POST表单中action=&index.php'，这里的index.php是相对路径，而小程序请求的网址必须是网络绝对路径。
比如：https://shop.com/home/Login/register
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:{mobile:e.detail.value.mobile,password:e.detail.value.password},
这里的data就是POST给服务器端的数据 以{name:value}的形式传送
d.成功回调函数
success: function(res) {
if(res.data.status == 0){
wx.showToast({
title: res.data.info,
icon: 'loading',
duration: 1500
wx.showToast({
title: res.data.info,
icon: 'success',
duration: 1000
e.success:function()是请求状态成功触发是事件，也就是200的时候，注意，请求成功不是操作成功，请求只是这个程序到服务器端这条线的通的。
fail:function()就是网络请求不成功，触发的事件。f.&
if(res.data.status == 0){
wx.showToast({
title: res.data.info,
icon: 'loading',
duration: 1500
wx.showToast({
title: res.data.info,//这里打印出登录成功
icon: 'success',
duration: 1000
这里的一段代码是和PHP后端程序有关系的，具体流程是这样的，
1.POST通过数据到https://shop.com/home/Login/register这个接口，用过THINKPHP的就会知道是HOME模块下的Login控制下的register方法
2.register方法根据POST过来的数据，结合数据库进行二次验证，如果操作成功，返回什么，如果操作失败，返回什么
3.后端PHP代码如下：
控制器 LoginController.class.php
* 用户注册
public function register()
if (IS_POST) {
$User = D("User");
if (!$User-&create($_POST, 4)) {
$this-&error($User-&getError(),'',true);
if ($User-&register()){
$this-&success('注册成功!','',true);
$this-&error('注册失败!','',true);
UserModel.class.php& 的register方法
public function register()
$mobile = I('post.mobile');
$password = I('post.password');
$res = D('User')-&add(array(
'mobile'=& $mobile,
'password'=&md5($password),
'modifytime'=&date("Y-m-d H:i:s")
return $res;开发文档首页在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
数据是一段html代码，类似这样
&p&内容&/p&
放到&text&{{data}}&/text&里面直接按照原格式输出了...该怎么插入到页面DOM中去（类似innerHtml这种）？
还有,,,页面之间怎么传数据，一种是写入url里面，但是数据量比较大的情况怎么搞？还发现一个问题，如果把值传到url里面，数据脸面有&a href=""&或者&img src=""&之类的标签的话就会传不过去，这怎么弄啊？
还有,,,有些图片显示不出来是什么情况，比如&image src="https://pic2.zhimg.com/3b39d454faac01b163329_r.jpg"&&/image&图片有的能显示，有的就不行。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
目测不能打开外部链接。
页面间传数据，可以使用 Storage，有官方接口的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这是我写的一个组件
wxParse 0.2发布
wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析
github地址:
支持html和markdown的插入和解析
目前是alpha0.1版本，你可以尝试使用下 欢迎指正错误
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。今天利用php写一个直播答题的微信小程序，让用户在指定时间内进入直播
2018年刚开年，互联网就刮来一股妖风，突然间雷军曾经津津乐道的风口就起来了，一大波的互联网企业都在做手机答题系统。当我们还沉浸在元旦的欢乐气氛里，伴随着王思聪的一篇微博，这2018年的第一个风口正式形成！他的这篇微博是这样写道，我们从新浪微博里截图的，他说每天10万元，每天都要发奖金，还自豪的说，我，我乐意！广大吃瓜群众还没过完元旦小长假呢，纷纷就下载他的APP冲顶大会，开始直播答题瓜分他每晚9点的10万元现金红包了。
为此开发一套直播答题微信小程序（微/电【
妖午巴妖戚二戚酒戚酒戚】）活动要求，只有当直播时间内才允许进入，如果活动没有开始或者已经结束了，那么就不允许进入，如下代码：
判断如果当前时间小程序开始时间，那么就“答题直播活动还没开始”，如果当前时间超过了活动结束时间，那么就“答题直播活动已结束”；这样，只有在活动时间内的人才可以进入，如果有一个条件没有达到，那么就会被结束进程；
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。如何把做好的html网页程序，放在微信小程序里_百度知道
如何把做好的html网页程序，放在微信小程序里
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
yinzhen216
来自知道合伙人认证团队
yinzhen216
采纳数：888
获赞数：3257
擅长：暂未定制
这个就是程序的基本架构。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。底部标签底部标签是一个tabBar。实现比较简单，只需要简单配置一下即可。 app.json{&pages&:[&pages/function/function&,&pages/pay/pay&,&pages/account/account&,&pages/index/index&,&pages/logs/logs&],&tabBar&:{&color&: &#464a56&,&selectedColor&: &#6595e9&,&backgroundColor&: &#FFFFFF&,&borderStyle&: &white&,&list&: [{&pagePath&: &pages/function/function&,&text&: &功能&,&iconPath&: &images/tab_function_default.png&,&selectedIconPath&: &images/tab_function_sel.png&},{&pagePath&: &pages/pay/pay&,&text&: &收款&,&iconPath&: &images/tab_consume_default.png&,&selectedIconPath&: &images/tab_consume_sel.png&},{&pagePath&: &pages/account/account&,&text&: &账户&,&iconPath&: &images/tab_account_default.png&,&selectedIconPath&: &images/tab_account_sel.png&}]},&window&:{&navigationBarBackgroundColor&: &#6595e9&,&navigationBarTextStyle&:&white&,&navigationBarTitleText&: &V50&,&backgroundColor&: &#eeeeee&,&backgroundTextStyle&:&light&}}2.值得注意的地方，就是 pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径.json, .js , .wxml, .wxss的四个文件进行整合。3.页面标题这个标题如何实现？&4.我们只需要把所有页面通用的配置放在 page.json，然后在各个page的 .json文件里面配置每个页面特有的属性即可。因为在上面的 app.json 中已经配置了通用页面的 window属性了，我们只需要在function.json中配置页面标题即可{&navigationBarTitleText&: &功能& &}5.轮播图接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。&swiper indicator-dots=&{{indicatorDots}}&autoplay=&{{autoplay}}& interval=&{{interval}}& duration=&{{duration}}&&&block wx:for=&{{imgUrls}}&&&swiper-item&&image src=&{{item}}& class=&slide-image& /&&/swiper-item&&/block&&/swiper&function.js//function.jsPage({data: {indicatorDots: true,autoplay: true,interval: 5000,duration: 1000,imgUrls: [',','],&},})方法2但很多人不知道的是，其实微信小程序是可以借助一款简单实用的制作工具「即速应用」生成的。整个过程无需编程无需代码，通过简单的拖拽组件即可生成微信小程序，非常方便。下面分享一下微信小程序开发教程入门篇，让新手们迅速掌握微信小程序开发的基本方法。2.登录即速应用官网，点击上方首页菜单的“立即制作”，即可开始进行制作。选择“空白模板”，进行自由创作。如果想节省时间，也可以选择主题模板进行快速制作。3.进入制作界面后，可以看到页面分组和页面属性。点击“组件库”，开始搭建页面。4.根据自己的需求选择组件以搭建页面，每个组件的文案和图片都是可以自己编辑的。5.即速应用有很多可供选用的组件。比如用于布局的双栏组件、面板组件、顶部导航组件和底部导航组件。还有一些可以实现更多复杂功能的高级组件，比如动态列表组件、动态容器组件、自定义表单组件、个人中心组件。6.把每个页面都编辑好，并做好页面之间的跳转，确保逻辑无误。全部做好之后，点击右上角的“保存”，然后点击“发布”。若是制作过程中想要找回之前的版本，只需要去历史记录中回复既可。7.跳转页面后，再次点击“发布”，即可生成。8.点击“小程序打包”，生成小程序的代码。打包下载之后，就可以直接上传到微信官方后台的开发者工具里，即可完美对接小程序。技术人员还可以根据自己的需求修改，在原有代码的基础上进行二次开发。
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}