This section describes how to use WePY create a simple project, that is, before already created a HelloWorld.
1.6.1 Creating the HelloWorld project
We first need to create a new project in the code editor in use, after using the CMD command-line shell tool or a terminal such as using "cd directory" command to enter under the project directory.
Execution: wepy init standard HelloWorld, after the successful implementation does some initial configuration of the project, where the selected configuration shown in Figure 1-27.
Figure 1-27 Creating WePY project
AppID and other content configured here does not act directly on the micro-channel applet itself, but will be recorded in the project.config.json file WePY project. As shown in project.config.json content of the project configuration is as follows.
{
"description": "A WePY project",
"setting": {
"urlCheck": true,
"es6": false,
"postcss": false,
"minified": false
},
"compileType": "miniprogram",
"appid": "touristappid",
"projectname": "hello",
"miniprogramRoot": "./dist"
}Wait for success to create a project, you can see all the files in the folder of the project, but this time the project has only a framework, it is still unable to compile, use npm install command to install the project dependencies.
After waiting for the completion of the installation, the effect shown in Figure 1-28.
FIG installation 1-28 npm
Note: When you install if there is no error, just a warning non-current version of this prompt does not affect the operation of the code, but in order to ensure security, it is recommended that timely upgrade to the latest version.
Next, the following may be used to monitor code changes command to start the development of automated builds, compiled results shown in Figure 1-29, using -watch start parameters, it will automatically monitor change the code, once the code has changed, then the project will rebuild.
wepy build –watch
Figure 1-29 start compiling
After automatically compiles, generates in a project folder dist folder to store the compiled project file, this folder is stored applet code.
Open again applet developer tools, create a new test project, the project addresses, select generated by WePY dist folder, the configuration shown in Figure 1-30.
Figure 1-30 Creating a new applet
这样就完成了创建一个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进行保存后，会自动重新生成展示的小程序，可以在微信开发者工具中看到其自动重启编译的信息。
Next, using the compiler features small application developers tool to view this page, click on "ordinary Compile" menu, select "Add compilation mode" in the drop-down menu, shown in Figure 1-33.
Figure 1-33 Add a new compilation mode
Add 'pages / helloWorld' page compiler path, shown in Figure 1-34, and click "OK" button, the applet will automatically restart compilation.
Figure 1-34 New compilation mode
At this point the results page shown in Figure 1-35 so, we completed the development of small programs in two ways: the official tool for development and WePY framework development.
Figure 1-35 page display
Structured development program of small micro-channel method, detours, efficient development, learning together "micro-channel applet project development combat: with WePY, mpvue, Taro create efficient applet" it.
