微信小程序php后端form表单

<p>微信小程序php后端form表单</p><p>1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSON的形式返回给小程序。</p><p>2.昨天写了登录注册、忘记密码功能,他们实质上都是一个表单提交操作。因此就拿注册功能来写这个例子。</p><p>3.目录图</p><p>js文件是逻辑控制,主要是它发送请求和接收数据,</p><p>json 用于此页面局部 配置并且覆盖全局app.json配置,</p><p>wxss用于页面的样式设置,</p><p>wxml就是页面,相当于html</p><p>4.样式和json文件暂时不管了,我只是想回顾一下form表单的提交</p><p>5.Wxml文件代码</p><pre class="brush:xml;toolbar:false">&lt;viewclass=&quot;load-head&quot;&gt; &lt;imagesrc=&quot;../../images/return.png&quot;/&gt; 注册 &lt;/view&gt; &lt;viewclass=&quot;login&quot;&gt; &lt;formbindsubmit=&quot;formSubmit&quot;&gt; &lt;viewclass=&quot;fieldclearfix&quot;&gt; &lt;labelfor=&quot;name&quot;&gt;&lt;imagesrc=&quot;../../images/phone.png&quot;/&gt;&lt;/label&gt; &lt;inputid=&quot;name&quot;name=&quot;mobile&quot;class=&quot;login-input&quot;type=&quot;text&quot;placeholder=&quot;请输入手机号&quot;/&gt; &lt;/view&gt; &lt;viewclass=&quot;fieldclearfix&quot;&gt; &lt;labelfor=&quot;password&quot;&gt;&lt;imagesrc=&quot;../../images/code.png&quot;/&gt;&lt;/label&gt; &lt;inputid=&quot;password&quot;class=&quot;login-input&quot;type=&quot;password&quot;placeholder=&quot;请输入验证码&quot;/&gt; &lt;buttonclass=&quot;get-code&quot;hover-class=&quot;code-hover&quot;&gt;获取验证码&lt;/button&gt; &lt;/view&gt; &lt;viewclass=&quot;fieldclearfix&quot;&gt; &lt;labelfor=&quot;password&quot;&gt;&lt;imagesrc=&quot;../../images/password.png&quot;/&gt;&lt;/label&gt; &lt;inputid=&quot;password&quot;name=&quot;password&quot;class=&quot;login-input&quot;type=&quot;password&quot;placeholder=&quot;请设置6-20位登录密码&quot;/&gt; &lt;/view&gt; &lt;viewclass=&quot;fieldclearfix&quot;&gt; &lt;labelfor=&quot;repassword&quot;&gt;&lt;imagesrc=&quot;../../images/password.png&quot;/&gt;&lt;/label&gt; &lt;inputid=&quot;repassword&quot;name=&quot;repassword&quot;class=&quot;login-input&quot;type=&quot;password&quot;placeholder=&quot;请输入确认密码&quot;/&gt; &lt;/view&gt; &lt;buttonclass=&quot;btn_login&quot;formType=&quot;submit&quot;&gt;注册&lt;/button&gt; &lt;/form&gt; &lt;viewclass=&quot;reg_forgetclearfix&quot;&gt; &lt;navigatorurl=&quot;../login/index&quot;class=&quot;btn_reg&quot;&gt;登录&lt;/navigator&gt; &lt;navigatorurl=&quot;../forget/index&quot;class=&quot;btn_forget&quot;&gt;忘记密码&lt;/navigator&gt; &lt;/view&gt; &lt;/view&gt;</pre><p>6.其中几个关键点需要理解</p><p>a.Form表单,需要绑定一个submit事件,在小程序中,属性为bindsubmit,</p><p>bindsubmit=”formSubmit” 这里的属性值formSubmit,命名可以为符合规范的任意值,相当于以前html中的 onsubmit=”formSubmit()”,是一个函数名,当提交的时候触发formSubmit这个函数事件,这个函数写在js中。</p><p>b.其他的属性和之前的HTML差不多,注意的是,表单一定要有name=“value”,后端处理和以前一样,比如name=”username” PHP可以用 $_POST[‘username&#39;]来接收。</p><p>C.由于小程序没有input submit这个按钮,所以在每个form表单中都要有一个提交按钮,</p><p>&lt;button formType=&quot;submit&quot;&gt;注册&lt;/button&gt;,这个按钮就是用来开启提交事件的。</p><p>7.index.js代码</p><pre class="brush:js;toolbar:false">Page({ data:{ }, formSubmit:function(e){ if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){ wx.showToast({ title:&#39;手机号码或密码不得为空!&#39;, icon:&#39;loading&#39;, duration:1500 }) setTimeout(function(){ wx.hideToast() },2000) }elseif(e.detail.value.mobile.length!=11){ wx.showToast({ title:&#39;请输入11位手机号码!&#39;, icon:&#39;loading&#39;, duration:1500 }) setTimeout(function(){ wx.hideToast() },2000) }elseif(e.detail.value.password.length&lt;6||e.detail.value.password.length&gt;20){ wx.showToast({ title:&#39;请输入6-20密码!&#39;, icon:&#39;loading&#39;, duration:1500 }) setTimeout(function(){ wx.hideToast() },2000) }elseif(e.detail.value.password!=e.detail.value.repassword){ wx.showToast({ title:&#39;两次密码输入不一致!&#39;, icon:&#39;loading&#39;, duration:1500 }) setTimeout(function(){ wx.hideToast() },2000) }else{ wx.request({ url:&#39;https://shop.yunapply.com/home/Login/register&#39;, header:{ &quot;Content-Type&quot;:&quot;application/x-www-form-urlencoded&quot; }, method:&quot;POST&quot;, 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:&#39;loading&#39;, duration:1500 }) }else{ wx.showToast({ title:res.data.info,//这里打印出登录成功 icon:&#39;success&#39;, duration:1000 }) } } }) } }, })</pre><p>8.需要注意的是</p><p>Page()这个方法是必须有的,里面放置js对象,用于页面加载的时候,呈现效果</p><p>data: {},数据对象,设置页面中的数据,前端可以通过读取这个对象里面的数据来显示出来。</p><p>formSubmit: function 小程序中方法都是 方法名:function(),其中function可以传入一个参数,作为触发当前时间的对象</p><p>下面是函数的执行,由于验证太多,我只拿一部分出来理解。</p><pre class="brush:js;toolbar:false">if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){ wx.showToast({ title:&#39;手机号码或密码不得为空!&#39;, icon:&#39;loading&#39;, duration:1500 })</pre><p>这里的e,就是当前触发事件的对象,类似于html onclick=“foo(this)”this对象,小程序封装了许多内置的调用方法,e.detail.value.mobile 就是当前对象name=”mobile”的对象的值e.detail.value.mobile.length就是这个值的长度</p><p>showToast类似于JS中的alert,弹出框,title 是弹出框的显示的信息,icon是弹出框的图标状态,目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。</p><p>9.重点来了</p><pre class="brush:js;toolbar:false">wx.request({ url:&#39;https://shop.com/home/Login/register&#39;, header:{ &quot;Content-Type&quot;:&quot;application/x-www-form-urlencoded&quot; }, method:&quot;POST&quot;, 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:&#39;loading&#39;, duration:1500 }) }else{ wx.showToast({ title:res.data.info,//这里打印出登录成功 icon:&#39;success&#39;, duration:1000 }) } }, fail:function(){ wx.showToast({ title:&#39;服务器网络错误!&#39;, icon:&#39;loading&#39;, duration:1500 }) } })</pre><p>wx.request({})是小程序发起https请求,注意http是不行的。</p><p>这里</p><p>a.url是你请求的网址,比如以前在前端,POST表单中action=‘index.php&#39;,这里的index.php是相对路径,而小程序请求的网址必须是网络绝对路径。</p><p>比如:https://shop.com/home/Login/register</p><p>b.</p><p>header: {</p><p>&quot;Content-Type&quot;: &quot;application/x-www-form-urlencoded&quot;</p><p>},</p><p>由于POST和GET传送数据的方式不一样,POST的header必须是</p><p>&quot;Content-Type&quot;: &quot;application/x-www-form-urlencoded&quot;</p><p>GET的header可以是 &#39;Accept&#39;: &#39;application/json&#39;</p><p>c.一定要写明method:“POST” 默认是“GET”,保持大写</p><p>data:{mobile:e.detail.value.mobile,password:e.detail.value.password},</p><p>这里的data就是POST给服务器端的数据 以{name:value}的形式传送</p><p>d.成功回调函数</p><pre class="brush:js;toolbar:false">success:function(res){ if(res.data.status==0){ wx.showToast({ title:res.data.info, icon:&#39;loading&#39;, duration:1500 }) }else{ wx.showToast({ title:res.data.info, icon:&#39;success&#39;, duration:1000 }) } }</pre><p>e.success:function()是请求状态成功触发是事件,也就是200的时候,注意,请求成功不是操作成功,请求只是这个程序到服务器端这条线的通的。</p><p>fail:function()就是网络请求不成功,触发的事件。</p><pre class="brush:js;toolbar:false">f. if(res.data.status==0){ wx.showToast({ title:res.data.info, icon:&#39;loading&#39;, duration:1500 }) }else{ wx.showToast({ title:res.data.info,//这里打印出登录成功 icon:&#39;success&#39;, duration:1000 }) }</pre><p>这里的一段代码是和PHP后端程序有关系的,具体流程是这样的,</p><p>1.POST通过数据到https://shop.com/home/Login/register这个接口,用过THINKPHP的就会知道是HOME模块下的Login控制下的register方法</p><p>2.register方法根据POST过来的数据,结合数据库进行二次验证,如果操作成功,返回什么,如果操作失败,返回什么</p><p>3.后端PHP代码如下:</p><p>控制器 LoginController.class.php</p><p>/**</p><p>* 用户注册</p><p>*/</p><pre class="brush:php;toolbar:false">publicfunctionregister() { if(IS_POST){ $User=D(&quot;User&quot;); if(!$User-&gt;create($_POST,4)){ $this-&gt;error($User-&gt;getError(),&#39;&#39;,true); }else{ if($User-&gt;register()){ $this-&gt;success(&#39;注册成功!&#39;,&#39;&#39;,true); }else{ $this-&gt;error(&#39;注册失败!&#39;,&#39;&#39;,true); } } } }</pre><p>模型</p><p>UserModel.class.php 的register方法</p><pre class="brush:php;toolbar:false">publicfunctionregister() { $mobile=I(&#39;post.mobile&#39;); $password=I(&#39;post.password&#39;); $res=D(&#39;User&#39;)-&gt;add(array( &#39;mobile&#39;=&gt;$mobile, &#39;password&#39;=&gt;md5($password), &#39;modifytime&#39;=&gt;date(&quot;Y-m-dH:i:s&quot;) )); return$res; }</pre>
RangeTime:0.006903s
RangeMem:215.55 KB
返回顶部 留言