miniprogram template

미니프로그램 템플릿

TypeScript 및 VSCode를 사용한 모범 사례인 wechat 미니 프로그램 템플릿 프로젝트

[미니 프로그램 빌드 도구를 사용하여 빌드된 미니 프로그램 템플릿(TypeScript+VSCode)에 대한 모범 사례]

---

필수 [필수 환경]

• nodejs: npm >= 6.0 (또는 yarn ) Node >= 10
• 편집기: VSCode
• Wechat-Devtools: 미니 프로그램 개발 도구(및 오픈服务端口)

빠른 시작 [사용]

1. 프로젝트 생성 [원클릭으로 새 프로젝트 생성]

한 번의 클릭으로 이 템플릿을 사용하려면 이 템플릿 사용을 클릭하거나 다음 명령줄을 사용하세요.

 # 不指定`[本地目录]`则在当前目录创建,`-n`表示使用最新模板
npm create miniprogram NewFuture/miniprogram-template -n [本地目录]
# 或者
# yarn create miniprogram NewFuture/miniprogram-template -n [本地目录]

2. 시작 [프로젝트 파일에서 실행]

 # cd [本地目录名]
npm start
# 或者
# yarn start

정상적으로 시작된 후 디버깅 도구는 자동으로 dist 미리보기를 엽니다.

스크립트 [명령어]

npm yarn 으로 대체 가능

• npm start : 프로젝트를 다시 컴파일하고 실시간으로 업데이트합니다. [별칭 npm run start ]
  • npm run start:test : 개발을 위해 테스트 환경 구성 파일을 사용합니다.
  • npm run start:prod : 개발을 위해 빌드 환경 구성 파일을 사용합니다.
• npm run upload : 미니 프로그램 백그라운드에 프로젝트를 패키징하고 업로드합니다(개발 환경 구성).
  • npm run upload:test : 테스트 환경 구성을 사용하여 프로젝트를 패키징하고 미니 프로그램 배경에 업로드합니다.
  • npm run upload:prod : 빌드 환경 구성을 사용하여 프로젝트를 패키징하고 미니 프로그램 배경에 업로드합니다.
• npm run build : 리패키징 및 컴파일(개발 환경 구성)
  • npm run build:test : 재패키징 및 컴파일
  • npm run build:prod : 재패키지 및 컴파일
• npm test : 테스트 [별칭 npm run test ]
• npm run check : 코드 스타일 및 형식 검사(다른 언어로 별도의 lint 검사 지원)
• npm run fix : 수정 가능한 린트 및 코드 스타일 문제를 자동으로 수정합니다.
• npm run help : 컴파일 도구 mp의 자세한 사용법을 봅니다.

모든 바로가기 명령 package.json

다중 환경 [다중 환경 설정]

각 환경을 다르게 구성 가능(필요에 따라 환경 구성을 늘리거나 줄일 수 있음)

• .mpconfig.jsonc 개발 통합 환경
• env/test.jsonc 테스트 환경 구성
• env/prod.jsonc 온라인 프로덕션 환경 구성

환경이 하나만 있는 경우 env 디렉터리를 삭제하고 .mpconfig.jsonc

코딩 [코딩]

언어[프로그래밍 언어]

JS

• .ts (TypeScript) 또는 .js (JavaScript)( ts 권장 )
• Eslint + Prettier는 코드 스타일과 자동 서식을 확인합니다.
• TS는 / 절대 경로 형식 가져오기를 지원합니다.

wxml

• .wxml 또는 .html
• Htmlhit + Prettier는 코드 스타일과 자동 서식을 확인합니다.
• 코드 확인 및 서식 지정에 vscode-minapp 사용

wxss

• .scss , .sass 또는 .css ( scss 권장)
• Stylelint + Prettier는 코드 스타일과 자동 서식을 확인합니다.
• 지정된 순서로 CSS 속성을 자동으로 정렬합니다.
• scss 자산 디렉토리의 내용을 직접 @import 할 수 있습니다.

JSON

• .jsonc , .json 또는 .json5 주석 지원
• 더 예쁜 코드 검사 및 자동 서식 지정

wxs

• .wxts (TypeScript), .wxs (JavaScript)( wxts 권장)
• 더 예쁜 코드 검사 및 자동 서식 지정
• miniprogram-wxs 유형 검사 및 검증을 수행합니다.

편집자 [편집자]

VSCode 사용하여 권장 플러그인 자동 설치

1. 처음 사용할 때 안내에 따라 권장 플러그인을 자동으로 설치합니다.
2. 모든 플러그인이 구성되었으며 코드 확인 프롬프트가 자동으로 수행되며 저장 시 자동으로 복구됩니다.
3. 새 Page , Component , wxs 생성하면 자동으로 템플릿 파일이 생성됩니다(템플릿은 수정 가능).

CI [지속적 통합]

Auzre Pipelines, Travis CI 및 Github Actions는 기본적으로 구성되어 있으며 필요에 따라 열고 수정할 수 있습니다.

• Azure Pipelines 필요에 따라 azure-pipelines.yml 구성을 수정합니다.
• Travis-CI는 필요에 따라 Configuration.travis.yml을 수정합니다.
• Github 작업 필요에 따라 구성을 수정합니다.github/workflows/nodejs.yml