微信小程序 增、删、改、查操作实例详解

1.以收货地址的增删改查为例

2.文件目录

js文件是逻辑控制，主要是它发送请求和接收数据，

json用于此页面局部 配置并且覆盖全局app.json配置，

wxss用于页面的样式设置，

wxml就是页面，相当于html

<form bindsubmit="addSubmit"><view class="consignee"><text class="consignee-tit">收货人信息</text><view class="consignee-main"><view class="flex flex-align-center flex-pack-justify"><text>姓名</text><input class="flex-1" name="name" type="number" maxlength="11" placeholder="请输入收货人姓名" /></view><view class="flex flex-align-center flex-pack-justify"><text>电话</text><input class="flex-1" name="mobile" type="number" maxlength="11" placeholder="请输入手机号" /></view><view class="flex flex-align-center flex-pack-justify"><text>地址</text><input class="flex-1" name="address" type="text" maxlength="11" placeholder="请输入地址" /></view></view></view><view class="delivery-time flex flex-align-center flex-pack-justify"><text>送货时间</text><picker mode="date"></picker></view><view class="receipt-address"><view class="receipt-address-tit">收货地址信息</view><view wx:for="{{addressInfo}}" wx:key="unique"><view class="receipt-address-list clearfix"><image src="../../images/address-icon.png"></image><view class="address-list-main"><view class="clearfix"><text>收货地址{{item.address}}</text><text>1km</text></view><view class="address-info">收货人{{item.name}}</view><view class="address-time">收货人电话{{item.mobile}}</view><view data-deleteid="{{item.id}}" bindtap="deleteClick">删除</view><view data-editid="{{item.id}}" bindtap="editClick">编辑</view></view></view></view></view><view class="receipt-true"><button class="btn_login" 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-/home/shipping/save',

调用服务器端的save方法

header: { "Content-Type": "application/x-www-form-urlencoded" },

由于POST和GET传送数据的方式不一样，POST的header必须是

"Content-Type": "application/x-www-form-urlencoded"

GET的header可以是'Accept': 'application/json'

data:{id:e.detail.value.id,mobile:e.detail.value.mobile,name:e.detail.value.name,address:e.detail.value.address},

这里是需要POST到服务器端的数据

Save方法代码

public function save(){ //$user_id $user_id = 2; if (IS_POST){ $shipping = D('Shipping'); if (!$shipping->create()){ $this->error($shipping->getError(),'',true); }else{ if (is_numeric($_POST['id'])){ if ($shipping->editAddress($_POST['id'])){ $this->success('地址修改成功','',true); }else{ $this->error('地址修改失败','',true); } }else{ if ($shipping->addAddress($user_id)){ $this->success('添加地址成功','',true); }else{ $this->error('添加地址失败','',true); } } } }}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！