Giter Site home page Giter Site logo

didi / chameleon Goto Github PK

View Code? Open in Web Editor NEW
9.0K 235.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 Introduction

Chameleon Build Status license version

Chameleon/kəˈmiːlɪən/,简写CML,中文名卡梅龙;中文意思变色龙,意味着就像变色龙一样能适应不同环境的跨端整体解决方案。

English Introduction | 中文介绍

文档

新官网文档

CML.JS.org

仓库更新说明

本仓库仅包含编译时代码,全部开源代码参见:https://github.com/chameleon-team

master为稳定版本,除了紧急 bug 修复,每份代码提交都有很严格的发布流程规范,会先在分支经历一段时间灰度期,确认稳定可用后才会合并到 master, 进行中的项目分支介绍

CML 即 多端

支持平台:web、微信小程序、支付宝小程序、百度小程序、android(weex)ios(weex)、qq 小程序、字节跳动小程序快应用、持续更新中

一端所见即多端所见——多端高度一致,无需关注各端文档。

基于多态协议不影响各端差异化灵活性

web 微信小程序 native-weex 百度小程序 支付宝小程序

背景

研发同学在端内既追求 h5 的灵活性,也要追求性能趋近于原生。 面对入口扩张,App 客户端、微信小程序、支付宝小程序、百度小程序、Android 厂商联盟快应用、其他类小程序,单一功能在各平台都要重复实现,开发和维护成本成倍增加。迫切需要维护一套代码可以构建多入口的解决方案,滴滴跨端解决方案 Chameleon 终于发布。真正专注于让一套代码运行多端。

设计理念

软件架构设计里面最基础的概念“拆分”和“合并”,拆分的意义是“分而治之”,将复杂问题拆分成单一问题解决,比如后端业务系统的”微服务化“设计;“合并”的意义是将同样的业务需求抽象收敛到一块,达成高效率高质量的目的,例如后端业务系统中的“中台服务”设计。

而 Chameleon 属于后者,通过定义统一的语言框架+统一多态协议,从多端(对应多个独立服务)业务中抽离出自成体系、连续性强、可维护强的“前端中台服务”。

跨端目标

虽然不同各端环境千变万化,但万变不离其宗的是 MVVM 架构**,Chameleon 目标是让 MVVM 跨端环境大统一

跨端目标

开发语言

代码示例

<template>
  <view>
    <text>{{title}}</text><text>{{reversedTitle}}</text>
  </view>
</template>

<script>
class Index  {
  data = {
    title: "chameleon"
  }
  computed = {
    reversedTitle: function () {
      return this.title.split('').reverse().join('')
    }
  }
  mounted() {}
  destroyed() {}
}
export default new Index();
</script>

从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,同样道理,chameleon 中采用的是 CML + CMSS + JS。

JS语法用于处理页面的逻辑层,与普通网页编程相比,本项目目标定义标准 MVVM 框架,拥有完整的生命周期,watch,computed,数据双向绑定等优秀的特性,能够快速提高开发速度、降低维护成本。

CML(Chameleon Markup Language)用于描述页面的结构,我们知道 HTML 是有一套标准的语义化标签,例如文本是<span> 按钮是<button>。CML 同样具有一套标准的标签,我们将标签定义为组件,CML 为用户提供了一系列组件。同时 CML 中还支持模板语法,例如条件渲染、列表渲染,数据绑定等等。同时,CML 支持使用类 VUE 语法,让你更快入手。

CMSS(Chameleon Style Sheets)用于描述 CML 页面结构的样式语言,其具有大部分 CSS 的特性,并且还可以支持各种 css 的预处语言less stylus

CML 采用与 Vue 一致的组件化方案、单文件组织方式、生命周期,同时数据响应能力对齐 Vue,数据管理能力对齐 Vuex,非常方便开发者上手、维护。

通过以上对于开发语言的介绍,相信你看到只要是有过网页编程知识的人都可以快速的上手chameleon的开发。

多端高度一致

深入到编程语言维度保障一致性,包括框架、生命周期、内置组件、事件通信、路由、界面布局、界面单位、组件作用域、组件通信等高度统一

丰富的组件

在用 CML 写页面时,chameleon 提供了丰富的组件供开发者使用,内置的有button switch radio checkbox等组件,扩展的有c-picker c-dialog c-loading等等,覆盖了开发工作中常用的组件。

丰富的 API

为了方便开发者的高效开发,chameleon 提供了丰富的 API 库,发布为 npm 包chameleon-api,里面包括了网络请求、数据存储、地理位置、系统信息、动画等方法。

自由定制 API 和组件

基于强大的多态协议,可自由扩展任意 API 和组件,不强依赖框架的更新。各端原始项目中已积累大量组件,也能直接引入到跨端项目中使用。

基于强大的多态协议,充分隔离各端差异化实现,轻松维护一套代码实现跨多端

代码规范校验,当出现不符合规范要求的代码时,编辑器会展示智能提示,不用挨个调试各端代码,同时命令行启动窗口也会提示代码的错误位置。

渐进式跨端

既想一套代码运行多端,又不用大刀阔斧的重构项目?不仅可以用 cml 开发页面,也可以将多端重用组件用 cml 开发,直接在原有项目里面调用。

先进前端开发体验

Chameleon 不仅仅是跨端解决方案。基于优秀的前端打包工具 Webpack,吸收了业内多年来积累的最有用的工程化设计,提供了前端基础开发脚手架命令工具,帮助端开发者从开发、联调、测试、上线等全流程高效的完成业务开发。

联系我们

[email protected]

负责人:Conan

内部成员:透心凉、Sgoddon、动机不纯、Jalon、Jack、卡尺哈哈、change、Observer、Kevin、guoqingSmile、Mr.MY、JiM、lzc、名字待定、朱智恒、亭、龚磊、w55、小龙、不懂小彬、荣景超

特别鸣谢

zheyizhifeng (头像空) broven (头像空)
zheyizhifeng(快应用) whuhenrylee(快应用) broven(阿里影业) Jeany(芒果 TV)

贡献者们

快应用官方研发团队、luyixin、z-mirror、夏夜焰火(百度) kingsleydon

微信 & QQ 交流群

微信


QQ

协议

Apache-2.0 license

Chameleon 基于 Apache-2.0 协议进行分发和使用,更多信息参见协议文件

友情链接

DoraemonKit /'dɔ:ra:'emɔn/,简称DoKit, 一款功能齐全的客户端( iOS 、Android、微信小程序 )研发助手,你值得拥有。

Mand Mobile 一款优秀的面向金融场景的 移动端UI组件库。

Cube-UI 基于 Vue.js 实现的精致移动端组件库。

chameleon's People

Contributors

beatles-chameleon avatar gongllei avatar jimwmg avatar kingsleydon avatar startheart avatar yylgit avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

chameleon's Issues

如何设置 tabbar

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

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

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

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

this.$cmlEmit('click', e)
  1. 父组件接收
<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]

flex布局在H5上展示有问题

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

问题截图
[App预览效果,正常]
App预览效果
[H5预览效果]
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>

预期什么时候,可以到 1.0 版本?

(1)weex 在阿里已经大面积弃用了

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

(2)官方的demo

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

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

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

(4)工具链路上和开发规范上

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

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

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

目前只有那人严选的 Demo。

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

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

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

bug描述
描述出现的问题

复现bug的步骤

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. 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]

小程序支付功能支持吗

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

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)

在weex端,如何接入chameleon客户端sdk?

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

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

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

复现bug的步骤

  1. 运行代码
  2. 正常滑动
  3. 手指移动到carousel区域滑动
  4. 复现问题

问题截图

编译环境信息

  • 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>

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

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

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

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

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

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

安装出错

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

不兼容webpack4

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

  1. 按照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: [...]}) )
  1. errorLog: https://gist.github.com/broven/a627bff2891eda099badbdc886075adf

编译环境信息
webpack: 4.23.0

VS Code 语法支持插件

bug描述
描述出现的问题

复现bug的步骤

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. 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]

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

bug描述
描述出现的问题

复现bug的步骤

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. 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]

全局安装不了

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

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

问题截图
image

编译环境信息

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

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

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

复现bug的步骤
cml dev

问题截图
wx20190131-104907 2x

编译环境信息

  • 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]

CLI Language Options

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

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

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

bug描述
使用组件展示异常

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

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

image
b组件没有渲染class
image
image

编译环境信息

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

运行环境信息

  • 端版本: [微信小程序 1.02.1901230]

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

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

  1. 运行代码
  2. 复现问题

问题截图

编译环境信息

  • 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>

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

bug描述
描述出现的问题

复现bug的步骤

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. 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]

http请求支付宝环境下报错

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

问题截图
image

编译环境信息

  • 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)

迫切希望支持的新端投票

  • 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 初始化后项目启动失败

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

文件名不能以x开头

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

复现bug的步骤

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

问题截图
tim 20190212133632

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,请检查所传参数是否和接口定义的一致

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

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

编译环境信息

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.