미니 프로그램 개발 사양에 대해 얼마나 알고 계시나요?

소형 프로그램 개발 사양:

(학습 영상 공유: 프로그래밍 영상)

1. 디렉토리 개요

컴포넌트 파일

컴포넌트 관련 파일은 모두 컴포넌트 디렉토리에 위치합니다.

이미지 파일

프로젝트 이미지 파일은 루트 디렉터리의 이미지 폴더에, 컴포넌트 고유 이미지는 현재 컴포넌트 이미지 디렉터리에 위치합니다.

모델 파일

모델 파일은 주로 다양한 비즈니스 모델을 작성하는 데 사용됩니다. 프로젝트 모델 파일은 루트 디렉터리의 models 폴더에 위치하며, 컴포넌트 관련 모델은 컴포넌트 디렉터리의 models 폴더에 위치합니다.

동작 파일

동작 파일은 참조된 구성 요소의 디렉터리에 배치됩니다.

WXML 사양

1. WXML 사양

wxml 태그가 단독으로 나타날 수 있는 경우 <input />과 같이 단독으로 나타나도록 시도해 보세요.

<input />

읽고 탐색하기 쉽도록 각 줄의 HTML 코드 수를 50자 이내로 제어하세요. 중복 코드는 줄 바꿈되고 태그 속성은 줄 바꿈됩니다.

<v-music
wx:if="{{classic.type===200}}"
img="{{classic.img}}"
content="{{classic.content}}"
>
</v-music>

분리된 콘텐츠를 적절하게 표시하고 인라인 스타일을 사용하지 마세요.

//推荐使用
<image class="tag"></image>

2. 사양 설명

컴포넌트를 제외한 다른 블록 수준 요소는 해당 기능을 주석 처리해야 하며, 다른 코드와 구별하기 위해 위와 아래에 한 줄을 남겨야 합니다.

<view>...</view>
//导航栏
<view>...</view>
<view>...</view>

CSS 사양

1. CSS 사양

개발 과정에서 rpx와 px를 모두 사용할 수 있습니다. 예를 들어 일반적으로 rpx는 간격으로 사용되고 px는 글꼴 크기와 테두리로 사용됩니다. 실제 상황.

width: 100rpx;
font-size: 14px;

CSS 코드에는 명확한 코드 들여쓰기가 있어야 합니다. 각 스타일 클래스 사이에 한 줄을 비워 두세요.

.v-tag{
width: 100%;
}
.v-container{
width: 100%;
}

축약된 속성을 사용하고 동일한 속성을 함께 배치하여 혼란을 피하세요.

/**使用简写属性**/
.v-image{
margin: 0 auto;
}
/**同一属性放在一块**/
.v-tag{
margin-left: 10rpx;
margin-right: 10rpx
}

레이아웃에는 flex를 사용하고, float 및 수직 정렬은 금지됩니다.

.container{
disaplay: flex;
flex-dirextion: row
}

2. 댓글 사양

wxss 규칙 그룹 간에는 블록 댓글을 사용하세요. 코드 바로 뒤에 주석을 달지 마세요.

/** 修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}

JS 사양

1. JS 사양

Naming 사양

변수 이름과 함수 이름은 일률적으로 카멜 케이스 명명 방식을 채택합니다. 일반적인 상황에서는 함수 이름 접두어에 명확한 동사를 추가하여 함수를 표시해야 합니다. , 개인 기능이나 속성에는 밑줄이 그어져 있습니다. 상수는 const로 선언해야 합니다.

클래스명의 첫 글자는 대문자로 표기해야 합니다.

ES6 키워드 let을 사용하여 변수를 정의하고, var

//定义常量
const a = 1
//定义变量
let imageContent =  res.data
//函数命名
getInfo:function(){
return '';
}
//私有函数
_getInfo:function(){
return '';
}

Callback 함수 사양을 사용하지 마세요.

Callback 함수는 Promise 함수를 사용하여 균일하게 작성됩니다. 성공적인 콜백을 위한 매개변수는 균일하게 res이고, 오류 매개변수는 err입니다.

// promise 处理回调
let back = new Promise((resolve, reject) => {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
back.then((res) => {
console.log('成功回调！', res);
}).catch((err) => {
console.log('失败回调！', error);
});

개인 함수와 콜백 함수는 라이프 사이클 함수 뒤에 균일하게 배치됩니다.

js 파일에서 사용하지 않는 라이프 사이클 함수를 삭제하여 코드를 깨끗하게 유지하세요.

Pages({
data:{
},
onLoad:function(event){
},
_self:function(){
}
})

각 함수 사이에 빈 줄을 사용하여 구조를 구분하세요.

데이터 바인딩 변수 정의 사양

데이터 바인딩에 관련된 모든 변수는 데이터에서 초기화되어야 합니다. Data를 정의하지 않고 직접 setData를 설정하는 것은 금지되어 있습니다.

Pages({
data:{
id : null
},
onLoad:function(event){
let id = event.target.dataset.id
this.data.id = id
}
})

클릭이벤트 사양

클릭이벤트 기능의 네이밍 방식은 +이벤트명 또는 업체명으로 되어있습니다.

onLike: function(event){
}

컴포넌트 사양

컴포넌트 이름 명명 사양

컴포넌트 사용 시 컴포넌트 이름은 "v-"로 시작됩니다. 컴포넌트 이름이 여러 단어 이름으로 이어져 있는 경우 '-'를 사용하여 연결하세요. 페이지 페이지에서 구성 요소 태그를 사용할 때 단일 닫는 태그를 사용하는 것이 좋습니다(이 제약 조건은 슬롯을 포함하는 구성 요소에는 유효하지 않습니다)

<v-movies />

트리거 이벤트 사양

구성 요소 클릭 트리거 이벤트를 구분하려면 콜론을 사용하는 것이 좋습니다

자동 감지

<v-component-tag-name bind:myevent="onMyEvent" />

externalClasses 이름 지정 사양

이름 지정 형식은 다음 형식을 채택합니다: v-class-{name}, 이름은 직접 정의할 수 있습니다

v-class-icon

구성 요소 스타일 사양

팀에서 제작한 모든 구성 요소 스타일을 작성해야 합니다. in class, 이름은 v로 시작해야 함 - 처음에는 인라인 스타일, id 스타일은 허용되지 않습니다

.v-container{
disaplay: flex;
flex-dirextion: row
}

구두점 사양

JS 문은 세미콜론으로 끝나지 않아도 되며, 세미콜론은 일률적으로 생략됩니다

일관되게 JS에서는 백틱 `` 또는 작은따옴표 ''를 사용하고, 큰따옴표 따옴표는 사용하지 마세요.

WXML, CSS, JSON에서는 큰따옴표를 사용해야 합니다.

CSS 속성의 콜론은 공백으로 구분됩니다.

일관적인 들여쓰기 적용(공백 4개)

일관적인 줄 바꿈 스타일 적용('unix'),

관련 권장 사항: Mini 프로그램 개발 튜토리얼

위 내용은 미니 프로그램 개발 사양에 대해 얼마나 알고 계시나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!