![wxapp.jpg][1]
1.小程序相对于之前的WEB+PHP建站来说，个人理解为只是将web放到了微信端，用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取，服务器端可以用任何后端语言写，但是所有的数据都要以JSON的形式返回给小程序。
2.就拿个人信息提交表单来写这简单的例子。
3.目录图
![20180619100205409.png][2]
3.1、js文件是逻辑控制，主要是它发送请求和接收数据，
3.2、json 用于此页面局部 配置并且覆盖全局app.json配置，
3.3、wxss用于页面的样式设置，
3.4、wxml就是页面，相当于html
4.样式和json文件暂时不管了，回顾一下form表单的提交
5.Wxml文件代码
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section">
<view class="section__title">姓名</view>
<input name="xingming" placeholder="请输入姓名" />
</view>
<view class="section section_gap">
<view class="section__title">性别</view>
<radio-group name="xingbie">
<label><radio value="男"/>男</label>
<label><radio value="女"/>女</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">爱好</view>
<checkbox-group name="aihao">
<label><checkbox value="旅游"/>旅游</label>
<label><checkbox value="看书"/>看书</label>
<label><checkbox value="电动"/>电动</label>
<label><checkbox value="篮球"/>篮球</label>
</checkbox-group>
</view>
<view class="btn-area">
<button formType="submit">提交</button>
<button formType="reset">重置</button>
</view>
</form>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表单中都要有一个提交按钮，
，这个按钮就是用来开启提交事件的。 7.index.js代码 ```javascript //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({ title: '性别不能为空!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.aihao.length == 0) { wx.showToast({ title: '爱好不能为空!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else { wx.request({ url: 'https://www.xxxxx.com/wx/form.php', 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 }) } } }) } }, }) ``` 8.需要注意的是 Page()这个方法是必须有的，里面放置js对象，用于页面加载的时候，呈现效果 data: {},数据对象，设置页面中的数据，前端可以通过读取这个对象里面的数据来显示出来。 formSubmit: function 小程序中方法都是 方法名:function()，其中function可以传入一个参数，作为触发当前时间 的对象下面是函数的执行，由于验证太多，我只拿一部分出来理解。 ```javascript 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) } ``` 这里的e，就是当前触发事件的对象，类似于html onclick=“foo(this)”this对象，小程序封装了许多内置的调用方法， e.detail.value.xingming就是当前对象name=”xingming”的对象的值, e.detail.value.xingming.length就是这 个值的长度 showToast类似于JS中的alert，弹出框，title 是弹出框的显示的信息，icon是弹出框的图标状态，目前 只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。 9.重点来了 ```javascript wx.request({ url: 'https://www.xxxxx.com/wx/form.php', 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是不行的。 这里 A.url是你请求的网址，比如以前在前端，POST表单中action=‘index.php'，这里的index.php是相对路径，而小程序 请求的网址必须是网络绝对路径。比如：https://www.xxxxxcom/wx/form.php B. ```html header: { "Content-Type": "application/x-www-form-urlencoded" }, ``` 由于POST和GET传送数据的方式不一样，POST的header必须是 ```html "Content-Type": "application/x-www-form-urlencoded" ``` GET的header可以是 'Accept': 'application/json' C.一定要写明method：“POST” 默认是“GET”，保持大写 ```json data:{xingming:e.detail.value.xingming,xingbie:e.detail.value.xingbie,aihao:e.detail.value.aihao}, ``` 这里的data就是POST给服务器端的数据 以{name:value}的形式传送 D.成功回调函数 ```javascript 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. ```javascript if (res.data.status == 0) { wx.showToast({ title: '提交失败！！！', icon: 'loading', duration: 1500 }) } ``` 数据库表如下： ```sql CREATE TABLE `person` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `xingming` VARCHAR(50) NOT NULL, `xingbie` VARCHAR(50) NOT NULL, `aihao` VARCHAR(50) NOT NULL, PRIMARY KEY (`id`) ) COLLATE='latin1_swedish_ci' ENGINE=MyISAM ; ``` ![mysql.png][3] form.php代码： ```php| id | 名字 | 性别 | 爱好 | {$id} | {$xingming} | {$xingbie} | {$aihao} | "; } //释放结果集 mysqli_free_result($result1); mysqli_close($con); ?>
|---|
