微信小程序wepy框架笔记小结

什么是wepy框架

wepy是一个类Vue框架的微信小程序框架，它封装了很多常见的操作，方便我们快速开发小程序，同时还支持组件化开发。

wepy框架的优点

• 代码结构清晰明了，易于维护
• 支持组件化开发，方便复用
• 支持ES6/7标准语法，提高开发效率
• 自带脚手架，快速初始化项目

wepy框架的基本使用

安装wepy

npm install wepy-cli -g

初始化项目

wepy init standard myproject
cd myproject
npm install

编译项目

npm run dev

编写wepy组件

新建一个组件

wepy new Hello --type=page

该命令将会在src/pages下新建Hello.wpy。

组件结构

wepy组件由三个部分组成：模板、样式和逻辑。以下是Hello.wpy的示例代码：

<template>
  <div class="hello">
    <h1>{{title}}</h1>
  </div>
</template>

<script>
  import wepy from 'wepy';

  export default class Hello extends wepy.page {
    data = {
      title: 'Hello World'
    };
  }
</script>

<style scoped>
  .hello {
    font-size: 60rpx;
  }
</style>

引用组件

<template>
  <div>
    <Hello />
  </div>
</template>

<script>
  import wepy from 'wepy';
  import Hello from '../components/Hello';

  export default class Index extends wepy.page {
    components = {
      Hello // Hello: Hello
    };
  }
</script>

wepy的实际应用示例

示例一：调用API获取数据

<template>
  <div>
    <div class="item" v-for="item in itemList">
      <p>{{item.title}}</p>
      <p>{{item.author}}</p>
      <p>{{item.date}}</p>
    </div>
  </div>
</template>

<script>
  import wepy from 'wepy';

  export default class List extends wepy.page {
    data = {
      itemList: []
    };

    async getList() {
      const response = await wepy.request({
        url: 'https://jsonplaceholder.typicode.com/posts',
        method: 'GET'
      });
      this.itemList = response.data;
    }

    onShow() {
      this.getList();
    }
  }
</script>

<style scoped>
  .item {
    margin: 20rpx;
    padding: 20rpx;
    background-color: #eee;
  }
</style>

示例二：跳转到另一个页面

<template>
  <div>
    <div class="item" @click="goDetail(item.id)" v-for="item in itemList">
      <p>{{item.title}}</p>
      <p>{{item.author}}</p>
      <p>{{item.date}}</p>
    </div>
  </div>
</template>

<script>
  import wepy from 'wepy';

  export default class List extends wepy.page {
    data = {
      itemList: []
    };

    async getList() {
      const response = await wepy.request({
        url: 'https://jsonplaceholder.typicode.com/posts',
        method: 'GET'
      });
      this.itemList = response.data;
    }

    onShow() {
      this.getList();
    }

    goDetail(id) {
      wepy.navigateTo({
        url: `/pages/detail?id=${id}`
      });
    }
  }
</script>

<style scoped>
  .item {
    margin: 20rpx;
    padding: 20rpx;
    background-color: #eee;
  }
</style>

以上就是关于微信小程序wepy框架的基本介绍以及示例演示。希望对大家学习有所帮助。