wepy 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
wepy 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
wepy 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
wepy 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
wepy 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织 腾讯
地区 国产
投 递 者 局长
适用人群 未知
收录时间 2017-03-02

软件简介

wepy 是一个小程序组件化开发框架。

组件

小程序支持js模块化,但彼此独立,业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。 例如模板A中绑定一个bindtap="myclick",模板B中同样绑定一样bindtap="myclick",那么就会影响同一个页面事件。对于数据同样如此。因此只有通过改变变量或者事件方法,或者给其加不同前缀才能实现绑定不同事件或者不同数据。当页面复杂之后就十分不利于开发维护。 因此wepy让小程序支持组件化开发,组件的所有业务与功能在组件本身实现,组件与组件之间彼此隔离,上述例子在wepy的组件化开发过程中,A组件只会影响到A绑定的myclick,B也如此。

wepy编译组件的过程如下:

组件引用

当页面或者组件需要引入子组件时,需要在页面或者script中的components给组件分配唯一id,并且在template中添加<component>标签,如index.wpy。

页面和组件都可以引入子组件,引入若干组件后,如下图:

Index页面引入A,B,C三个组件,同时组件A和B又有自己的子组件D,E,F,G,H。

项目目录结构

├── dist                   微信开发者工具指定的目录
├── node_modules           
├── src                    代码编写的目录
|   ├── components         组件文件夹(非完整页面)
|   |   ├── com_a.wpy      可复用组件 a
|   |   └── com_b.wpy      可复用组件 b
|   ├── pages              页面文件夹(完整页面)
|   |   ├── index.wpy      页面 index
|   |   └── page.wpy       页面 page
|   └── app.wpy            小程序配置项(全局样式配置、声明钩子等)
└── package.json           package 配置

主要解决问题

  1. 开发模式转换

  2. 支持组件化开发

  3. 支持加载外部 NPM 包

  4. 单文件模式,使得目录结构更加清晰

  5. 默认使用 babel 编译,支持 ES6/7 的一些新特性

  6. 针对原生 API 进行优化

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (16)

加载中
wepy官方文档打不开,wepy init standard创建空项目失败
2020/09/08 13:14
回复
举报
试试看
2019/12/06 12:03
回复
举报
作者不是腾讯? 怎么是个人?
2018/07/10 08:11
回复
举报
https://gclsoft.github.io/wepy/
2018/03/31 10:25
回复
举报
这个项目何时转到腾讯名下了?
2018/03/01 08:45
回复
举报
打分: 力荐
666
2017/06/06 12:18
回复
举报
打分: 推荐
挺好用的
2017/05/03 10:44
回复
举报
名字有歧义
2017/04/29 13:57
回复
举报
打分: 力荐
我正在用,十分好用。
2017/03/04 15:45
回复
举报
我也以为时python
2017/03/03 23:59
回复
举报
更多评论
发表于大前端专区
2018/03/01 08:01

WePY 1.7.1 发布,微信小程序组件化开发框架

WePY 1.7.1 已发布,更新内容如下: 修复了 scope 失效的 bug 。ISSUE 963 修复了私有 npm 组件引入报错的 bug 。PR 947 修复了 onPageScroll 会导致页面卡死的 bug 。PR 985 WePY 是腾讯开源的一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。 特性: 类Vue开发风格 支持自...

6
38
发表了资讯
2017/06/16 07:47

WePY 1.5.7 发布,小程序组件化开发框架

WePY 1.5.7 已发布,更新内容: 修复了App中的this指向问题。 修复了component不支持mixin的onLoad的问题。 修复了引用第三方组件时,样式引用路径不对的问题。 修复了使用pug时,props不生效的问题。 修复了使用扩展运算符...时,编译不正确的问题。 修复了目录中包含src时,第三方组件编译路径不正确的问题。 添加数据的watch支持。 WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发...

3
30
发表了资讯
2017/05/23 07:44

WePY 1.5.5 发布,小程序组件化开发框架

WePY 1.5.5 已发布,更新内容: 修复了特殊情况下 require 路径编译出错的问题 修复了 wepy.createVideoContext 调用报错的问题 修复了 should not change the protected attribute __wxWebviewId__ 的 warning 修复了 output 参数不生效的问题 WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程...

7
30
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2019/04/10 10:10

wepy

wepy wepy优势: 1、基于原生组件实现组件化开发 2、同vue一样,支持watch、computed、mixin等开发 3、同vue一样支持模块开发、组件开发等 wepy与小程序页面的区别: 同原生小程序不同,WePY拥有的是.wpy页面,而它们并非是继承自原生的 Page 和 App,也不需要独立的wxss、.js、.json等文件 WePY小程序被分为三个实例:小程序实例App、页面实例Page、组件实例Component,它们实例化的方式基本相同: // 声明一个App小程序实例 ...

0
0
发表了博客
2018/02/01 19:33

wepy

通过快速入门指南,可以快速的进行初级开发了,其中介绍包括事件,以及开发者工具的配置。 https://juejin.im/entry/59c86d9c6fb9a00a6436cfc0 ①通过wepy new project 创建新的项目后,发现用的是less预编译器,如何改为sass? 在wepy.config.js文件中 然后npm install wepy-compiler-sass -dev --save 安装就可以使用sass来编码了 链接: https://www.cnblogs.com/fayin/p/7655620.html ②循环组件repeat的坑 1.因为静态编译的...

0
0
发表了博客
2019/07/22 09:20

WePY的脱胎换骨

对于前端来说,尤其是开发小程序的前端来说,WePY框架一定不陌生,他是一种小程序开发框架。而且是属于类Vue风格,掌握Vue再来学习WePY学习成本极低。 今天为啥要写这篇文章呢,因为在复习WePY时发现已经有了WePY2了。 犹记得当时开发商城时每次异步更新数据都得$apply,$apply,现在终于不用了。 WePY2比起WePY1简直是脱胎换骨的变化,当然类Vue风格是没有变的,但是内部改了很多的东西,而且官方也说明了,WePY2并不是WePY1的升...

0
0
2018/08/07 10:42

wepy学习一 安装使用wepy

官方地址:https://tencent.github.io/wepy/index.html 步骤 1.安装全局脚手架及创建运行项目 `npm install wepy-cli -g` `mkdir demos && cd demos` `wepy init standard demo1` `cd demo1` `npm install` `npm run dev` 2.打开微信小程序,项目目录为demo1项目根目录(注意,虽然完成第一步后,wpy等文件会被编译到dist目录,但小程序会读取根目录下的配置文件自动读取dist目录) 3.修改.wpy文件,保存,脚手架自动热更新...

3
0
发表了博客
2018/08/13 14:57

小程序之wepy框架

安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm -v cnpm i 一,wepy的安装 1,全局安装wepy => npm i wepy-cli -g 2,新建项目project(项目名称) => wepy new project wepy init standard myproject 3,启动项目 => wepy build --watch 二,生成的项目结构 ├── dist 微信开发者工具指定的目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件) ├── node_modules ├...

0
0
发表了博客
2019/05/13 10:12

wepy快速入门

Github地址 wepy官网:https://tencent.github.io/wepy/index.html 安装 wepy 命令行工具 npm install wepy-cli -g 在开发目录生成开发DEMO wepy new myproject 开发实时编译 wepy build --watch npm install -g wepy-cli //全局安装或更新WePY命令行工具(wepy脚手架): wepy-cli wepy -v //查看wepy-cli版本 wepy init standard <projectName> //新建wepy小程序项目,1.7.0之前的版本使用:wepy new myproject wepy list ...

0
0
发表了博客
2018/06/11 10:33

wepy 语法高亮

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

0
0
发表了博客
2019/05/13 10:12

wepy快速入门

Github地址 wepy官网:https://tencent.github.io/wepy/index.html 安装 wepy 命令行工具 npm install wepy-cli -g 在开发目录生成开发DEMO wepy new myproject 开发实时编译 wepy build --watch npm install -g wepy-cli //全局安装或更新WePY命令行工具(wepy脚手架): wepy-cli wepy -v //查看wepy-cli版本 wepy init standard <projectName> //新建wepy小程序项目,1.7.0之前的版本使用:wepy new myproject wepy list ...

0
0
发表了博客
2019/09/24 11:13

WePy框架的使用

基本示例 import wepy from 'wepy';//引入wepy框架说明 // 通过继承自wepy.page的类创建页面逻辑 export default class Index extends wepy.page { //用于页面模板绑定的数据 data={ motto: 'hello world', userInfo: {} } //事件处理函数(集中保存在methonds对象中) methods = { bindViewTap(){ console.log('button clicked'); } } onLoad () {//页面的声明周期方法 console.log('onLoad'); } } WePy的基本配置 WePy根据npm命...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2019/01/21 18:22

wepy引入wxparse报错,请大佬们告知下原因

实在是费解啊123

1
0
2018/11/28 17:22

wepy创建项目后,用微信开发工具预览报错。请教大神怎么解决

wepy创建项目后,用微信开发工具预览报错 百度了下也没有相对应的解决方案,目前只知道是转ES5语法的错误,我也去官网看了, 这里也按照官网说的,处于关闭状态,但是还是不行。 请教下大神们,帮忙解决下。感谢

1
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
16 评论
230 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部