本節將介紹如何使用WePY創建一個最簡單的項目，也就是之前已經創建過的HelloWorld。
1.6.1 創建HelloWorld項目
首先需要在使用的代碼編輯器中新建一個項目，之后使用CMD命令行工具或者是終端shell等使用“cd 文件目錄”的命令進入到該項目目錄下。
執行：wepy init standard HelloWorld，執行成功后會對該項目進行一些初始化配置，這里選擇的配置如圖1-27所示。
圖1-27 創建WePY項目
這里配置的AppID和其他的內容並不能直接作用於微信小程序本身，而是會記錄在WePY項目的project.config.json文件中。該工程項目配置的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 install命令安裝項目依賴。
等待安裝完成后，效果如圖1-28所示。
圖1-28 npm安裝完成
注意：安裝時如果沒有報錯，僅僅是警告非最新的版本，這樣的提示並不會影響到代碼的運行，但是為了保證安全性，還是推薦及時升級到最新的版本。
接下來，可以使用以下命令來啟動開發時監控代碼改動自動構建功能，其編譯效果如圖1-29所示，使用—watch參數啟動，會自動監控代碼的改動，一旦代碼有改動，那么項目會重新構建。
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 添加新的編譯模式
添加'pages/helloWorld'頁面為編譯的路徑，如圖1-34所示，並且單擊“確定”按鈕，小程序會自動重啟編譯。
圖1-34 新編譯模式
此時頁面效果如圖1-35所示，這樣，我們就完成了小程序開發的兩種方式：官方工具開發和WePY框架開發。
圖1-35 頁面顯示效果
微信小程序的結構化開發方法，少走彎路，高效開發，一起來學習《微信小程序項目開發實戰：用WePY、mpvue、Taro打造高效的小程序》吧。
