小程序组件化开发框架 wepy 教程

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

wepy 是腾讯开源的一个小程序组件化开发框架。在开源以来深受广大开发者喜爱，目前已有超过 1500 位开发者使用或了解本框架, 拥有众多的开发特性和优化方案。为此我准备了这篇教程，希望能让大家更快的上手 wepy。

介绍

WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。

同时WePY也是一款成长中的框架，大量吸收借鉴了一些优化前端工具以及框架的设计理念和思想。

特性

• 类Vue开发风格
• 支持自定义组件开发
• 支持引入NPM包
• 支持Promise
• 支持ES2015+特性，如Async Functions
• 支持多种编译器，Less/Sass/Styus、Babel/Typescript、Pug
• 支持多种插件处理，文件压缩，图片压缩，内容替换等
• 支持 Sourcemap，ESLint等
• 小程序细节优化，如请求列队，事件优化等

WePY 框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。以下是使用 WePY 前后的代码对比与组件化示例。

安装

安装（更新） wepy 命令行工具。

npm install wepy-cli -g

生成开发实例。

wepy new myproject

实时编译开发项目。

wepy build --watch

开发者工具使用

配合开发工具的使用有以下5个步骤：

1. 使用微信开发者工具新建项目，本地开发选择dist目录。
2. 微信开发者工具–>项目–>关闭ES6转ES5。重要：漏掉此项会运行报错。
3. 微信开发者工具–>项目–>关闭上传代码时样式自动补全 重要：某些情况下漏掉此项会也会运行报错。
4. 微信开发者工具–>项目–>关闭代码压缩上传 重要：开启后，会导致真机computed, props.sync 等等属性失效。
5. 项目根目录运行wepy build –watch，开启实时编译。

案例

介绍了上面的准备工作后，我们来看一个 Hello World 案例。

<style lang="less">
    @color: #4D926F;
    .userinfo {
        color: @color;
    }
</style>
<template lang="pug">
    view(class='container')
        view(class='userinfo' @tap='tap')
            mycom(:prop.sync='myprop' @fn.user='myevent')
            text {{now}}
</template>
<script>
    import wepy from 'wepy';
    import mycom from '../components/mycom';
    export default class Index extends wepy.page {
        components = { mycom };
        data = {
            myprop: {}
        };
        computed = {
            now () { return +new Date(); }
        };
        async onLoad() {
            await sleep(3);
            console.log('Hello World');
        }
        sleep(time) {
            return new Promise((resolve, reject) => setTimeout(() => resolve, time * 1000));
        }
    }
</script>

运行效果我就不贴了，更多学习资料参考官方文档。

参考资料

• 小程序组件化开发框架
• 微信小程序组件化开发框架wepy开发资源汇总

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » 小程序组件化开发框架 wepy 教程