위챗 애플릿 실전편 - 전자상거래(一)

안녕하세요,단오절은 어떻게 지냈어요?코드군은 쉬지 않고 전자상거래 글에 전념했어요.정말 열심히 했어요.코드군에게 인정을 받으면 좋아요를 눌러서 전송해 주세요.당신들의 좋아요와 전송은 저에게 가장 큰 지지예요!자, 본론으로 돌아가자면 우리는 오늘 위챗 애플릿의 실전편인 전자상거래를 설명해야 한다. 많은 독자들이 나에게 전자상거래에 관한 강좌를 내놓으라고 피드백을 보내기 때문에 나는 여가 시간을 이용하여 전자상거래 애플릿에 관한 강좌를 몇 편 쓰려고 한다. 이것은 첫 번째 편이다. 자, 샤오밍 학생, 지금부터 중점을 두고 주의해서 들어라.

전자상거래 밑부분 내비게이션 표시줄 제작

나는 모두가 전자상거래에 대해 틀림없이 낯설지 않을 것이라고 생각한다. 일반 전자상거래의 밑부분 내비게이션 표시줄에는 다음과 같은 몇 개의 첫 페이지, 분류, 쇼핑 카트, 개인 센터가 있다.그래서 우리는 이것에 따라 하자. 밑에 내비게이션을 하면 네가 위챗 애플릿 입문편(一)에서 앱을 기억하고 있는지 모르겠다.json의 역할, 기억이 안 나면 뒤져보세요. app.json은 페이지 경로와 네비게이션 표시줄 속성을 설정하는 데 사용됩니다. 그러면 첫 페이지, 분류, 쇼핑 카트, 개인 중심 인터페이스를 하려면 페이지에도 이 몇 개의 인터페이스를 추가해야 하기 때문에 app에 있습니다.json의 페이지에 다음 코드를 추가하여 페이지 경로를 작성하면 시스템이 자동으로 인터페이스를 만들어 줍니다

  "pages":[
    "pages/home/home",
    "pages/classify/classify",  
    "pages/cart/cart",
    "pages/mine/mine",
    "pages/index/index"
  ],

자, 네 개의 인터페이스가 추가되었으니 밑에 있는 네비게이션 표시줄을 어떻게 만들어야 할지 오늘 앱을 드리겠습니다.json에 속성을 하나 더 추가하면 app에서 사용할 수 있습니다.json에 내비게이션 표시줄을 설정하고 다음 코드를 app에 추가합니다.안에

 "tabBar": {
    "color": "#858585",
    "selectedColor": "#f0145a",
    "backgroundColor": "#ffffff",
    "borderStyle": "#000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "images/bottomNav/home.png",
        "selectedIconPath": "images/bottomNav/home_select.png",
        "text": "  "
      },
      {
        "pagePath": "pages/classify/classify",
        "iconPath": "images/bottomNav/classify.png",
        "selectedIconPath": "images/bottomNav/classify_select.png",
        "text": "  "
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "images/bottomNav/cart.png",
        "selectedIconPath": "images/bottomNav/cart_select.png",
        "text": "   "
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/bottomNav/mine.png",
        "selectedIconPath": "images/bottomNav/mine_select.png",
        "text": "  "
      }
    ]
  }

Bar시스템은 자체적으로 필드를 가지고 있습니다. 변경할 수 없습니다. 이 필드를 추가하는 것은 내비게이션 표시줄을 추가하는 것을 알려 줍니다. color,selectedColor,backgroundColor는 글자의 뜻에서 필드를 표시합니다. 각각 대응하는 속성은 기본 글꼴 색, 선택 글꼴 색, 배경 색입니다.borderStyle에 중심을 두고 말하자면 이 정의의 밑에 있는 네비게이션 표시줄과 인터페이스의 경계선은 속성이 좀 특수하다. 특히 이 경계선을 원하지 않으면 속성을white로 설정할 수 있다. 나머지는 네가 쓴 것이 무엇이든지 시스템은 이 경계선을 추가하는 것으로 이해한다. 믿지 않으면 한번 해 보자.list 속성은 자연히 내비게이션 표시줄에 대응하는 인터페이스를 설정합니다,

pagePath: 페이지 경로, 페이지에 적힌 경로

iconPath: 기본 탐색 모음 이미지 경로

selectedIconPath: 그림을 선택하는 경로

text: 탐색 모음 이름

여기서 말하고자 하는 것은 그림 경로는 반드시 정확하게 써야 한다. 그렇지 않으면 그림을 찾지 못하면 표시되지 않는다. 여기는 여러분에게 나의 내비게이션 표시줄 그림 - 추출 코드를 제공한다. 8zwe 여러분은 나의 그림 경로에 따라 대응하는 폴더를 만들 수 있다. 아래 그림과 같다.
주의 사항:

tabBar를 추가할 때 위에 쉼표가 있다는 것을 잊지 마세요. 이것은 모든 속성을 구분하는 데 사용되기 때문에 모든 속성을 쉼표로 구분해야 합니다. 이 점은 주의해야 합니다. 그렇지 않으면 오류가 발생할 수 있습니다. 이것이 바로 제가 구두점을 제거한 오류 로그입니다. 일반적으로 오류 로그를 보고하는 Expecting'EOF'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,got STRING은 모두 문법 오류입니다. 그래서 어디에 적은 것이 있는지 자세히 검사해야 합니다.

그리고 바로.json 파일에는 주석을 쓸 수 없습니다. 저는 원래 주석을 조금 추가하여 독자들이 쉽게 읽을 수 있도록 하려고 했는데 아래의 오류 정보가 발생할 수 있습니다. 해결 방법은 매우 간단합니다. 주석을 삭제하면 됩니다

하나를 들면 열을 안다

우리는 네 개의 네비게이션 표시줄을 만들었는데 만약에 내가 두 개의 네비게이션 표시줄을 더 추가하고 싶다면 괜찮겠습니까?너는 아마도 매우 간단하다고 생각할 것이다. 리스트에 두 개를 추가해 보아라. 나도 이렇게 했는데 문제가 생겼다.시스템이 틀릴 거야. 이번에 알았지? 최대 다섯 개밖에 안 돼. 어쩔 수 없어. 누가 위챗을 맏이로 만들면 사람이 최대 다섯 개로 정하면 최대 다섯 개밖에 안 돼!

네비게이션 표시줄의 기본 첫 페이지 표시줄을 빨간색으로 선택했는지 모르겠습니다. 그러면 기본 표시줄을 빨간색으로 분류하려면 어떻게 해야 합니까?이거 좀 어렵죠. 제가 처음에 생각한 것은 TabBar 속성에서list의 첫 번째 홈 속성과classify 속성을 바꾸면 해결할 수 있을 거라고 생각했는데 그게 아니에요. 효과가 없기 때문에 나중에도 실수로 발견한 거예요. 제가 힌트를 드릴게요. 페이지의 첫 번째 경로가 어떤 페이지/home/home인지. 맞아요.classify를 기본 체크 옵션으로 분류하려면 페이지 속성에서 홈 경로와classify 경로를 바꾸고 저장하고 다시 컴파일하면 효과가 나타납니다. 여기서 요약할 수 있는 것은 tabBar는 페이지의 첫 번째 줄 경로를 기본 체크 옵션으로 합니다.

전자상거래 맨 윗부분 내비게이션 표시줄 제작

기왕 내비게이션 표시줄에 대해 이야기한 바에야 차라리 오늘 좀 더 설명하고, 이어서 꼭대기 내비게이션 표시줄을 어떻게 만드는지 가르쳐 주고, 먼저 효과도를 올려라.
이 네비게이션 표시줄은 밑에 있는 네비게이션 표시줄과 같지 않다. 그의 등급은 비교적 낮고 페이지 등급의 네비게이션 표시줄이기 때문에 페이지에 써야 한다. 네가 어느 페이지에 맨 위에 네비게이션 표시줄을 넣고 싶으면 어느 페이지에 다음과 같은 코드를 추가해야 한다. 여기는 첫 페이지의 인터페이스를 예로 들면 홈이다.wxss

/* pages/home/home.wxss */
page{  
  display: flex;  
  flex-direction: column;  
  height: 100%;  
}  
.navbar{  
  flex: none;  
  display: flex;  
  background: #fff;  
}  
.navbar .item{  
  position: relative;  
  flex: auto;  
  text-align: center;  
  line-height: 80rpx;  
  font-size:14px;
}  
/*          */
.navbar .item.active{  
  color: #f0145a;  
}  
/*         */
.navbar .item.active:after{  
  content: "";  
  display: block;  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  height: 6rpx;  
  background: #f0145a;  
} 

home.wxml

  
<view class="navbar">  
  <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}text>  
view>  

홈에서.xml에 있는 bindtap 필드는 우리가 설명한 바와 같이 이벤트 감청의 표식자입니다. 이벤트 이름은'navbarTap'으로 홈에 갈 수 있습니다.js에서 이 이벤트를 찾았습니다 wx: for 이 필드는 구성 요소에 wx: for 제어 속성을 사용하여 하나의 그룹을 연결하면 그룹의 데이터를 사용하여 이 구성 요소를 반복적으로 렌더링할 수 있습니다.기본 그룹의 현재 항목의 하위 변수 이름은 기본적으로 index이고, 그룹의 현재 항목의 변수 이름은 기본적으로 item입니다. 이것은 공식적인 설명입니다. 말하자면 item 기본값은 변수라고 합니다. index는 몇 번째 변수의 값을 표시합니다. 아직 잘 모르겠습니다. 이 위챗 wx:for의 설명을 보십시오

*wx:for="{{navbar}}"*는 허황된 navbar의 그룹 데이터

를 의미합니다

{{{item}} 이 안은navbar수 그룹의 값입니다. 예를 들어 스킨케어, 메이크업 등가

wx:key="unique"로 목록에 있는 항목의 유일한 식별자를 지정합니다

*data-idx="{{{index}"*일부 데이터를 홈에 저장합니다.js에서 호출, 여기 데이터-xxx, xxx는 네가 홈을 주는 거야.js에서 제공하는 데이터 키워드, 홈.js는 xxx 키워드를 가져와서 xxx의 데이터를 가져옵니다

home.js

// pages/home/home.js
var app = getApp()
Page({
  data: {
    navbar: ['  ', '  ', '  ','    '],
    currentTab: 0,
  },

  //       
  navbarTap: function (e) {
    console.debug(e);
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  },

}) 

home.js, 여기 위챗 애플릿 입문편 읽어봤어요(둘) 다 알아요. 페이지 페이지에.js는 일반적으로 데이터 데이터와 이벤트 감청을 넣습니다. 여기에 데이터는navbar 네비게이션 표시줄 데이터가 있고 현재 위치를 기록하는currentTab이 있습니다. 필드는 자유롭게 이름을 붙일 수 있고 값을 붙일 때 대응하면 됩니다.

navbarTap은 홈에서 기억하고 있습니다.xml에 데이터-idx 속성이 있습니까?currentTab:e.currentTarget.dataset.idx는 현재 사용자가 선택한 탭을currentTab에 전송합니다. 결과를 검증하기 위해 출력 로그console를 추가했습니다.debug(e);,컨트롤러에서 출력된 로그를 볼 수 있습니다. 색조 메이크업을 클릭하면 출력대 데이터 idx:1이 색조 메이크업의 위치입니다.

총결산

오늘 우리가 설명한 위챗 애플릿의 밑부분 네비게이션 표시줄과 윗부분 네비게이션 표시줄, 네비게이션 표시줄은 필수적이라고 할 수 있다. 그러면 오늘의 네비게이션 표시줄 강좌를 너는 파악했니?,모르는 게 있으면 댓글로 남겨주세요. 코드군이 항상 답변해 주실 거예요. 제가 잘 쓴 것 같으면 좋아요를 눌러주세요.

시작 링크

위챗 애플릿 입문 편(一) 위챗 애플릿 입문 편(二)
작은 프로그램 기술 교류 그룹을 만들었으니, 그룹에 가입하고 싶은 독자는 위챗을 추가해 주십시오.