미니프로그램을 보다 원활하고 빠르게 개발할 수 있는 작고 아름다운 미니프로그램 발판
- hzc앞으로
- 2020-06-16 10:19:442934검색
오늘은 제가 직접 개발한 작은 프로그램 개발 비계를 추천해 드립니다. 거의 1년 동안 사용해 왔고 앞으로도 계속 업데이트될 예정입니다.
비교해 보세요. 현재 시중에 나와 있는 다양한 크로스 플랫폼 플랫폼 최종 솔루션인 이 개발 프로세스는 더욱 순수하고, 새로운 개발 어려움이 없으며, 네이티브 미니 프로그램을 기반으로 개발 효율성을 완전히 향상시킵니다~
pandora-boierpalte-wechat 작고 아름다운 WeChat 미니 프로그램입니다. 스캐폴딩을 개발할 때 새로운 복잡성을 도입하지 않고 미니 프로그램을 100% 사용할 수 있지만 일반 웹 개발에 비해 미니 프로그램 개발자 도구의 단점을 보완하여 WeChat 미니 프로그램 개발이 더 쉬워졌습니다.
다음과 같은 향상된 기능을 지원합니다.
더 적은 사전 컴파일된 작성 스타일, 자동으로 wxss로 변환
자동으로 async/await 종속성 도입
-
dev/test/pre/prod 다중 환경 구성
npm 종속성, 일반 웹 프로젝트처럼 npm 패키지를 사용하고 나머지는 스캐폴딩에 맡기세요
모듈 별칭, 더 이상 js 모듈을 소개하기 위해 상대 경로를 사용할 필요가 없습니다
아이콘 글꼴 파일, 작은 아이콘 직접 글꼴 파일을 사용하려면
IconFont사이트로 이동하여 원하는 svg 파일을 다운로드할 수 있습니다IconFont站点下载喜欢的 svg 文件我们默认集成了有赞提供的
vant-weapp来小程序组件库，只需pa i f3fc15c0228dc320ab4107d8220f2b42- 에서 제공하는
vant-weapp미니 프로그램 구성 요소 라이브러리를 통합했습니다. Youzan은 기본적으로pa i a1dd47caa36f427949e17d92b832da61를 통해서만 필요한 구성 요소와 해당 종속성을 프로젝트 - 템플릿 파일 생성
pandora-cli를 사용하는 것이 좋습니다.
적은 용도
사실 이것에 대해서는 더 말할 필요가 없습니다. 단지 wxss 파일을 대체할 더 적은 파일을 생성하면 됩니다.
자동으로 async/await 종속성 도입
스캐폴딩 구성 스크립트는 async 및 Wait 키워드가 코드에 사용되는지 여부를 자동으로 분석합니다. 사용하는 경우 의존하는 타사 라이브러리가 자동으로 최종 라이브러리에 도입됩니다. 코드를 생성하므로 안심하고 async/await 구문을 사용할 수 있습니다.
다중 환경 구성 미니 프로그램 프로젝트가 초기화된 후 config/app.yaml에서 다중 환경을 구성할 수 있습니다. 자세는 다음과 같습니다. app.yaml 구성 내용은 다음과 같습니다.
appId: 'wxxxxxxxxx'
appName: 'test-pandora'
version: '1.0.0'
development:
env: 'development'
host: 'https://api.dev.com'
test:
env: 'test'
host: 'https://api.test.com'
preproduction:
env: 'preproduction'
host: 'https://api.pre.com'
production:
env: 'production'
host: 'https://api.prod.com'프로젝트가 시작된 후, 즉 pa 시작 후 app.yaml 파일의 모든 업데이트 및 수정이 자동 컴파일을 트리거합니다In 다음에 소개하는 import config from 'config'config 객체는 우리가 다양한 환경을 통해 구축한 구성 파일입니다. 예를 들어 pa start가 시작된 후 우리가 얻는 구성 객체는 다음과 같습니다.
{
appId: 'wxxxxxxxxx',
appName: 'test-pandora',
version: '1.0.0',
env: 'development',
host: 'https://api.dev.com'
}pa build --env 테스트를 사용하면 우리가 얻는 구성 객체는 다음과 같습니다: {
appId: 'wxxxxxxxxx',
appName: 'test-pandora',
version: '1.0.0',
env: 'test',
host: 'https://api.test.com'
}npm에 따라 다름이 스캐폴딩은 다음과 같은 이유로 미니 프로그램에서 공식적으로 제공하는 npm 빌드 기능을 사용하지 않습니다. - pandora-boilerpalte-wechat 스캐폴드를 개발할 때 npm은 공식적으로 지원되지 않습니다
- 공식 npm 기능에는 node_modules가 필요합니다. 디렉터리는 미니 프로그램의 루트 디렉터리에 위치하며 이는 현재 스캐폴딩 디렉터리 규칙과 충돌하며 다음과 같습니다. 일반적인 웹 프로젝트 구조와 다릅니다
pa i <pkg> --npm 或者 npm i <pkg>위 두 가지 방법 모두 해당 pkg의 최신 버전을 프로젝트 node_modules
Component library
에 설치할 수 있습니다. 우리는 오픈 소스 vant-weapp 애플릿 구성 요소 라이브러리를 통합했습니다. 이를 사용할 때 pa 명령을 통해 필요한 구성 요소만 설치하면 됩니다. 다음으로 필요한 모든 종속 항목을 사용자 정의할 수 있습니다. 애플릿에 따른 구성요소를 한 번의 제스처만으로 사용할 수 있어 미니 프로그램 개발의 효율성이 극대화됩니다. 예를 들어, 대화 상자 구성 요소를 설치하려는 경우
pa i dialog이 명령은 vant-weapp 라이브러리의 대화 상자 구성 요소와 해당 종속성만 프로젝트 src/compnents에 자동으로 설치합니다.
모듈 별칭
은 프로젝트 업데이트 디렉터리의 build.config.js 파일에 구성됩니다. 프로젝트의 디렉터리에 대한 별칭을 구성하고 소스 코드에서 별칭 참조를 사용할 수 있습니다.
아이콘 글꼴 지원
Alibaba IconFont 공식 웹사이트로 이동하여 원하는 아이콘 SVG 파일을 프로젝트 루트 디렉터리에 다운로드하면 빌드가 자동으로 글꼴 파일을 생성하여 프로젝트에 인라인으로 사용할 수 있습니다. 다음과 같이. 아이콘 디렉터리에는 다음과 같은 파일이 있습니다wechat.svgwxml 파일에서 icon-font가 필요한 해당 태그
<text class="icon-font icon-font_wechat"></text>에 다음 클래스를 추가하면 되고 두 번째 유형은 icon-로 구성됩니다. 글꼴_40deb180db7d49f902c5faa91928fa66물론 이 요소에 다른 스타일을 추가할 수도 있습니다🎜
样板文件创建
创建组件
pa c component demo 或者 pa create component demo
创建好的文件会自动位于项目 src/components 中
创建页面
pa c page demo 或者 pa create page demo
创建好的文件为自动位于项目 src/pages 中
CICD支持
在项目根目录下执行以下命令可以自动发布项目到小程序后台
pa release <version-type> -m '<comments>'
其中 version-type 为 major, minor, patch 可以参考 npm version 语义化版本
comments 为此次发布的描述，必填。
这里需要注意的是，pa release 使用的是小程序开发者工具的 HTTP 接口，所以务必保证小程序开发者工具启动，并且 设置 -> 安全 -> 安全（服务端口）开启
推荐教程：《微信小程序》
위 내용은 미니프로그램을 보다 원활하고 빠르게 개발할 수 있는 작고 아름다운 미니프로그램 발판의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!