WeChat Mini 프로그램 개발 (6) '명함 편집' 페이지 개발

명함 편집에는 두 가지 경로가 있는데, 명함을 추가하는 과정과 명함을 수정하는 과정으로 나누어집니다. 사용자가 새 명함을 수동으로 추가하는 프로세스는 다음과 같습니다.

먼저 새 명함 페이지 1로 이동합니다. 사용자의 현재 userId를 전달해야 하며, wx.navigateTo는 값으로 이동합니다. 사용자가 새 경로를 사용하도록 설정하려면 Manual이 true입니다.
Vertical 추가하면 수직 슬라이딩을 의미하고, 제거하면 왼쪽 및 오른쪽 슬라이딩을 의미합니다. 전체적인 구성은

명함 추가 페이지 1입니다. 기본 레이아웃은 다음과 같습니다.

사용자 ID를 가져옵니다.

MaxLength 속성 과 같이 WeChat과 함께 제공되는 입력 구성 요소 확인을 사용하는 것도 매우 쉽습니다. 사용자 입력 길이를 제한할 수 있습니다. 예를 들어 내 이름의 길이는 최대 5자리이므로 숫자 5만 사용하세요.

또한 일부 확인 효과를 사용자 정의할 수 있습니다. 특히 필요에 따라 일부 확인 구성을 수행하고 에서 입력한 값을 가져올 수 있습니다. 사용자 및 작업을 수행합니다.

내장 모달 상자 프롬프트 구성 요소가 여기에 바인딩됩니다.

여기서 modalHidden2는 모달 상자 스위치입니다.
또한 proptText는 메시지를 표시해야 하는 콘텐츠입니다.
많은 입력 상자도 데이터의 동적 변경을 지원하므로 매우 편리합니다.

실제 효과가 이전보다 훨씬 빨라졌다는 점이 가장 큰 장점이 아닐까 싶습니다. 일련의 호환성 문제를 고려할 필요가 없습니다.

마지막으로 사진을 업로드할 수 있는 아바타가 있는데, 테스트 후에도 여전히 업로드에 문제가 있습니다. 백엔드 서버 내부 베타 버전의 불완전성 때문일 수 있습니다.

에서는 배경 이미지를 직접 설정합니다.

양식을 제출하고 점프하세요.
제출 양식은 내장된 바인딩 제출 이벤트 구성 요소를 사용합니다. 버튼 구성 요소에 formType="submit"을 추가하면 됩니다. 양식 제출 기능을 사용할 때 입력에 이름을 추가해야 한다는 것입니다. 속성입니다. 전달 방법은 키-값 쌍의 형태입니다.

이때 편집 2페이지로 이동합니다. 이 페이지에서는 사용자가 입력한 휴대폰 번호를 기준으로 매칭업체를 식별합니다. 페이지는 매우 간단합니다. 이는 단지 데이터루프일 뿐입니다. 라디오 버튼은 나중에 장식해야 할 수도 있습니다.

에도 데이터 바인딩 및 검증 효과가 있습니다.

실제 렌더링 효과를 보실 수 있습니다.

이것의 논리는 기본적으로 첫 번째 편집 페이지와 동일하며 몇 가지 기본 확인 및 제출만 하면 됩니다. 여기에서는 처음 두 단계에 대해서만 이야기합니다. 3페이지 편집도 마찬가지입니다. 여기서는 너무 자세히 설명하지 않겠습니다.
명함 프로세스 렌더링 및 요구 사항을 수정합니다. 명함을 수정하면 이전에 입력한 모든 개인 정보가 한 번에 렌더링되어 사용자가 수정할 수 있습니다.

이 카드 사진 모듈은 당분간 사진 업로드에 문제가 있습니다. 여기서는 점프 구성 요소를 모방하고 있으므로 해당 페이지를 제어하려면 wx.navigateTo를 사용하는 것이 좋습니다. 한 지점에서 wx.navigateTo는 모두 잘 캡슐화되어 있는 3가지 다른 점프 경로 를 제공하며 많은 점프 페이지에는 값 전달 등이 포함됩니다. 통합 관리를 통해 눈에 보이지 않는 버그도 피할 수 있습니다. 즉, 비즈니스 요구 사항에 따라 결정해야 합니다.

이름 및 휴대폰 필수 모듈입니다. :

개인정보 모듈, 직접 순환(차단)아웃 :

Onload 시 필수 및 선택 데이터를 요청합니다.

• requiredGroup 필수 중국어 정보

• notRequiredGroup 주제 중국어 정보

• requiredGroupEn 필수 영어 정보

• notRequiredGroupEn 주제 영어 정보

//请求名片对应的公司的中文信息的属性组数据，分为必填和选填//选题项变量以 no 开头requester.getOfflineCardInfoGroupFields(userId, cardId,function (res) {//debuggervar userName = res.card.userName;var mobile = res.card.mobile;var requiredGroup = res.requiredGroupCh;var notRequiredGroup = res.notRequiredGroupCh;var requiredGroupEn = res.requiredGroupEn;var notRequiredGroupEn = res.notRequiredGroupEn;var reqLen = requiredGroup.fields.length;var nreqLen = notRequiredGroup.fields.length;var reqLenEn = requiredGroupEn.fields.length;var nreqLenEn = notRequiredGroupEn.fields.length;self.setData({userName: userName,mobile: mobile,requireFields: requiredGroup.fields,notRequireFields: notRequiredGroup.fields,requireFieldsEn: requiredGroupEn.fields,notRequireFieldsEn: notRequiredGroupEn.fields,l1: reqLen,l2: nreqLen + reqLen,l3: reqLenEn + nreqLen + reqLen});self.forceUpdate();}, function (code, msg) {console.info("code=" + code + "&msg=" + msg);});

중국어, 영어 정보 필수 및 선택 입력 렌더링:

여기서 양식 제출 데이터 변환은 약간 복잡합니다(비즈니스 요구에 따라 수행하므로 비용을 지출할 필요가 없습니다). 여기서 방법을 연구하는 시간), 얻은 것은 배경에서 요구하는 데이터 형식에 따라 변환되어 전달되는 배열입니다.

오늘은 다시 돌아가서 홈페이지 A, B, C의 고정 소수점 점프 기능을 구현하는 방법에 대해 이야기해보겠습니다.

첫 번째는 오른쪽의 작은 인덱스 레이아웃과 데이터 바인딩입니다. 카드 목록 아래에 명함이 있으면 렌더링됩니다. 명함이 없으면 렌더링할 필요가 없습니다. ID도 현재 문자이고 오른쪽에 표시되는 내용입니다.

데이터 정렬 및 그룹 .name 데이터는 동일합니다:

여기서는 #이 id(즉, id="#")로 설정되는 것을 지원하지 않기 때문에 변환을 했습니다.

클릭 이벤트: 현재 ID를 가져오고 현재 ID에 View에 데이터를 바인딩합니다.

우선 명함 목록과 명함에 적힌 글자 색인이 모두 스크롤뷰로 나와야 합니다. 고정 높이로 설정하고 100%로 설정하면 100vh는 유효하지 않습니다. y축의 스크롤 스위치가 켜져 있고 스크롤 보기는 해당 하위 요소의 ID로 이동해야 합니다.

볼 수 있는 그룹:

이 그룹. name ==sortmsg는 A==A, B==B와 동일합니다.

메뉴바가 있는 경우 여기서는 레이아웃에 주의해야 합니다. 그렇지 않으면 메뉴 표시줄의 높이가 아래쪽으로 오프셋됩니다. 실제로 알파벳 색인(상단 메뉴)과 동일한 수준에 있는 한 이 문제를 피할 수 있습니다. 여기서는 템플릿과 분리되어 있으며 분리된 템플릿 여기에서 템플릿에 바인딩해야 하는 일부 데이터는 유효하지 않으며 세부 사항은 더 이상 연구되지 않습니다.

점프 기능이 기본적으로 구현되어 있습니다.

【관련 추천】

1. 위챗 미니 프로그램 전체 소스코드 다운로드

2. 탭바 변경 아이콘 클릭

3. WeChat 미니 프로그램 데모 ：Lezhu

위 내용은 WeChat Mini 프로그램 개발 (6) '명함 편집' 페이지 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!