wepy框架搭建小程序

我们都知道，小程序对组件化开发并不友好，腾讯自己的 团队就搞出了一个wepy框架。我们先看下wepy的介绍;

既然说自己是最受欢迎的小程序 框架，我们就来安装使用一下吧;

步骤 ：

1：npm install wepy-cli -d（推荐cnpm。淘宝镜像比较快）

2. wepy new myproject(你会发现这句代码会实现不了你项目的 创建)。因为已经改成了：

     wpey init standard myproject；

3.cd myproject进去项目文件夹

4.cnpm install 安装  依赖

5.wepy build --watch开启实时编译；

然后 就可以看下代码结构 了。

├── dist                   小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules           
├── src                    代码编写的目录（该目录为使用WePY后的开发目录）
|   ├── components         WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
|   |   ├── com_a.wpy      可复用的WePY组件a
|   |   └── com_b.wpy      可复用的WePY组件b
|   ├── pages              WePY页面目录（属于完整页面）
|   |   ├── index.wpy      index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
|   |   └── other.wpy      other页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
|   └── app.wpy            小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json           项目的package配置

可能你看不到components文件，最近应该是改了。

用微信开发者工具，打开项目，就可以看到运行的初始结果了。在微信开发者工具中是无法修改wpy文件的

由于vscode并没有支持wpy文件的代码高亮显示，你需要先在扩展中下载一个vuter-wepy的插件，显示代码高亮，有利于开发。

我们可以清楚的看到：在index.wpy中有：style ;template；script三个标签。是不是和vue的开发风格很像；

<style lang="less">
</style>
<template>
  <view class="container">
    Hello world
  </view>
</template>

<script>
  import wepy from 'wepy'

  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: 'test'
    }
    onLoad() {
      console.log('onLoad')
    }
  }
</script>

然而，我们在微信开发者工具中看到的目录结构是这样的：

我们不难发现：我们在template中写的结构，对应了index.wxml里面的内容；在style里面写的内容对应到了index.wxss里面；

script里面的内容对应了index.json和index.js。嗯，就这样