了解微信小程序WePY

WePY 作用

WePY 是由腾讯推出并开源的一个微信小程序开发框架，旨在解决原生小程序开发中的痛点，提供更优化的开发体验。

核心作用：

• 类 Vue 开发体验：WePY 借鉴了 Vue.js 的语法和特性，支持组件化开发和 MVVM 模式，让开发者用更熟悉的方式编写小程序。
• 提升开发效率：通过封装原生 API 和引入现代 JavaScript 特性（如 Promise、async/await），简化开发流程。
• 代码复用与维护：支持组件化和 NPM 包引入，增强代码的复用性和可维护性。

WePY 优点

原生小程序开发虽然简单，但存在不少限制，而 WePY 提供了显著的改进：

• 组件化开发：例如，WePY 支持单文件组件（.wpy 文件），包含逻辑、模板和样式，结构更清晰：

  <!-- components/my-component.wpy -->
  <template>
    <view></view>
  </template>
  <script>
    import wepy from 'wepy';
    export default class MyComponent extends wepy.component {
      props = { text: String };
    }
  </script>
  <style>
    view { color: blue; }
  </style>
  

  相比原生小程序需要分开 wxml、js 和 wxss 文件，WePY 的写法更现代化。

• 支持现代 JavaScript 特性：原生小程序不支持 Promise 和 async/await，而 WePY 内置支持。例如，WePY 重写了 wx.request，让网络请求更简洁：

  // 原生小程序
  wx.request({
    url: 'https://example.com/api',
    success(res) { console.log(res.data); }
  });
  
  // WePY
  async fetchData() {
    const res = await wepy.request('https://example.com/api');
    console.log(res.data);
  }
  

• 性能优化：WePY 在编译时将组件转为模板，减少运行时的组件创建和管理开销。相比原生小程序的 setData 调用，WePY 内部会优化数据更新，减少不必要的渲染。

• 开发效率：WePY 支持 NPM 包引入、Sass/Less 预处理器，以及 ESLint 代码规范检查，极大地提升了工程化能力。

WePY 的编译

WePY 的核心在于它的编译工具，将类 Vue 的代码转换为原生小程序可运行的代码。以下是 WePY 的编译过程：

1. 项目结构

WePY 项目通常包含以下目录：

• src：开发目录，存放 .wpy 文件。
  • pages：页面文件（如 index.wpy）。
  • components：组件文件。
  • app.wpy：全局配置文件。
• dist：编译后生成的小程序代码目录。

2. 编译工具

WePY 使用 wepy-cli 进行编译。安装和初始化项目：

npm install -g wepy-cli
wepy new myproject

3. 编译过程

WePY 的编译分为以下步骤：

1. 解析 .wpy 文件：WePY 将单文件组件拆分为模板（<template>）、逻辑（<script>）和样式（<style>）。
2. 转换为原生小程序文件：
   • 模板部分：将 <template> 转为 wxml 文件，支持 Vue 风格的语法（如 v-bind、v-for）转换为小程序的 wx:for 等。
   • 逻辑部分：将 <script> 转为 js 文件，注入 WePY 运行时框架，处理组件生命周期和事件绑定。
   • 样式部分：将 <style> 转为 wxss 文件，支持预处理器（如 Less）。
3. 生成配置文件：app.wpy 会被编译为 app.js、app.json 和 app.wxss。
4. 输出到 dist 目录：编译后的文件存放在 dist 中，直接在微信开发者工具中运行。

示例： 输入（index.wpy）：

<template>
  <view></view>
</template>
<script>
  import wepy from 'wepy';
  export default class Index extends wepy.page {
    data = { msg: 'Hello WePY' };
  }
</script>
<style>
  view { font-size: 16px; }
</style>

输出（dist/pages/index）：

• index.wxml：<view></view>
• index.js：包含 WePY 运行时和页面逻辑。
• index.wxss：view { font-size: 16px; }
• index.json：页面配置。

4. 运行时支持

WePY 在编译时注入运行时框架，处理组件通信、事件绑定和数据更新，确保编译后的代码与原生小程序无缝兼容。

总结

相比较于原生小程序的开发要经常切换同一个模块的不同文件，在同一个文件中写完所有代码还是更方便的，毕竟不是大页面，业务逻辑没有太复杂。