小程序组件化开发框架 WePY

介绍

  • WePY (发音: /'wepi/)是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。
  • 同时WePY也是一款成长中的框架,大量吸收借鉴了一些优化前端工具以及框架的设计理念和思想。如果WePY有不足地方,或者你有更好的想法,欢迎提交ISSUE或者PR。

特性:

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

Demo

<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().getTime(); }
        };
        async onLoad() {
            await sleep(3);
            console.log('Hello World');
        }
        sleep(time) {
            return new Promise((resolve, reject) => setTimeout(resolve, time * 1000));
        }
    }
</script>

安装使用

安装(更新) wepy 命令行工具。
    npm install wepy-cli -g
生成开发示例
wepy init standard myproject
安装依赖
cd myproject
npm install
开发实时编译
wepy build --watch
开发者工具导入项目

使用 微信开发者工具 新建项目,本地开发选择项目根目录,会自动导入项目配置。

项目传送:

项目地址https://tencent.github.io/wepy/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值