github上的小程序源码如何运行(GitHub精选腾讯开源小程序组件化开发框架)
github上的小程序源码如何运行(GitHub精选腾讯开源小程序组件化开发框架)<style lang="less"> @color: #4D926F; .num { color: @color; } </style> <template> <div class="container"> <div class="num" @tap="num "> {{num}} </div> <custom-component></custom-component> <vendor-component></vendor-component> <div>{{text}}</div> <input v-model="text"/&g
《GitHub精选》是我们分享Github中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个小程序组件化开发框架——wepy。
WePY是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions 的引入都是为了能让开发小程序项目变得更加简单,高效。
特点:
- 类 Vue 开发风格
- 支持自定义组件开发
- 支持引入 NPM 包
- 支持 Promise
- 支持 ES2015 特性,如 Async Functions
- 支持多种编译器,Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug
- 支持多种插件处理,文件压缩,图片压缩,内容替换等
- 支持 Sourcemap,ESLint 等
- 小程序细节优化,如请求列队,事件优化等
Demo:
<style lang="less">
@color: #4D926F;
.num {
color: @color;
}
</style>
<template>
<div class="container">
<div class="num" @tap="num ">
{{num}}
</div>
<custom-component></custom-component>
<vendor-component></vendor-component>
<div>{{text}}</div>
<input v-model="text"/>
</div>
</template>
<config>
{
usingComponents: {
customComponent: '@/components/customComponent'
vendorComponent: 'module:vendorComponent'
}
}
</config>
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
num: 0
text: 'Hello World'
}
});
</script>
目前已经有超过5000 的开发者使用了WePY框架制作了自己的小程序,例如:腾讯疫苗查询小程序、 腾讯翻译君小程序、 腾讯地图小程序、玩转故宫小程序、诗词墨客(开源)、花花百科、阅邻二手书、 趣店招聘等等。
GitHub: https://github.com/Tencent/wepy