mpvue 애플릿이 겪는 문제점 요약 (스스로 mpvue로 애플릿의tabbar,vantUi 사용을 실현)

전언
회사에서 작은 프로그램을 개발하여 사용자를 대상으로 3가지 역할로 나누려고 하기 때문에 직접 손으로 tabbar(문장 편집 중, 링크를 놓는 경우)를 써야 한다. 왜냐하면 오랜만에 작은 프로그램을 쓰기 때문에 vue와 비슷한 mpvue를 선택하여 썼기 때문에 많든 적든 문제가 생겼다. 지금 총괄해 보자.
개발 환경: 시스템: MAC, 버전 10.14.6;위챗 개발자 도구: Nightly v1.02.1908222;
1. v-for가template 태그를 만났을 때
VUE: 평소에 우리가 데이터를 훑어보면 이렇게 쓸 수 있어요. 키 속성은 소포된dom에 쓸 수 있어요.

mpVue: 애플릿은 키 속성을 탭에 직접 쓰도록 요구할 것입니다. 만약 우리가 위와 같은 쓰기를 한다면 개발자 도구는 다음과 같이 알립니다.
이렇게 되면template 라벨을 사용할 수 없습니다. 키가template에 쓰면 바로 오류가 컴파일되기 때문에, 우리는 실제 라벨로template를 대체할 수 밖에 없습니다
mpVue에서 올바르게 쓰기:

 

      {{item}}
 

2. 구성 요소 탭에서class/style이 지원되지 않습니다.
예를 들면 다음과 같습니다.

터미널에서 직접 오류 보고:
mpVue에서 올바른 쓰기는class/style을 속성으로 서브 구성 요소에 전달해야 합니다
3. 스타일이나class 속성에 대상을 연결하는 것을 지원하지 않습니다
VUE:dom 동적 바인딩class에 다음과 같이 쓸 수 있습니다.

    
data() {
    return {
      setClass: {
       classOne:true,
       classTwo:false
      }}}
//    ：
    

이러한 표기법은 mpvue에서 지원되지 않습니다. mpVue에서 정확한 표기법은 다음과 같습니다.

    
data() {
    return {
      setClass: {
       classOne:true,
       classTwo:false
      }}}

4. 애플릿 구성 요소 scroll-view를 사용하여 맨 위의 문제를 되돌려줍니다
작은 프로그램의 구성 요소입니다. 우리가 일정한 범위까지 굴러갈 때, 우리는 맨 위로 돌아가려고 합니다. 이치대로 말하면 속성 'setScroll' 을 '또는 0으로 설정하면 됩니다. 그러나 mpvue가 사용할 때 0만 설정하면 효과가 없습니다. 두 번 설정해야 합니다. 예를 들어:

//    
 backTop() {
      this.setScroll = '2'//         、  0  
      this.setScroll = ''//        
    },

5.mpvue에서 vantUi 사용
vantUi 홈페이지: vant, 나는 이렇게 사용했다. 그의 정적 자원을 직접 다운로드하여 로컬 mpVue 프로젝트의 static 디렉터리에 넣었다. 구조는 다음과 같다.
도입할 때 대응하는 디렉터리에main을 만듭니다.json 파일,
main.json에 쓰기:

{
  "navigationBarTitleText": "  ",
  "usingComponents":
  {
    "van-button": "/static/vant/button/index"
  }
}

그리고 페이지에서 정상적으로 사용할 수 있습니다. 사용 중 vant의 구덩이를 발견했습니다. 바로 button을 설정하는 비활성화 효과가 효력을 상실했습니다. 다만 스타일만 바뀌었을 뿐 실제로는 클릭할 수 있습니다. 예를 들어 다음과 같습니다.

  

    changeSome: function() {
    //button   disabled，       
        console.log(123)
    }

생각한 해결 방안은 방법에 판단을 덧붙여 인터넷 검색을 실행할지 말지 결정하는 것뿐인데 답을 얻지 못했습니다.
부족한 점이 있으면 여러분의 보충과 시정을 부탁드립니다.