tencent / wepy Goto Github PK

View Code? Open in Web Editor NEW

22.4K 725.0 3.1K 9.32 MB

小程序组件化开发框架

Home Page: https://wepyjs.gitee.io/wepy-docs/

License: Other

JavaScript 97.43% Shell 1.52% HTML 0.42% TypeScript 0.63%

wepy weapp

wepy's Introduction

English | 简体中文

WePY 2 (beta)

介绍

WePY 资源汇总：awesome-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;
  .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>

安装使用

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

npm install @wepy/cli@next -g

生成开发示例

wepy init standard myproject

安装依赖

cd myproject
npm install

开发实时编译

wepy build --watch

开发者工具导入项目

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

哪些小程序是用 WePY 开发的

腾讯疫苗查询小程序、腾讯翻译君小程序、腾讯地图小程序、玩转故宫小程序、手机充值+、手机余额查询、手机流量充值优惠、友福图书馆（开源）、素洁商城（开源）、 NewsLite （开源）、西安找拼车（开源）、深大的树洞（开源）、求知微阅读（开源）、给你的 iPhone X 换个发型、天天跟我买、坚橙、群脱单、米淘联盟、帮助圈、众安保险福利、阅邻二手书、趣店招聘、满熊阅读（开源：微信小程序、支付宝小程序）、育儿柚道、平行进口报价内参、 GitHub 掘金版、班级群管、鲜花说小店、逛人备忘、英语助手君、花花百科、独角兽公司、爱羽客羽毛球、斑马小店、小小羽球、培恩医学、农资优选、公务员朝夕刷题、七弦琴小助手、七弦琴大数据、爽到家小程序、应用全球排行（开源）、 we 川大（开源）、聊会儿、诗词墨客（开源）、南京邮电大学（开源）

...

交流群

WePY 交流群已满 500 人，请加 gcaufy_helper 好友或者扫码加好友，验证回复 wepy 按照指引进群。

参与贡献

如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests，为提升微信小程序开发体验贡献力量。
详见：CONTRIBUTING.md

腾讯开源激励计划鼓励开发者的参与和贡献，期待你的加入。

Links

wepy's People

Contributors

Stargazers

Watchers

Forkers

xazzz k1827889 1060460048 yulingchen nebelpro yusphy45 yuanbin-xavier qianlanse 872409 kainy darrencoding forkproject is00hcw jiejiebushuo lucien925 leayar joiansun osub davidwang666 hongtoushizi chenling001 karmalove loopwang shaohao2014 rickyzhan emaiqi marvin0118 imloama naylor55 leebing maxwangry sparkinzy czou fencerj whfandtank lwl0812 keyzf neil-orzzh jaondong dut3062796s hahatiantang lyhiving thesummerrain tzabcd imjerrybao longzekai leekangtaqi liheng2016 cqululei iulo marquessc imsoul kuangdeyin 519608365 zzhangyx uncleyuan zousandian zjpjohn yorick304 liiklin ezc cncoder davidmr001 haxine fysoft2006 duckbill at77ms destinyinhand dream-seeker xiasang920 wkbudong openwayne feilign gardenliu moersing leeon1982 lizziebing seekdoor tomtam neurotoxinvx tennyzhuang yunhor resweapp edisonhcg hxqemma martin-sun betashepherd zhuqling dolymood comeonc dlhandsome kingctan royzeng 1514louluo brucx z448401921 gspandy myneedfork andrew1306 lonllua

wepy's Issues

less外部文件如何引用?

1.如果是纯less文件，直接在style里使用@import(类似 @import '../style/test.less')报错
是我使用的方式不对吗？

less文件中如果定义变量 #444这样井号开头的，编译的时候也会报错。

{ Error: Invalid CSS after "": expected 1 selector or at-rule, was ".container" at options.error (/Users/biangbiang/Documents/_project/vcsmart/front-cx/node_modules/.4.3.0@node-sass/lib/index.js:286:26) status: 1, file: '/Users/biangbiang/Documents/_project/vcsmart/front-cx/src/app.vue', line: 1, column: 1, message: 'Invalid CSS after "": expected 1 selector or at-rule, was ".container"', formatted: 'Error: Invalid CSS after "": expected 1 selector or at-rule, was ".container"\n on line 1 of src/app.vue\n>> \n ^\n' }

`<style lang="sass">
.container
height: 100%
</style>

只有一句话

文件后缀

此框架的目标是：“方便开发者”，那么文件后缀为啥要做成'.wpy',让很多的ide等不能友好高亮等显示。恳请设置为大多ide可以支持的格式。

当然文档也说了，可以改为'.vue', 但是这样对'方便开发者'不就大打折扣了么？

picker-view阻止冒泡

page用到scroll-view，嵌套了picker-view组件，但是在滑动picker-view时报异常Unable to preventDefault inside passive event listener due to target being treated as passive，也尝试给picker-view绑定了各种catch开头的事件阻止冒泡，请问大牛这种情况怎么处理

core-js的全局对象global报错

WAService.js:6 Uncaught TypeError: Cannot read property '__core-js_shared__' of undefined
    at _shared.js [sm]:3
    at require (WAService.js:6)
    at WAService.js:6
    at _shared-key.js [sm]:1
    at require (WAService.js:6)
    at WAService.js:6
    at _object-keys-internal.js [sm]:4
    at require (WAService.js:6)
    at WAService.js:6
    at _object-keys.js [sm]:2

原因在于core-js的global判断是这样的

// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
var global = module.exports = typeof window != 'undefined' && window.Math == Math
  ? window : typeof self != 'undefined' && self.Math == Math ? self : this;
if(typeof __g == 'number')__g = global; // eslint-disable-line no-undef

依赖于window对象，而window对象又不存在。

文件尺寸大的问题

示例代码，打包压缩后就有近700k，这个有进一步压缩空间么，我看了下主要是 npm 目录占用空间多。

更新至1.4.1之后无法正常运行

直接执行wepy new test命令生成的项目也无法正常运行，是跟版本升级有关系吗

wx.createCanvasContext没有同步更新官方的api

微信小程序更新之后，wx.createCanvasContext是同步操作，不再有success/fail回调,因此wepy封装的wx.createCanvasContext的promise版会因为找不到success属性报错:

PS:建议不要直接重写微信原有接口，另起名字，比如 wx.getUserInfo --> wx.getUserInfoAsync ，

wepy编译的时候npm包不会生成

wepy build # 的时候，dist目录的npm包如果删除掉了，这时候不会重新打包生成npm文件夹

build 报错

新建的项目，直接build的时候就报错了。

/Volumes/Data/Leung/Workspace/cnode/wepy.config.js:2
let prod = process.env.NODE_ENV === 'production';
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.getConfig (/usr/local/lib/node_modules/wepy-cli/lib/util.js:225:22)
    at Object.build (/usr/local/lib/node_modules/wepy-cli/lib/compile.js:156:37)
    at Command.<anonymous> (/usr/local/lib/node_modules/wepy-cli/lib/wepy.js:130:23)

模块合并问题

发布以后发现初次加载大概有几十个请求，请问这个有合并方案吗？

globalData 在别的文件里怎么用？

如题
给个例子谢谢

在其他页面如何获取app中定义的数据，如用户信息

1.3.7版本报错

升级到1.3.7有以下报错

Error: Cannot find module 'compare-versions'

外部NPM包，支持moment么？

如何拥有下拉刷新功能的商品列表制作成一个组件

因为组件没有对应的json,如果需要将拥有下拉刷新功能的商品列表制作成一个组件该如何实现呢

微信web开发者工具预览不更新

dist代码更新了，但是微信web开发者工具直接预览一直是老的代码，在手机上预览是新的代码

解析 wx:else的bug

如图所示:
代码：

控制台出错：

生成的wxml文件：

onLoad事件调用多次

page1

<template>
    <view class="container">
    <navigator url="/pages/page2" open-type="navigate">
          <view>go to page2</view>
    </navigator>
    </view>
</template>
<script>
    import wepy from 'wepy';
    export default class Index extends wepy.page {
    	onLoad(){
    		console.log("page 1 onLoad occur")
    	}
    }
</script>

page2


<template>
    <view class="container">
    <navigator url="/pages/page1" open-type="navigate">
          <view >go to page1</view>
    </navigator>
    </view>
</template>
<script>
    import wepy from 'wepy';
    export default class Index extends wepy.page {
        onLoad(){
            console.log("page 2 onLoad occur")
        }
    }
</script>

点几次之后就会出现

should not change the protected attribute wxWebviewId

另外open_type如果是navigate的时候，只能点击几次，则无法进行下去了

组件模板可以使用pug编译器吗

组件模板使用pug，但是当做普通文本处理了

请问现在组件模板是不是不支持pug，还是需要配置，我已经安装了wepy-compiler-pug，page可以正常渲染

1.4.3分享任然无法正常使用

对于props内定义了传值的组件，如果不初始化组件data，会报错。

export default class CouponB extends wepy.component {
	props = {
            discount: {
                type: [Number, String],
                coerce: function (v) {
                    return +v;
                },
                default: 50
            }
        };
        // 如果不初始化data，props内的discount会报错
        data = {
        };
}

这样的错误很难发现，是由data未初始化引发的，所以是不是可以在没有初始化data时，内部默认初始化一下

建议加一个IGNORE配置

建议加一个文件忽略配置，比如.DS_Store会被拷贝到dist目录，thx~!

无法找到依赖

pug 模板，watch 期间没有输出编译错误的信息

记录。

dist目录生成的.wxml文件不能压缩吗

wx.request基于IOS8下报错，官方的正常解析

wepy自有变量重命名，防止命名冲突

props传name时不生效，原因是name是component自有属性。

wepy new x新建项目出错

[18:58:28] [完成] 安装依赖完成
[18:58:28] [执行] 执行命令: wepy build
[18:58:28] [信息] 可能需要几分钟, 请耐心等待...
/Users/tds/webroot/weapp/Weapp/wepy.config.js:2
let prod = process.env.NODE_ENV === 'production';
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.getConfig (/usr/local/lib/node_modules/wepy-cli/lib/util.js:294:22)
    at Object.build (/usr/local/lib/node_modules/wepy-cli/lib/compile.js:177:37)
    at Command.<anonymous> (/usr/local/lib/node_modules/wepy-cli/lib/wepy.js:162:23)
[18:58:30] [错误] 代码编译出错

改成 var prod = process.env.NODE_ENV === 'production';
继续 build 成功

分享的自定义字段title，desc、path无效

分享的自定义字段title，desc、path无效。

onShareAppMessage () {
    return {
        title: "自定义title",     //无效
        desc: "自定义desc",     //无效
        path: '/pages/index?custom=custom'    //无效
    }
}

this.$invoke 事件回调参数错乱。

顺序乱了，并非最后一个是事件，而是最后两个都感觉像是事件。

build之后npm 包的文件很大怎么优化

编译为小程序代码后，npm的依赖文件包比较大，请问如何优化？

wepy数组变动检测规则

使用哪些操作可以检测到数组变动？

props传值

props传值不支持object.value格式？
另外直接使用变量名感觉有点违和，建议可以使用{{}}

page 的 on 事件，增加拦截器功能。

使用场景：

1、用户分享页面出去，触发 onShareAppMessage ，api 规定是返回一个 Object ，所以可以在 wepy.page 的 onShareAppMessage 执行返回之后，对 Object 进行二次设置，在进行返回。
貌似这个不适合 promise 。官方 demo 上不支持。

2、其他用户点击，触发动作 onload ，这时候 options 先经过拦截器进行拦截，设置 options ，用设置之后的 options 进行 wepy.page 的 onload 事件的回调，此时可加 promise 。

简单实用场景如上。

希望能开发这个功能。

define 插件。

希望能增加个 define 的插件。

使用场景

开发时，把 __DEV__ 定义为 true ，__PROD__ 定义为 false ，用于预编译。
生产环境，把 __DEV__ 定义为 false ，__PROD__ 定义为 ture ，用于预编译。

onShareAppMessage分享接口报错，不能定制分享

https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html#onshareappmessage

看源码应该是对Page事件漏加了onShareAppMessage

https://github.com/wepyjs/wepy/blob/master/packages/wepy/src/base.js#L21

v1.4.4：升级到1.4.4后，wepy -v 显示的版本号还是v1.4.3

模板slot实现内容分发

wepy貌似不支持slot功能这样组件化受到很大的限制不知道是不是我用的不对

支持async/await是否需要修改配置

使用默认配置异常

mixin 中定义的方法，不能在 page 的 this 中访问。

export default class extends wepy.mixin {
  func1 = function () {}

  func2 () {}
}

如上的 mixin ，在 pages 的 this 中，只能调用 this.func1, 不能调用 this.func2 ，func2 没有挂载到 this 上。具体原因，初步推断为 class 的 prototype 属性不能枚举造成的。而实例属性能枚举，因此能挂载，所以 this 上能调用。

建议wepy部分源码加上注释

没有注释读起来太费劲，参考vue源码，做出简单说明即可，不然很多都靠猜

component 中没有写 methods = {} 的话，从其他 component 里无法使用 $invoke 方法

例如 comA 有方法 methodA（不放在 methods = {} 里，而放在 onLoad() 同级时）而 comA 的 methods 为空，此时若从 comB 调用 this.$invoke('comA', 'methodA')，会报 undefined 错误。

style标签的lang属性不支持scss

虽然lang属性支持sass，但是实际上却是支持的scss的语法，这两种还是有区别的。
如果把lang写成scss，会导致找不到编译器的错误
如果写成sass则会导致代码高亮插件提示错误语法有误
建议优化一下，谢谢！

ReadMe中微信群过期了，还有其他的交流群或者社区吗？

如题

编译 components 组件，拓展属性的功能

假设定义了一个 cropper 的组件。

components 的 template

<template>
  <view class="cropper" bindtap="cropperImageSelectUpload">
    <view class="cropper-transclude">
      <slot></slot>
    </view>
  </view>
</template>

在 pages 里面调用

<cropper data-model="formData.avatar" data-width="180" data-height="180">
  <image src="{{formData.avatar}}" />
</cropper>

目前的编译结果是

<view class="cropper" bindtap="$cropper$cropperImageSelectUpload">
  <view class="cropper-transclude">
    <image src="{{formData.avatar}}" />
  </view>
</view>

建议方案：参考 angular 的 directive 方案（wepy借鉴 vue ，可惜我不熟 vue，所以只能参考 angular ）

xml 调用的时候，增加个标志位，例如 replace="false" ，就进行拓展，（默认这个值为 true ，兼容旧版本的接口），编译的时候，进行属性的枚举，拓展到 components 的最外层元素上。

编写的例子如下：

pages 调用

<cropper class="avatar-cropper" replace="false" data-model="formData.avatar" data-width="180" data-height="180">
  <image src="{{formData.avatar}}" />
</cropper>

编译的结果

<view class="cropper avatar-cropper" replace="false" data-model="formData.avatar" data-width="180" data-height="180" bindtap="$cropper$cropperImageSelectUpload">
  <view class="cropper-transclude">
    <image src="{{formData.avatar}}" />
  </view>
</view>

对 class 属性进行 append 的操作，对其他相同的属性进行了覆盖操作。