WeChat 개발에서 값을 전달하고 검색하는 여러 방법 소개

이 글은 주로 관련 정보를 소개하고 위챗 미니 프로그램에서 가치를 전달하고 획득하는 여러 방법을 요약한 것입니다. 여기에는 이러한 방법에 대한 자세한 설명이 첨부되어 있으며, 도움이 필요한 친구들은 참고할 수 있습니다.

WeChat 애플릿 전달 값

애플릿에 포함된 공통 값은 다음과 같습니다. 완전한 프로젝트를 적어보면 사용할 확률은 거의 같습니다. 100%.

• 목록 색인 첨자 값

• 페이지 값 전달

• 양식 양식 값

1. 인덱스 첨자 값 나열

구현 방법은 data-index="{{index}}" 파기 구멍 및 .currentTarget.dataset입니다. 구덩이를 채울 .index

1.1 값 생성

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

삭제 아이콘과 텍스트에 data-index="{{index}}" 사용자 정의 속성 및 바인딩 추가 이벤트를 클릭하십시오. 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이 출력됩니다.

target의 용도는 무엇입니까? 예를 들어 사용자의 아바타를 변경할 때 하위 요소를 외부 요소와 구별하는 데 사용됩니다. 아바타 자체를 클릭하면 큰 이미지를 미리 볼 수 있고, 아바타가 있는 라인 전체를 클릭하면 아바타가 전환됩니다.

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

주소/추가 페이지는 onLoad(옵션) 메소드를 구현합니다. url 경로 objectId

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

를 가져온 다음 네트워크에 액세스하여 페이지를 렌더링합니다.

3. 양식 양식 값

3.1 방법 1,

button formType="submit " > 태그는 다음과 같이

레이아웃과 함께 사용됩니다.

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

3.2 방법 2,

에서 구현

// 实现相应多个**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를 비교하면 값을 얻는 목표도 달성할 수 있지만 사용 시나리오가 다르다는 것을 알 수 있습니다. 대량의 양식 항목 제출 사용자가 개인 정보를 작성하고 배송 주소를 입력하는 경우 후자는 빠른 주문 번호 입력 및 모바일 바인딩과 같은 하나 또는 두 개의 양식 항목에만 적합합니다. 전화 번호.

Ajax와 유사한 즉각적인 응답이 필요한 경우 후자를 선택해야 합니다. 입력은 제품 검색과 같이 상자에 휴대폰 키워드를 입력하면 iPhone7, Mate8 및 기타 후보 단어와 같은 장면이 나타납니다.

요약:

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

【관련 추천】

1.

위챗 공개계정 플랫폼 소스코드 다운로드

PigCms 마이크로커머스 시스템 운영 버전 (독립 웨이디안 몰 + 3단계 유통 시스템)

3.

WeChat People Network v3.4.5 Advanced Business Edition WeChat Rubik's Cube 소스 코드

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