didi / chameleon Goto Github PK

View Code? Open in Web Editor NEW

9.0K 234.0 694.0 129.22 MB

🦎 一套代码运行多端，一端所见即多端所见

Home Page: http://cml.didi.cn/

License: Apache License 2.0

JavaScript 98.70% Smarty 0.24% Shell 0.01% HTML 1.03% CSS 0.02%

miniprogram weex cml vue mobile android ios chameleon

chameleon's People

Contributors

Stargazers

Watchers

Forkers

feishu acthink lisiyizu starstaysky fcic lesnicaaa znlnzi hkc452 hswlian tongxin3267 cloudofworld beatles-chameleon tobyreynold evelynlab crazyjser windyao jangocheng davidmr001 dut3062796s yangmain starsoft35 appfws tenwq haxine skymysky yshaojun yana5417 yangguang001 chykidd neostfox droidalee shiyutian123 jangocity hungrypandaltd chinazzlm jzxyouok dyb10101 kukumalucn bangzhi zhoudaqing darren1192 hhy5277 chas2016 moon-zhangyue vaniy rockwong jonathanlee-lx jiasongs joe2hpimn vector-wings davidalphafox hhxx1314 alvinmachao zym20120924 didiwuliu damoguyan11 chinayin web-frame lichengtao1989 ivoidcat shaunstanislauslau accr pycn dyhpoon fnet123 msdgwzhy6 akning jashion cocoyixiao raincoolly jerry-goodboy zichoolelonggui m-alfred dike40 az114q wangwang1069 johnnyliang007 sdtm1016 songxianjin windywake emaiqi dahaoniuniu balac2015 muxi166 gagaboy zhangf911 tianya1451 wanshushu lj81020302 mivanzhang mynamegy rockystevejobs mrx-andy xiaopange oppcat gitter-badger xiaomingtuo typefusion sosojustdo qimingnan

chameleon's Issues

input 双向数据绑定失效

bug描述
描述出现的问题
c-model="{{ appkey }}" appkey两边加上空格，双向绑定数据失效
复现bug的步骤

       <input type="text" c-model="{{ appkey }}" ></input>
       <text>{{ appkey }}</text>

问题截图

编译环境信息

chameleon-tool 版本：[email protected]
nodejs版本、npm版本：node v10.15.0、npm 6.4.1
电脑操作系统：macOS Mojave 版本：10.14.2(18C54)
运行环境信息
端版本： Chrome浏览器版本 71.0.3578.98（正式版本）（64 位）
手机机型: iPhone6

项目启动之后页面显示，“未启动web端构建”、“未启动weex端构建”、“未启动微信小程序构建”等问题

全局安装不了

bug描述
npm i -g chameleon-tool 安装不了，用了各种npm 源都没用

复现bug的步骤
npm i -g chameleon-tool

问题截图

编译环境信息

nodejs版本、npm版本：[node v10.9.0、npm 6.4.0]
电脑操作系统： [win10]

scroller中嵌套carousel，会造成滑动聚焦错误的问题

bug描述
scroller中嵌套carousel，会造成滑动聚焦错误的问题。

复现bug的步骤

运行代码
正常滑动
手指移动到carousel区域滑动
复现问题

问题截图

编译环境信息

chameleon-tool 版本：0.0.13
nodejs版本、npm版本：[node v8.9.4、npm 5.6.0]
电脑操作系统： [e.g. macOS High Sierra 10.14.2]

运行环境信息

端版本： [手机Safari浏览器 ]
手机机型: [e.g. iPhone7P 12.1.2]

代码

<template>
  <page title="chameleon">
      <scroller height="{{-1}}">
        <view class="scroller-wrap">
          <demo-com title="{{title}}" image-src="{{chameleonSrc}}"></demo-com>
        </view>
        <view class="view-demo-row">
          <view class="red view">
            <text>1</text>
          </view>
          <view class="blue view">
            <text>2</text>
          </view>
          <view class="green view">
            <text>3</text>
          </view>
        </view>
        <view>
          <button>
            <text>asda</text>
          </button>
        </view>
        <list>
          <cell>
            <text>1</text>
          </cell>
          <cell>
            <text>2</text>
          </cell>
          <cell>
            <text>3</text>
          </cell>
        </list>
        <view>
          <container direction="column">
            <head>
              <view>
                <text>header</text>
              </view>
            </head>
            <container direction="row" style="flex:1;">
              <aside>
                <view>
                  <text>aside</text>
                </view>
              </aside>
              <container direction="column" style="flex:1">
                <main style="flex:1;">
                  <view>
                    <text>main</text>
                  </view>
                </main>
                <foot>
                  <view>
                    <text>foot</text>
                  </view>
                </foot>
              </container>
            </container>
          </container>
        </view>

        <view>
          <carousel class="container" indicator-dots="{{true}}"  current="{{1}}" circular="{{true}}">
            <carousel-item>
              <view class="carousel-item" style="background-color: #EBDEAA"></view>
            </carousel-item>
            <carousel-item>
              <view class="carousel-item" style="background-color: #E3EDCD"></view>
            </carousel-item>
            <carousel-item>
              <view class="carousel-item" style="background-color: #EAEAEF"></view>
            </carousel-item>
          </carousel>
        </view>
        <view>
          <view>
            <input placeholder="请输入你的用户名"></input>
          </view>
          <view>
            <textarea placeholder="focus聚焦"></textarea>
          </view>
          <view>
            <switch
            label="Switch"
            ></switch>
          </view>
        </view>
      </scroller>
  </page>
</template>

<script>

class Index  {
  data = {
    title: "chameleon",
    chameleonSrc: require('../../assets/images/chameleon.png')
  }
}

export default new Index();

</script>
<style >
.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.scroller-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.view-demo-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.view-demo-row > .view {
  flex: 1;
}

.carousel-item {
  height: 300cpx;
  width: 750cpx;
}

</style>
<script cml-type="json">
{
  "base": {
    "usingComponents": {
      "demo-com": "/components/demo-com/demo-com"
    }
  },
  "wx": {
    "navigationBarTitleText": "index",
    "backgroundTextStyle": "dark",
    "backgroundColor": "#E2E2E2"
  }
}
</script>

小程序最多支持几层的slot嵌套

bug描述
使用组件展示异常

复现bug的步骤
组件a 嵌套组件b，组件b中放入元素，这里嵌套了多层slot

*问题截图
本来应该隐藏的也展示了

b组件没有渲染class

编译环境信息

chameleon-tool 版本：[0.0.13]
nodejs版本、npm版本：[node v9.9.0、npm 6.5.0]
电脑操作系统： [window 10]

运行环境信息

端版本： [微信小程序 1.02.1901230]

http请求支付宝环境下报错

bug描述
使用cml.request发起请求在支付宝环境会报错

问题截图

编译环境信息

chameleon-tool 版本：0.1.0-alpha.3
nodejs版本、npm版本：[node v9.6.1、npm 6.7.0]
电脑操作系统： [e.g. macOS Mojave 10.14]

运行环境信息

端版本：支付宝IDE Version 0.27.0-beta.1 (0.27.0-beta.1)

chameleon-tool 0.0.11 初始化后项目启动失败

env:
node v11.6.0
npm 6.5.0
cml 0.0.11

$ cml dev

[INFO] start Compiling...

[INFO] weex Compiling...

ERROR Failed to compile with 8 errors 1:37:05 PM

These dependencies were not found:

$PROJECT/src/app/app.cml in ./node_modules/chameleon-runtime/.temp/entry.js
$PROJECT/src/pages/index/index.cml in ./node_modules/chameleon-runtime/.temp/router.js
vue-router in ./node_modules/chameleon-runtime/.temp/router.js

To install them, you can run: npm install --save $PROJECT/src/app/app.cml $PROJECT/src/pages/index/index.cml vue-router

This relative module was not found:

./index.interface in ./node_modules/chameleon-runtime/src/interfaces/createApp/index.js, ./node_modules/chameleon-runtime/src/interfaces/createComponent/index.js and 3 others
unhandledRejection Cannot read property 'compilation' of undefined

scroller中嵌套list组件初始化报错

bug描述
scroller中嵌套list组件初始化报错，错误如下：
纵向滚动必须传递高度属性
复现bug的步骤

运行代码
复现问题

问题截图

编译环境信息

chameleon-tool 版本：[0.1.2]
nodejs版本、npm版本：[node v8.9.4、npm 5.6.0]
电脑操作系统： [e.g. macOS High Sierra 10.14.2]

运行环境信息

端版本： [PC Chrome浏览器 72.0.3626.17]

代码

<template>
  <page title="chameleon">
      <scroller height="{{-1}}">
        <view class="scroller-wrap">
          <demo-com title="{{title}}" image-src="{{chameleonSrc}}"></demo-com>
        </view>
        <list>
          <cell>
            <text>1</text>
          </cell>
          <cell>
            <text>2</text>
          </cell>
          <cell>
            <text>3</text>
          </cell>
        </list>
      </scroller>
  </page>
</template>
<style>
</style>
<script>

class Scroll  {
  data = {
    title: "chameleon",
    chameleonSrc: require('../../assets/images/chameleon.png')
  }
}

export default new Scroll();
</script>
<script cml-type="json">
{
  "base": {
    "usingComponents": {
      "demo-com": "/components/demo-com/demo-com"
    }
  },
  "wx": {
    "navigationBarTitleText": "scroller",
    "backgroundTextStyle": "dark",
    "backgroundColor": "#E2E2E2"
  }
}
</script>

文件名不能以x开头

bug描述
init项目时，文件名不能以x开头，否则会报错

复现bug的步骤

Go to '...'
Click on '....'
Scroll down to '....'
See error

问题截图

手把手教你系列- 变色龙SDK使用范例，这个文档，看到4.4.2 js 侧的实现就不懂了，是在实现业务的那个页面调用在native 侧注册的模块吗？
cml init project生成的是一个前端文件夹，chameleon-sdk-android下载又是另一个文件夹，怎么结合起来呢？
比如我现在调用cml.chooseImage这个方法，那在这个业务页面应该怎么来引入SDK？
纯前端看到这个很吃力，希望文档描述能更详细一点！

文档拼写错误

文档链接

Mayber Tyeps 应该是 Maybe Types

如何设置 tabbar

想练练手写个微信小程序，直接用小程序的tabBar的icon路径不知道怎么定义，用c-tab也不知道怎么写图片

有没有demo学习下

滴滴开始裁员，这个项目会停止吗？

滴滴全员会宣布过冬：将裁员15%涉及员工超2000人

这个项目还会继续吗

变色龙干得赢泰罗奥特曼么？？

bug描述
描述出现的问题

复现bug的步骤

Go to '...'
Click on '....'
Scroll down to '....'
See error

问题截图

编译环境信息

chameleon-tool 版本：[e.g.0.1.0]
nodejs版本、npm版本：[node v8.11.4、npm 5.6.0]
电脑操作系统： [e.g. macOS High Sierra 10.13.6]

运行环境信息

端版本： [e.g. 微信小程序 7.0.3、weex 2.0、手机Safari浏览器、PC Chrome浏览器 1.30]
手机机型: [e.g. iPhone6 12.0]

组件套组件无法显示

button组件中

页面引入button组件

icon无法识别

flex布局在H5上展示有问题

bug描述
使用flex做布局，发现在H5的展示效果不对，具体的看截图。

问题截图
[App预览效果，正常]

[H5预览效果]

编译环境信息

chameleon-tool 版本：[0.0.13]
nodejs版本、npm版本：[node v11.0.0、npm 6.4.1]
电脑操作系统： [macOS Mojave 10.14 ]

运行环境信息

端版本： [Chrome]
手机机型： [坚果3]

<template>
  <view class="container">
    <view class="flex-item" c-bind:tap="handleNavigateToAPI">
      <text class="flex-item-text">API</text>
    </view>
    <view class="flex-item" c-bind:tap="handleNavigateToComponents">
      <text class="flex-item-text">Components</text>
    </view>
  </view>
</template>

<script>
import cml from "chameleon-api"

class Index {
  data = {
    message: 'Hello Chameleon!',
  }

  methods = {
    handleNavigateToAPI() {
      cml.navigateTo({
        path: '/pages/api/api'
      })
    },

    handleNavigateToComponents() {
      cml.navigateTo({
        path: '/pages/components/components'
      })
    }
  }
}

export default new Index();
</script>
<style scoped>
  .container {
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .flex-item {
    width: 400cpx;
    height: 400cpx;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: lightblue;
  }
  .flex-item-text {
    font-size: 50cpx;
    color: #222222;
  }

  
</style>
<script cml-type="json">
  {}
</script>

没啥坑的话还可以考虑一哈

滴滴内部有用在生产环境的案例吗？

我看有人问过这个问题，并没有回答，直接关闭了。
有就有，没有就没有。

目前只有那人严选的 Demo。

目前建议使用在生产环境吗，希望得到官方的态度。

现在可以直接 build 为 ios & android 安装包吗，像 cordova 那样，文档上没太找到这块。

内置组件没有详细的说明文档，希望补充详细说明文档

1、像c-fresh组件的使用，只是给个例子，就没有文档说明了，只有看源码才能知道使用方法，建议还是添加详细说明文档，文档地址：
https://cmljs.org/doc/example/c-refresh.html

2、scroller组件的举例说明文档里面说滚动事件是：onscroll,在c-fresh举例却是其他：

https://cmljs.org/doc/example/scroller.html

而文档说明中并没有说明清楚。

建议还是先把文档说明都补充完整

VS Code 语法支持插件

bug描述
描述出现的问题

复现bug的步骤

Go to '...'
Click on '....'
Scroll down to '....'
See error

问题截图

编译环境信息

chameleon-tool 版本：[e.g.0.1.0]
nodejs版本、npm版本：[node v8.11.4、npm 5.6.0]
电脑操作系统： [e.g. macOS High Sierra 10.13.6]

运行环境信息

端版本： [e.g. 微信小程序 7.0.3、weex 2.0、手机Safari浏览器、PC Chrome浏览器 1.30]
手机机型: [e.g. iPhone6 12.0]

安装出错

npm i -g chameleon-tool执行报错
npm warn tar zlib error: unexpected end of file
cb() never called!

hover-class和class同时存在都是计算属性的时候，class会被清空

bug描述
描述出现的问题

复现bug的步骤

Go to '...'
Click on '....'
Scroll down to '....'
See error

问题截图

编译环境信息

chameleon-tool 版本：[e.g.0.1.0]
nodejs版本、npm版本：[node v8.11.4、npm 5.6.0]
电脑操作系统： [e.g. macOS High Sierra 10.13.6]

运行环境信息

端版本： [e.g. 微信小程序 7.0.3、weex 2.0、手机Safari浏览器、PC Chrome浏览器 1.30]
手机机型: [e.g. iPhone6 12.0]

page组件官方举例在小程序端并不支持title

bug描述
描述出现的问题

这里的titlebar在小程序和web并不支持，却没有在文档上面说明

复现bug的步骤
1、如上图所示，https://cmljs.org/doc/example/page.html

问题截图

编译环境信息

chameleon-tool 版本：[email protected]
nodejs版本、npm版本：nodejs8.10.0、npm5.6.0
电脑操作系统：win10

运行环境信息

端版本：微信小程序、web端

内部有用过框架来开发真实项目么？

内部有使用这个框架来开发一些真实项目么?

c-loading微信小程序真机报错

node v8.9.3
npm 5.5.1
cml 0.0.11

使用c-loading组件时，微信小程序真机调试时报错，尝试使用示例代码，仍然会报错

错误log：Cannot read property 'mask' of undefined;at setTimeout callback function
TypeError: Cannot read property 'mask' of undefined
at Function. (weapp:///static/js/npm/cml-ui/components/c-loading/c-loading.js:137:47)

过了一遍文档，希望这个并不是一个KPI的开源项目。感谢开源..

过了文档看好Chameleon的。最起码写法相对更友好。设计更合理吧。

用了Taro感觉设计上有点违和，我猜一开始肯定是想弄一个小程序的工具，后来不得已要兼容很多模式。😝

希望不是一个KPI的项目。开源加油..

可以支持sass语法吗

支持jsx语法吗

子组件emit事件h5接收不到微信却可以

bug描述
子组件emit事件h5接收不到微信却可以

复现bug的步骤
1.子组件emit click事件

this.$cmlEmit('click', e)

父组件接收

<v-item :disabled="disabled" extra="" @click="disabledHandler">Click to disable</v-item>

问题截图

编译环境信息

chameleon-tool 版本：[0.0.13]
nodejs版本、npm版本：[node v9.9.0、npm 6.5.0]
电脑操作系统： [window 10]

运行环境信息

端版本： [微信小程序 1.02.1901230]

开发模式启动项目 weex 一直报版本不匹配

bug描述
开发模式启动项目 weex 一直报版本不匹配

复现bug的步骤
cml dev

问题截图

编译环境信息

chameleon-tool 版本：[e.g.0.1.0]
nodejs版本、npm版本：[node v11.9.0、npm 6.5.0]
电脑操作系统： [e.g. macOS High Sierra 10.13.6]

VS Code 有语法支持插件

为什么不直接用vue语法，非弄个四不像

bug描述
描述出现的问题

复现bug的步骤

Go to '...'
Click on '....'
Scroll down to '....'
See error

问题截图

编译环境信息

chameleon-tool 版本：[e.g.0.1.0]
nodejs版本、npm版本：[node v8.11.4、npm 5.6.0]
电脑操作系统： [e.g. macOS High Sierra 10.13.6]

运行环境信息

端版本： [e.g. 微信小程序 7.0.3、weex 2.0、手机Safari浏览器、PC Chrome浏览器 1.30]
手机机型: [e.g. iPhone6 12.0]

不兼容webpack4

bug描述

In webpack4 * CommonsChunkPlugin was removed -> optimization.splitChunks
复现bug的步骤

按照webpack集成文档接入chameleon: https://cmljs.org/doc/example/webpack_plugin.html

module.exports.chameleon = function(type, mode, config) {
  const modePreset = {
    'dev': {
      cmlType: type,
      media: `dev`,
      hot: true,
      disableExtract: false,
      context: path.join(__dirname,'../'),
      wxConfig: config
    },
    'build': {
      cmlType: type,
      media: `build`,
      hot: false,
      disableExtract: false,
      wxConfig: config
    }
  }

  return getConfig({
    ... modePreset[mode]
  })
}
--------
merge(originWebpackConfig, chameleon('baidu', 'dev', {entry: [...]}) )

errorLog: https://gist.github.com/broven/a627bff2891eda099badbdc886075adf

编译环境信息
webpack: 4.23.0

Chameleon Playground App 页面显示有问题

下载地址

bug描述
看图，部分页面文字偏小。

问题截图

编译环境信息

app 版本 1.0

运行环境信息

手机机型: 小米6，安卓8.0，MIUI10.9.1.17

预期什么时候，可以到 1.0 版本？

（1）weex 在阿里已经大面积弃用了

如果这样，未来 chameleon 的价值又在哪里呢，大量的维护鸡肋的工作吗？

（2）官方的demo

编译出来的BUG ，"navigationBarTextStyle": "#fff"；类似版本更新的问题，未来如何解决？

（3）是否可以给出一些性能测试的数据、稳定性、兼容性的数据和一些相对丰富的案例。

那些产品使用了它进行了业务开发？

（4）工具链路上和开发规范上

对 VScode、webStrom 插件的支持，代码提醒、高亮、预发检测工具。有的官方文档要推荐，没有的补上。代码规范给出一个 eslint 基础版，文件约定，给出官方的一个最佳实践，目前写在一起，不够优雅。

CLI Language Options

cli是英语，法语还是西班牙语？任何人都会这样做谢谢。

Is the cli English, Spanish or French? Any would do. Thank you.

中大型公司的同学是不是希望团队开发输出结果可控度更强？

组件三层结构“CML框架内置组件->CML扩展组件->业务开发者自己扩展的多态组件 ” 达成100%统一。

中大型公司的研发同学是不是有自开发内置组件，直接触达底层端的期望，对团队开发输出结果可控度更强？

迫切希望支持的新端投票

call 1 快应用【进行中】
call 2 字节跳动小程序【done】
call 3 React Native
call 4 Flutter 【调研中】
call 5 先开放扩展新端标准接口【done】

非常欢迎加入扩展新端共建工作，可以先看看一下资料，有兴趣可以加入QQ群联系我们，过程中的技术细节会全力支持。
1、扩展新端教程：https://cml.js.org/doc/extend/extend.html
2、字节跳动扩展小程序日志：https://mp.weixin.qq.com/s/7nsgH7Ow0RkCV12zxiVl7Q
3、字节跳动小程序扩展实现仓库：https://github.com/chameleon-team/cml-tt-sets
4、快应用扩展实现仓库：https://github.com/quickappcn/cml-extplatform-quickapp/tree/fix-runtime

更多规划了解

chameleon-tool 0.0.11创建demo项目todo运行后无任何页面

cml版本： [email protected]
操作系统： CentOS Linux release 7.2.1511 (Core)
nodejs： v10.15.0
浏览器： google chrome 51.0.2704.106 (64-bit)

执行命令：
cml init project --demo todo
cd todo
cml dev

只干了这么3个命令。

浏览器运行起来后预览无任何页面。

小程序支付功能支持吗

首先感谢你们的开源付出
大概看了一遍api，没发现支付功能的api，是要自己去chameleon-api扩展吗
谢谢！

快速上手教程运行中文乱码

运行快速上手教程实例，语法体验部分代码运行起来，中文字符被编译成问号。

编译环境信息

chameleon-tool 版本：[0.0.13]
nodejs版本[node v10.2.0]
电脑操作系统： window10 64位

敢问项目还有一些包了，packages的包不完整吧! 不打算开源 chameleon-store && chameleon-runtime && ...... 这些包吗？

list 嵌入 c-refresh 提示参数校验失败

<list
      bottom-offset="{{bottomOffset}}"
      c-bind:scrolltobottom="onBottom"
      c-bind:onscroll="onScroll"
      height="{{winHeight}}"
    >
    <c-refresh
        display="{{ topRefreshing }}"
        c-bind:refreshevent="onrefreshUp"
        >
    </c-refresh>
</list>
methods = {
    onrefreshUp (e) {
      this.topRefreshing = e.detail.value
      setTimeout(() => {
        this.topRefreshing = false
      }, 2000)
    },
   `onScroll(e)` {
      let scrollTop = e.detail.scrollTop;
      if (scrollTop <= 0) {
        this.topRefreshing = true;
      }
    }
}


 "dependencies": {
    "chameleon-api": "0.0.16",
    "chameleon-bridge": "0.0.10",
    "chameleon-runtime": "0.0.3",
    "chameleon-store": "0.0.3",
    "chameleon-ui-builtin": "0.0.4",
    "cml-ui": "0.0.3"
  }

报错信息
文件位置: /Users/macliu/Desktop/FirstChameleonTest/node_modules/chameleon-ui-builtin/components/list/list.interface
错误信息: event onscroll detail 参数校验失败
定义了Number类型的参数，传入的却是Promise,请检查所传参数是否和接口定义的一致

didi / chameleon Goto Github PK

chameleon's People

Contributors

Stargazers

Watchers

Forkers

chameleon's Issues

Recommend Projects

Recommend Topics

Recommend Org