이 섹션에서는 이미하여 HelloWorld를 만들기 전에, 즉, WePY 간단한 프로젝트를 만들고 사용하는 방법에 대해 설명합니다.
1.6.1는하여 HelloWorld 프로젝트 만들기
우리는 먼저 CMD 명령 행 쉘 도구 또는 프로젝트 디렉토리 아래에 입력 "CD 디렉토리"명령을 사용하여 같은 터미널을 사용 후, 사용의 코드 편집기에서 새 프로젝트를 작성해야합니다.
실행 : wepy 초기화 표준하여 HelloWorld, 성공적인 구현 후 선택한 구성은 그림 1-27에 표시된 프로젝트의 일부 초기 구성을 수행합니다.
그림 1-27 WePY 프로젝트 만들기
AppID가 및 기타 콘텐츠는 마이크로 채널 애플릿 자체에 직접 작용하지 않는다 여기에 구성되어 있지만, project.config.json 파일 WePY 프로젝트에 기록됩니다. 프로젝트 구성 project.config.json 콘텐츠에 도시 된 바와 같이 다음과 같다.
{
"description": "A WePY project",
"setting": {
"urlCheck": true,
"es6": false,
"postcss": false,
"minified": false
},
"compileType": "miniprogram",
"appid": "touristappid",
"projectname": "hello",
"miniprogramRoot": "./dist"
}프로젝트의 폴더에있는 모든 파일을 볼 수있는 프로젝트를 만들 성공을 기다립니다하지만,이 프로젝트는 프레임 워크를 가지고이 시간은 여전히 NPM 프로젝트 종속성을 설치하는 설치 명령을 사용하여 컴파일 할 수 없습니다.
설치 완료를 기다린 후, 효과는 그림 1-28에 표시된.
도 설치 1-28 NPM
참고 : 오류가없는 경우 코드의 작동에 영향을주지 않습니다,이 메시지의 단지 경고가 아닌 현재 버전을 설치할 때,하지만 보안을 보장하기 위해, 권장되는 최신 버전으로 적시 업그레이드.
다음으로, 다음은 개발을 시작하는 코드 변경 사항을 모니터링 명령을 사용할 수 있습니다 자동화 된 빌드, 코드가 변경되면 다음 프로젝트 것, 코드를 변경 -watch 시작 매개 변수를 자동으로 모니터가 사용하여 그림 1-29에 표시된 컴파일 결과 다시 빌드합니다.
wepy build –watch
그림 1-29 시작 컴파일
자동으로 컴파일 한 후,이 폴더는 애플릿 코드를 저장, 컴파일 된 프로젝트 파일을 저장할 프로젝트 폴더의 dist 폴더에 생성합니다.
열기는 다시 WePY의 DIST 폴더에 의해 생성을 선택 새로운 테스트 프로젝트, 프로젝트 주소, 그림 1-30에 표시된 구성을 만들, 개발자 도구를 애플릿.
그림 1-30 새로운 애플릿 만들기
这样就完成了创建一个WePY项目的步骤，下一小节学习如何在WePY项目中编写一个HelloWorld项目。启动完成后，可以看到开发者工具中显示出当前的小程序模板，但是在调试器中却出现报错信息，并且功能无法使用，其调试器显示效果如图1-31所示。
图1-31 错误信息
这主要是WePY项目和原生小程序对于代码的不同处理方式造成的，只需要点击开发者工具的右上方，取消ES6转ES5、上传代码时样式自动补全、上传代码自动压缩混淆这3个选项，具体的配置信息如图1-32所示。
图1-32 调整配置
这样该项目就成功运行了。
1.6.2 编写页面代码
在WePY项目基本的文件系统中，文件夹src存放着所有的代码文件。一般而言，在src/pages文件夹中存放的内容是项目的页面文件，而在src/components文件夹中存放的是页面所用到的组件文件，在src/mixins文件夹中存放的是项目使用到的一些公用方法文件。
首先，需要创建一个页面路径。
和之前创建一个小程序的路径一致，想要在WePY中创建一个页面路径，需要在app.wpy中声明，在config中增加一个新页面。修改后的代码如下，其实在编译后，该字段会生成为app.json文件。
config = {
pages: [
'pages/index',
'pages/helloWorld'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}更新页面路径之后，应该在pages文件夹下创建一个页面文件helloWorld.wpy。
所有的页面文件在创建时，都可以使用以下模板文件。
<style lang="less">
// 页面所用到的样式以及引入的样式文件
</style>
<template>
<view>
// 页面的结构、节点元素
</view>
</template>
<script>
// 页面的逻辑代码部分
import wepy from 'wepy'
export default class HelloWorld extends wepy.page {
components = {}
mixins = []
data = {}
methods = {}
events = {}
onLoad() {
}
}
</script>从上述模板可见，WePY项目最后构建时，会将一个页面文件拆分成3个文件：样式部分会拆分成.wxss后缀的样式文件；页面部分会拆分成后缀为.wxml的文件；逻辑部分会拆分成后缀为.js的JavaScript文件。
该项目的页面依旧显示简单的“Hello World”字样，让其包裹在<text></text>元素中，其完整的页面代码如下所示。
<style lang="less">
</style>
<template>
<view style="text-align: center">
<text>{{wordData}}</text>
</view>
</template>
<script>
import wepy from 'wepy'
export default class HelloWorld extends wepy.page {
data = {
wordData: "Hello World!"
}
}
</script>这样，使用Ctrl+s进行保存后，会自动重新生成展示的小程序，可以在微信开发者工具中看到其自动重启编译的信息。
다음으로, 컴파일러를 사용하여,이 페이지를 보려면 "일반 컴파일"메뉴를 클릭, 그림 1-33에 표시된 드롭 다운 메뉴에서 "편집 모드 추가"를 선택하는 작은 응용 프로그램 개발자 도구를 제공합니다.
그림 1-33 새 편집 모드 추가
'페이지 / 인 helloWorld'그림 1-34에 표시된 페이지 컴파일러 경로를 추가하고 "OK"버튼을 클릭, 애플릿이 자동으로 컴파일을 다시 시작합니다.
1-34 새로운 편집 모드 그림
개발 및 WePY 프레임 워크 개발을위한 공식 도구 :이 시점에서 그림 1-35에 나타난 결과 페이지 그래서, 우리는 두 가지 방법으로 작은 프로그램의 개발을 완료했다.
그림 1-35 페이지 표시
그것을 "WePY, mpvue로, 타로 효율적인 애플릿을 만들 마이크로 채널 애플릿 프로젝트 개발 전투"를 함께 학습 작은 마이크로 채널 방법, 우회, 효율적인 개발의 구조적 개발 프로그램.
