微信小程序 增、删、改、查操作实例详解
1.以收货地址的增删改查为例
2.文件目录
js文件是逻辑控制，主要是它发送请求和接收数据，
json 用于此页面局部 配置并且覆盖全局app.json配置，
wxss用于页面的样式设置，
wxml就是页面，相当于html
<form bindsubmit="addSubmit"> <view> <text>收货人信息</text> <view> <view> <text>姓名</text> <input type="number" maxlength="11" placeholder="请输入收货人姓名" /> </view> <view> <text>电话</text> <input type="number" maxlength="11" placeholder="请输入手机号" /> </view> <view> <text>地址</text> <input type="text" maxlength="11" placeholder="请输入地址" /> </view> </view> </view> <view> <text>送货时间</text> <picker mode="date"></picker> </view> <view> <view>收货地址信息</view> <view wx:for="{{addressInfo}}" wx:key="unique"> <view> <image src=""></image> <view> <view><text>收货地址{{item.address}}</text><text>1km</text></view> <view>收货人{{item.name}}</view> <view>收货人电话{{item.mobile}}</view> <view data-deleteid="{{item.id}}" bindtap="deleteClick">删除</view> <view data-editid="{{item.id}}" bindtap="editClick">编辑</view> </view> </view> </view> </view> <view> <button formType="submit">保存</button> </view> </form>
前端页面主要展示一个表单和已有收货人信息
1.其中几个关键点需要理解
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>，这个按钮就是用来开启提交事件的。
至于循环，拆开解
d.小程序给我们一个封装好的方法onLoad: function()，当页面加载的时候，调用这个方法。
var app = getApp() Page({ data:{}, onLoad: function() { var that = this; //收货地址首页 wx.request({ //缺少用户唯一标识，现在的在服务器的控制器里有一个假id = 2 url: 'https://shop.yunapply.com/home/shipping/index', method: 'GET', data: {}, header: { 'Accept': 'application/json' }, success: function(res) { that.setData({ "addressInfo": res.data.info, }) console.log(res.data.info); }, fail:function(){ wx.showToast({ title: '服务器网络错误!', icon: 'loading', duration: 1500 }) } }) } })
查
收货地址的首页，用于拉取当前用户已有的收货地址
var that = this;
不知道为什么要这样做，可能是为了避免this 冲突或者语意不明确，将当前的对象，赋值给变量that
wx.request({})发起https请求
url: 'https://shop.com/home/shipping/index',所需要请求的网址接口
method: 'GET',请求的方式，默认是GET，当时POST的时候，必须声明
data: {},发送的请求的数据
header: {},发送的头信息，
GET方式的头信息为：'Accept': 'application/json'
POST方式的头信息为："Content-Type": "application/x-www-form-urlencoded"
success:function() 请求成功调用的方法
Fail:function() 请求失败调用的方法
success: function(res) { that.setData({ "addressInfo": res.data.info, }) },
res为调用成功以后服务器端返回的数据，
that.setData({"addressInfo": res.data.info,}) 添加数据到当前页面的data对象，键名为addressInfo,键值是返回的数据，我需要的是res的data对象的info对象的所有信息
fail:function(){ wx.showToast({ title: '服务器网络错误!', icon: 'loading', duration: 1500 }) }
网络请求失败调用的方法
showToast类似于JS中的alert，弹出框，title 是弹出框的显示的信息，icon是弹出框的图标状态，目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。
a.url是你请求的网址，比如以前在前端，POST表单中action=‘index.php'，这里的index.php是相对路径，而小程序请求的网址必须是网络绝对路径。
b.'https://shop.yunapply.com/home/shipping/index',以GET方式请求HOME模块下的Shipping控制下的index方法
c.将得到的值添加到data里
看HOME模块下的Shipping控制下的index方法