WeChat 미니 프로그램의 맞춤형 구성 요소에 대한 자세한 소개

이 기사는 주로 WeChat Mini 프로그램 사용자 정의 구성 요소에 대한 관련 정보를 자세히 소개하며 관심 있는 친구는 이를 참조할 수 있습니다.

머리말

최근에 WeChat Mini 프로그램을 다시 접하게 되었습니다. -end 프레임워크는 이전에 회사에서 사용했던 Vue였습니다. 비교해 보니 작은 프로그램을 개발하는 데에는 여러 가지 제약이 있고 개발자에게 매우 불친절하다는 것을 알게 되었습니다. 불평할 점이 너무 많아서 여기서는 자세히 다루지 않고 다음에 특집으로 불평할 생각이다. 이번에는 주로 미니 프로그램의 사용자 정의 구성 요소에 대한 몇 가지 아이디어를 공유합니다. 미니 프로그램에서 제공하는 공식 프레임워크는 상대적으로 단순하고 원시적이며 재사용이 어렵고 사용자 정의 구성 요소의 기능을 구현하지 않습니다. 이로 인해 Vue 및 React Front를 사용하는 사람들이 많습니다. -개발이 매우 불편합니다. 인터넷에는 여러가지 불만사항이 있고, 커스텀 컴포넌트를 구현하는 방법도 공유되고 있지만, 위챗 애플릿이 업그레이드된 이후에는 너무 복잡하거나 호환되지 않는다는 점은 어쨌든 논할 수 없는 온갖 함정입니다. 여기에서는 수정과 비판을 환영하며 서로에게서 배울 수 있는 방법을 공유하고 싶습니다.

toast 사용자 정의 구성 요소 구현

• 다음은 가장 간단한 토스트 구성 요소를 예로 든 것입니다.

• 공식 프레임워크는 페이지 템플릿 기능만 제공합니다. WXML은 템플릿(템플릿)을 제공하며, 그러면 템플릿 조각이 다른 위치에서 호출됩니다.

• 하지만 이 기능은 js, 스타일 캡슐화를 지원하지 않으므로 해당 페이지에서 처리해야 하며 템플릿에도 자체 범위가 있으므로 데이터를 사용하여 전달해야 합니다.

• 함수를 페이지와 독립적이어야 하는 독립 구성 요소로 캡슐화합니다. 이를 사용할 때 구성 요소를 해당 페이지에 마운트해야 구성 요소가 이(페이지) 개체를 페이지에 전달해야 합니다. 코드는 다음과 같습니다
  

목차 구조

|------컴포넌트
                                                     -toast.wxss


Code

toast.wxml

<template name=&#39;toast&#39;>
  <view class="s-toast" wx:if="{{msg}}">
    <view class="s-toast-content">{{msg}}</view>
  </view>
</template>

toast.js

/**
 * toastMsg 必传 提示内容
 * showTime 非必传 显示时间秒
*/
function toast(page, toastMsg, showTime) {
  let timer
  page.setData({ toastMsg })
  showTime = showTime || toastMsg.length / 4
  console.log(showTime)
  clearTimeout(timer)
  timer = setTimeout(() => {
    page.setData({ toastMsg: '' })
    clearTimeout(timer)
  }, showTime * 1000)
}

module.exports = {
  toast: toast,
}
toast.wxss
.s-toast-content {
  position: fixed;
  left: 50%;
  color: #fff;
  width: 500rpx;
  bottom: 120rpx;
  background: hsla(0,0%,7%,.7);
  padding: 15rpx;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 4rpx;
  z-index: 6999;
}

사용법

1.wxml 참조 페이지 템플릿

2.js 파일 참조 toast.js

import { toast } from '../../../project/component/toast/toast.js'

3.

toast(this, '填写详细信息')

호출 및 추가 확장

토스트 확인 로딩이 있을 예정입니다. .

toast(this,'填写详细信息'')

가

toast('填写详细信息'')

가 되는 것과 같은 모든 구성요소를 사용하면 동일한 아이디어로 vue에서 믹싱과 유사한 결과를 얻을 수 있습니다. mixin 기능은 복잡한 비즈니스 프로젝트에서 코드의 재사용성과 유지 관리성을 크게 향상시킵니다.

회사의 작은 프로그램을 개발하는 사람은 저뿐이에요. 여러 사람이 함께 작은 프로그램을 개발하는 상황이 없어서 이런 부분에는 별로 노력을 기울이지 않아요.

위 내용은 WeChat 미니 프로그램의 맞춤형 구성 요소에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!