ホームページ >WeChat アプレット >ミニプログラム開発 >WeChatミニプログラムの追加・削除・変更・動作確認のサンプルコードを詳しく解説

WeChatミニプログラムの追加・削除・変更・動作確認のサンプルコードを詳しく解説

高洛峰オリジナル: 2017-03-23 13:59:307589ブラウズ

この記事では、WeChatミニプログラムの追加、削除、変更、確認の操作例の詳細な説明に関する関連情報を主に紹介します。必要な友達はそれを参照してください

。 WeChat ミニプログラムの変更と確認操作例の詳細な説明

1. 配送先アドレスの追加、削除、変更、確認を例に挙げます

2. ファイルディレクトリ

WeChatミニプログラムの追加・削除・変更・動作確認のサンプルコードを詳しく解説

收货人信息姓名电话地址送货时间收货地址信息 <view> <view> <image></image> <view> <view><text>收货地址{{item.address}}</text><text>1km</text></view> <view>收货人{{item.name}}</view> <view>收货人电话{{item.mobile}}</view> <view>删除</view> <view>编辑</view> </view> </view> </view>

1.いくつかの重要な点を理解する必要があります

a。ミニプログラムでは、属性は、bindsubmit,

bindsubmit=”formSubmit”

です。ここで、属性値 formSubmit は、仕様に準拠する任意の値にすることができます。は、前の HTML の onsubmit="formSubmit()" に相当します。は、送信時に formSubmit 関数イベントがトリガーされます。 b. 他の属性は前の HTML と同様です。フォームには name="value" が必要であり、バックエンド処理は以前と同じであることに注意してください。たとえば、PHP は $_POST を使用できます。 ['ユーザー名'] を受信します。

c. ミニプログラムには入力送信ボタンがないため、各フォームに送信ボタンが必要です

を有効にするには、このボタンを使用します。提出イベント。

ループに関しては、分解して解決します

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

       })

      }

  })

 }

})

Check

配送先アドレスのホームページは、現在のユーザーの既存の配送先アドレスを取得するために使用されます

var that = this;

なぜこれを行うのかわかりませんが、この競合または不明瞭なセマンティクスを回避するためかもしれません。

wx.request({}) が https リクエストを開始する変数に割り当てられた現在のオブジェクトを変更します

url: 'https://shop.com/home/shipping/index'、必要な URL インターフェースrequested

メソッド: '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,}) は、現在のページのデータオブジェクトにデータを追加します。キー名は addressInfo で、キー値は返されたデータです。必要なのは、res データオブジェクトの info オブジェクトのすべての情報です

。

fail:function(){

       wx.showToast({

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

        icon: 'loading',

        duration: 1500

       })

      }

ネットワークリクエストが失敗したときに呼び出されるメソッド

showToastはalert、ポップアップボックスと同様で、JSのtitleはポップアップボックスに表示される情報、iconは現在のポップアップボックスのアイコンの状態です。、状態は読み込みと成功の 2 つだけです。期間は、ポップアップボックスが画面に表示される時間です。

a.url はリクエストした URL です。たとえば、フロントエンドでは、action='index.php' が POST フォームで使用され、ここでの Index.php はミニによってリクエストされた URL です。プログラムは絶対ネットワークパスである必要があります。

b.「https://shop.yunapply.com/home/shipping/index」

、GETメソッドのHOMEモジュール配下のShiping controlにあるindexメソッドをリクエストします

c. 取得した値をデータに追加します

HOME モジュールの Shipping control にあるインデックスメソッドを見てください

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>

<view>

<image></image>

<view>

<view><text>收货地址{{item.address}}</text><text>1km</text></view>

<view>收货人{{item.name}}</view>

<view>收货人电话{{item.mobile}}</view>

<view>删除</view>

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

增、改

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

首先查看前台表单

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表单中都要有一个提交按钮，

，这个按钮就是用来开启提交事件的。

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);
        }
      }
    }
  }
}

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

以上がWeChatミニプログラムの追加・削除・変更・動作確認のサンプルコードを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：WeChatミニプログラムの構築方法とログイン失敗問題の解決方法を詳しく解説次の記事：WeChatミニプログラムの構築方法とログイン失敗問題の解決方法を詳しく解説

続きを見る