1.6 實戰2：WePY版Hello World

本節將介紹如何使用WePY創建一個最簡單的項目（也就是之前已經創建過的Hello World）。

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參數啟動，會自動監控代碼的改動，一旦代碼有改動，項目會重新構建。

圖1-29 啟動編譯

wepy build -watch

自動編譯后，會在項目文件夾中生成一個dist文件夾，用于存放編譯后的項目文件（這個文件夾中存放的是小程序代碼）。

再次打開小程序開發者工具，新建一個測試項目，項目的地址則選擇由WePY生成的dist文件夾，配置如圖1-30所示。

圖1-30 創建新的小程序

這樣就創建了一個WePY項目。項目啟動后，可以看到開發者工具中顯示出當前的小程序模板，但是在調試器中卻出現報錯信息，并且功能無法使用，其調試器顯示效果如圖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 頁面效果