《微信小程序项目开发实战：用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打造高效的小程序》吧。