手把手小程序开发【2-WePY之Hello World】】

Lemon黄

发布于 2019-10-08 17:46:34

5990

发布于 2019-10-08 17:46:34

文章被收录于专栏：Lemon黄

名人之声

我并不同意你的观点，但是我誓死捍卫你说话的权利

——伏尔泰

上一节，由于篇幅冗长，小程序之Hello World也就没来得及尝试一番，这节我们就来实践下吧。

wepy 目录结构

安装完wepy项目后，我们还没有说过，wepy在项目创建成功之后，项目中一些文件夹或者文件的主要作用，如下，就是wepy项目创建后完整的目录结构：

目录主要结构说明如下：

dist:编译后的小程序文件
src/pages: 用于存放页面文件
src/components: 用于存放页面所使用的组件文件
src/mixins: 用于存放项目所使用的一些公关方法文件

wepy 之 HelloWorld

在开始之前，记得开启自动编译哦。

如下我是在PHPStom编辑器自带命令行中开启：

wepy build --watch

1、创建页面路径

在app.wpy文件中，在config中增加一个新的页面：在编译以后，如下的代码会生成在dist中的app.json文件中。

config = {
    pages: [
      'pages/index',
      'pages/helloworld'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

2、页面模板

更新页面路径之后，由于项目会自动编译的，我们查看小程序会有如下报错：

所以我们在项目中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>

从上面的模板可以知道，项目编译时，模板文件会分成3个文件：样式部分会生成后缀为.wxss的样式文件；页面结构部分会生成后缀.wxml文件；逻辑部分会生成后缀为.js的JavaScript文件。

3、创建页面文件helloworld.wpy

helloworld.wpy完整代码如下：

<style lang="less">
</style>
<template>
  <view>
  <text>{{text}}</text>

  </view>
</template>

<script>
  import wepy from 'wepy'

  export default class HelloWorld extends wepy.page{
    components = {}

    mixins = []

    data = {
        text:"Hello World"
    }

    methods = {}

    events = {}

    onLoad (){

    }
  }
</script>

4、小程序编译

接下来，我们用微信开发者工具中的编译功能来查看该页面，单机“普通编译”菜单项，在下拉菜单选择“添加编译模式”，如下：