《微信小程序項目開發實戰：用WePY、mpvue、Taro打造高效的小程序》（筆記2）WePY版HelloWorld

本節將介紹如何使用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轉ES五、上傳代碼時樣式自動補全、上傳代碼自動壓縮混淆這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打造高效的小程序》吧。