WeChat 애플릿 개발에서 값을 전달하고 값을 얻는 여러 가지 방법을 요약합니다.

이 글은 주로 관련 정보를 소개하고 WeChat 미니 프로그램에서 가치를 전달하고 획득하는 여러 방법을 요약합니다. 다음은 이러한 방법에 대한 자세한 설명과 첨부된 샘플 코드입니다.

WeChat 미니 프로그램을 참조하세요. 값 전달 및 가져오기

작은 프로그램에서 일반적인 값에는 다음과 같은 유형이 포함됩니다. 완전한 프로젝트를 작성하면 해당 값을 사용할 확률이 거의 100%입니다.

• 목록 색인 첨자 값

• 페이지 전송 값

• 양식 양식 값

1. 목록 색인 첨자 값

구현 방법은 다음과 같습니다. }" 구멍을 파고 e.currentTarget.dataset.index

1.1 값 생성

<image src="../../../images/icon_delete.png" /><text>删除</text>

Add data-index="{{index}}"로 채우면 아이콘과 텍스트가 삭제됩니다. 속성을 정의하고 바인드 클릭 이벤트 bintap="delete"

<image src="../../../images/icon_delete.png" /><text>删除</text>

삭제 메소드를 구현하고 인덱스 첨자 값을 가져옵니다.

delete: function (e) {
  var index = parseInt(e.currentTarget.dataset.index);
  console.log("index" + index);
}

e.currentTarget 대신 e.target을 사용하면 어떻게 되나요?

는 를 클릭해야만 인덱스 값이 출력되도록 하며, 또는 요소를 클릭하면 NaN이 출력됩니다.

그렇다면 타겟은 사용자의 아바타를 변경할 때와 같이 하위 요소를 외부 요소와 구별하기 위해 사용됩니다. 큰 이미지를 미리 보려면 아바타 자체를 클릭하세요. , 아바타가 위치한 라인을 클릭하면 전환 아바타가 됩니다.

둘의 차이점에 대한 자세한 설명은 다음 문서를 참조하세요: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

1.2 값 가져오기

주소 삭제를 위해 인덱스 데이터에서 해당 요소를 찾으려고 합니다

// 找到当前地址AVObject对象
var address = that.data.addressObjects[index];
// 给出确认提示框
wx.showModal({
  title: '确认',
  content: '要删除这个地址吗？',
  success: function(res) {
    if (res.confirm) {
      // 真正删除对象
      address.destroy().then(function (success) {
        // 删除成功提示
        wx.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 2000
        });
        // 重新加载数据
        that.loadData();
      }, function (error) {

      });
    }
  }
})

2. 페이지 값 전송

배송지 주소 목록 페이지의 주소 ID를 편집 페이지에 전달하여 읽어보세요. 수정을 위한 원래 주소.

주소/목록 페이지는 다음 코드를 구현합니다

<view class="container" data-index="{{index}}" bindtap="edit"><image src="../../../images/icon_edit.png" /><text>编辑</text></view>

edit: function (e) {
  var that = this;
  // 取得下标
  var index = parseInt(e.currentTarget.dataset.index);
  // 取出id值
  var objectId = this.data.addressObjects[index].get(&#39;objectId&#39;);
  wx.navigateTo({
    url: &#39;../add/add?objectId=&#39;+objectId
  });
},

주소/추가 페이지는 URL 경로에서 objectId를 얻기 위해 onLoad(options) 메서드를 구현합니다.

onLoad: function (options) {
  var objectId = options.objectId
}

그런 다음 네트워크에 액세스하고 렌더링합니다. 페이지.

3. 양식 양식 값

3.1 방법 1, 태그와 함께

을 사용하세요. 레이아웃은 다음과 같습니다.

<form bindsubmit="formSubmit">
  <input name="detail" placeholder="详情地址" />
  <input name="realname" placeholder="收件人姓名" />
  <input name="mobile" placeholder="手机号码" type="number"/>
  <button formType="submit" type="primary">Submit</button>
</form>

js 값:

formSubmit: function(e) {
  // detail
  var detail = e.detail.value.detail;
  // realname
  var realname = e.detail.value.realname;
  // mobile
  var mobile = e.detail.value.mobile;
}

문서 출처: https://mp.weixin.qq.com/debug/wxadoc/dev/comComponent/form.html

3.2 방법 2,

pass< ; inputbindconfirm="realnameConfirm"> 구현

// 实现相应多个**Confirm方式
detailConfirm: function(e) {
  var detail = e.detail.value;
}
realnameConfirm: function(e) {
  var realname = e.detail.value;
}
mobileConfirm: function(e) {
  var mobile = e.detail.value;
}

방법 1과 방법 2를 비교하면 값을 얻는 목표도 달성할 수 있지만 사용 시나리오가 다르다는 것을 알 수 있습니다. 사용자가 개인 정보를 작성하고 배송 주소를 입력하는 등 양식 항목이 많은 경우 제출에 적합하며, 택배 번호 및 배송 주소를 입력하는 등 양식 항목이 1~2개만 있는 경우에 적합합니다. 휴대폰 번호 바인딩.

Ajax와 유사한 즉각적인 응답이 필요한 경우 입력은 를 사용하여 즉시 값을 얻을 수 있으므로 후자를 선택해야 합니다. 제품 검색창에 iPhone7, Mate8 등의 시나리오가 나타나야 합니다.

문서 출처: https://mp.weixin.qq.com/debug/wxadoc/dev/comComponent/input.html

요약:

목록 색인 첨자 값, 페이지 값, 양식 값 값, 첫 번째 유형 두 번째 유형도 매우 일반적으로 사용되지만 미니 프로그램 페이지는 일반적으로 페이지 수가 적고 현재 프로젝트에는 12페이지만 있으며 세 번째 유형은 휴대폰이 생산성 도구가 아니기 때문에 상대적으로 덜 사용됩니다. 결국 등록 페이지, 댓글 페이지 등에 사용됩니다.

위 내용은 WeChat 애플릿 개발에서 값을 전달하고 값을 얻는 여러 가지 방법을 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!