全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[吉安seo公司首荐久澳]微信小程序之增、删、改、查操作的代码实现

  这篇文章主要介绍了微信小程序 增、删、改=▷●、查操作实例详解的相关资料,这里附有实例代码…●▲-,需要的朋友可以参考下

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

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

  2.文件目录

  

  1.  

      js文件是逻辑控制•-▼=,主要是它发送请求和接收数据○•-•,

      

  2.  

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

      

  3.  

      wxss用于页面的样式设置,

      

  4.  

      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']来接收。[宿州seo公司要找久澳]关于小程序与公众号跳转

  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是弹出框在屏幕上显示的时间•◁△▲。[吉安seo公司首荐久澳]

  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="◆•★○.▽…./.-••△./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

  

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

  

 

  

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

 

  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值就可以提示删除成功与否

  增★-◁、改

  之前觉得增加和修改会和表单提交一样简单,但是做了一些还是觉得不一样,好好在写一遍•●○▼。

  首先查看前台表单

  

 

  

<form bindsubmit="addSubmit"□■▷◆;>
<view class="◆◇;consignee"◁=;>
<text class="☆□=▽;consignee-tit"…★;>收货人信息</text>
<view class="consignee-main">●◁;
<input name="◁-;id" type="◇=;hidden" value="{{addressEdit.id}}"○▪▼▷; />
<view class="flex flex-align-center flex-pack-justify">
<text>姓名</text>
<input class="flex-1" name="name"•◆; type="number" value="{{addressEdit.name}}" maxlength="11" placeholder="请输入收货人姓名" />
<▲▼;/view>
<view class="flex flex-align-center flex-pack-justify">
<□-▽△;text>电话</text>
<◆▷▪;input class="flex-1" name="mobile"△▽□▼; type="○◆△;number"○◇△; value="{{addressEdit▲…•.mobile}}"◇▲▷=; maxlength="11" placeholder="▷◇□•;请输入手机号"▼◇▽▲; />
</view>△■;
<◆…○▽;view class="flex flex-align-center flex-pack-justify">
<text>地址<●☆;/text>●•■•;
<input class="◇◆▪;flex-1" name="address" type="text" value="{{addressEdit▲◇▽.address}}" maxlength="-1" placeholder="请输入地址" />◆□▲•;
<△▷…-;/view>●●-▼;
</view>
</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 class="receipt-true"■◆△▽;>
<button class="btn_login" formType="submit"▷◁▪◁;>保存</button>
</view>
</form>▪★;

 

  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.由于添加地址和编辑地址都是在一个页面的•=△○,所以我需要在每个表单中,加一个默认值变量,当点击修改的时候,默认值就显示在输入框中◁=…。

  e.表单中有一个编辑,绑定了事件editClick,当点击这个按钮的时候,就会进入编辑模式

  添加和修改的放在一个函数里面▽●,但是修改数据的显示是另外一个函数

  先说修改○☆◁,点点击编辑的时候,触发editClick事件

  JS如下…▪◇△:

  

 

  

editClick○◇○:function(event){
 var that = this;
 var id = event★•▲.currentTarget.dataset.editid;
 wx.request({
 url: '▼■;https▲●☆://shop.yunapply.com/home/shipping/edit?id='▲▼△△;+id,
 data□▲: {},
 method: 'GET'●▷,
 success: function(res){
 if(res☆•▪•.data.status == 0){
 wx.showToast({
 title◆…: res.data.info,
 icon□▪☆: '▽◁□■;loading',
 duration: 1500
 })
 }else{
 that.setData({
 "□○△◆;addressEdit"☆…○▲;: res.data.info,
 })
 }
 }▪▲,
 fail:function(){
 wx.showToast({
 title○-◇◁: '◁■;服务器网络错误☆●◆!',
 icon: 'loading'◁■;••☆,
 duration: 1500
 })
 }
 })
 },

 

  为了更好理解▷-★□,贴个图

   最下面有一个保存按钮,当点击编辑的时候,触发editClick:function(event),这个event是当前触发事件的对象,

  var id = event-◇○.currentTarget.dataset.editid; 就是获取当前事件对象的dataset中的editid的值,这里id是当前地址的id

  url: '▷…☆◆;https▪=-://shop…□▷☆.com/home/shipping/edit?id='+id

  Wx.request 的url▪◁□△,将id值放在url上,作为GET参数▷-▪☆,传递到服务器。

  data: {},是需要额外传递的数据

  method: 'GET', 是数据传递方式 默认是“GET”,保持大写

  data:{mobile:e.detail=•.value▼….mobile,password:e▼-.detail.value■▪●▲.password},

  这里的data就是POST给服务器端的数据 以{name:value}的形式传送

  success:function()是请求状态成功触发是事件,也就是200的时候■○…,注意☆○■,请求成功不是操作成功◆◁▽▷,请求只是这个程序到服务器端这条线的通的。

  fail:function()就是网络请求不成功,触发的事件。

  这里的一段代码是和PHP后端程序有关系的,具体流程是这样的•▼△▷,

  1.GET通过数据到https▽▪□://shop.com/home/Shipping/edit这个接口,用过THINKPHP的就会知道是HOME模块下的Shipping控制下的edit方法

  2.后端PHP代码如下:

  控制器 ShippingController.class.php

  

 

  

public function edit($id)
{
 $res = D('Shipping')->find($id);
 $this->success($res,''-□•,true);
}

 

  也就是说将这条数据取出来,没什么好说的。

  

 

  


 that.setData({
 "addressEdit": res.data○★▷◆.info,
 })
 }

 

  这里请求成功以后,调用小程序 setData方法△□○■,将服务器端返回的信息放到addressEdit[]中,然后在前端页面调用{{addressEdit.id}}、{addressEdit.name}}、{addressEdit.mobile}}、{addressEdit◁●.address}}将数据展示出来,这就是修改时候的操作。

  接下来是提交表单的操作

  Js代码如下

  

 

  

addSubmit:function(e){
 if(e.detail.value.mobile.length==0

 

  e▽-★◇.detail◇•=•.value.name.length==0

  e.detail▲▽☆.value□•.address.length==0){ wx▲▼.showToast({ title: '▪★;收货人所有信息不得为空!'△☆;, icon◆◇-•: '○■•■;loading', duration▽▲: 1500 }) }else if(e.detail.value☆▪●.mobile.length …▽!= 11){ wx□▽▽•.showToast({ title★•◆■: '请输入11位手机号码△☆△◇!'=◁, icon☆…○: 'loading', duration◇●: 1500 }) }else{ wx…△…•.request({ url: '▽-;https▪●▪://shop○◆▲●.yunapply-▼◇.com/home/shipping/save'★■;, header: { "Content-Type"▪★;○☆: "application/x-www-form-urlencoded" }, method: "POST"■▲★;-▷▲, data:{id▪◇:e.detail.value.id,mobile◆■:e.detail-◆.value.mobile,name:e.detail.value.name,address:e-★▼.detail▽●★◇.value.address}, 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 }) setTimeout(function(){ wx.navigateTo({ url:'-○▼●;../address/index'◆▲▽▽; }) }★▷-△,1000) } }, fail:function(){ wx.showToast({ title□▲: '服务器网络错误▲▪!'△-★;☆▪▽, icon●•☆: '●●=▽;loading', duration: 1500 }) } }) } }

 

  在前端的FORM表单中☆▪,当点击formtype=•…“submit”这个按钮的时候,触发addSubmit事件□▽,前面的if都是JS验证,防止用户不填写信息■☆。

  1.其他的request请求差不多,找几个不一样的

  

 

  

url★-◆: 'https://shop.yunapply.com/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)=▷…;
 }
 }
 }
 }
}

 

  以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

  相关推荐△○◆:

  微信小程序
向左滑动删除功能的实现
 

  微信小程序button组件的使用介绍
 

  

 

  以上就是微信小程序之增•□▪△、新郑市小程序制作公司删◇▷◇、改、查操作的代码实现的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[吉安seo公司首荐久澳]微信小程序之增、删、改、查操作的代码实现

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。