小程序常规增删改查

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

2.文件目录

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

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

wxss用于页面的样式设置，

wxml就是页面，相当于html

3.wxml代码

<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="http://www.mamicode.com/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-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方法

public function index()
{
    //$id 为用户名id  等以后可以通过token获取或者session(id)什么的
    $use_id = 2;
    $res = D(‘Shipping‘)->getAddress($use_id);
    if ($res == false){
        $this->error(‘暂无收货地址‘,‘‘,true);
    }else{
        $this->success($res,‘‘,true);
    }

}

查看Shipping模型中的getAddress()方法

/**
 * 获取收货地址信息
 * @param $id  当前用户id
 * @return 属于用户的所有地址
 */
public function getAddress($id)
{
    $address_list = $this->where(array(‘user_id‘=>$id))->select();
    if ($address_list == false){
        return false;
    }
    return $address_list;
}

这样就根据用户是否有地址还返回相应的JSON数据

本例子的JSON数据是

{"info":[{"id":"4","user_id":"2","name":"addTest","mobile":"15162550544","province":"","city":"","district":"","address":"44563","createtime":"2017-01-10 18:45:27","modifytime":"2017-01-10 18:45:27","default":"0"}],"status":1,"url":""}

请求成功以后就将JSON添加到data{}中，并设置键值为addressInfo

那么接下来就是将这些信息展示在前端页面上

<view wx:for="{{addressInfo}}"  wx:key="unique">

<view class="receipt-address-list clearfix">

<image src="http://www.mamicode.com/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>

控制属性 wx:for 绑定一个数组，就是JS中的addressInfo这个数组，默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item 。可以根据{{item.address}}、{{item.name}}、{{item.mobile}}、{{item.id}}获取到当前数据的地址、收货人、电话和该条信息的id

循环之后就可以按照格式展示所有地址信息了，相当于TP模板中的foreach

删

在前台模板的循环数据里可以看到这样一条标签

<view  data-deleteid="{{item.id}}" bindtap="deleteClick">删除</view>

bindtap属性是微信在模板页中绑定点击事件，deleteClick为触发时间的方法名

在index.js中，删除代码如下：

//删除地址

  deleteClick:function(event){

    var id = event.currentTarget.dataset.deleteid;

    wx.request({

      url: ‘https://shop.yunapply.com/home/shipping/delAddress?id=‘+id,

      data: {},

      method: ‘GET‘,

      success: function(res){

        if(res.data.status == 0){

          wx.showToast({

            title: res.data.info,

            icon: ‘loading‘,

            duration: 1500

          })

        }else{

          wx.showToast({

            title: res.data.info,

            icon: ‘success‘,

            duration: 1000

          })

          //删除之后应该有一个刷新页面的效果，等和其他页面刷新跳转一起做

        }

      },

      fail:function(){

              wx.showToast({

                title: ‘服务器网络错误!‘,

                icon: ‘loading‘,

                duration: 1500

              })

            }

    })

  }  

点击前端删除按钮的时候，触发deleteClick事件，可以传入一个参数，代表事件对象。

event.currentTarget.dataset.deleteid;表示事件对象的目标的data-*的值

然后通过GET方式传入url，在服务器端删除功能如下

public function delAddress($id)
{
    $res = D(‘Shipping‘)->where(array(‘id‘=>$id))->delete();
    if ($res){
        $this->success(‘删除成功‘,‘‘,true);
    }else{
        $this->error(‘删除失败‘,‘‘,true);
    }
}

根据返回的JSON值就可以提示删除成功与否

增

改

请参考注册功能

2017-01-11小程序常规增删改查