字节跳动小程序体验

chameleon-tool内置支持头条小程序

chameleon-tool@1.0.5 及以上内置支持了头条小程序

项目依赖升级

chameleon-runtime@1.0.1
chameleon-ui-builtin@1.0.6
cml-ui@1.0.3
chameleon-api@1.0.5

不在需要通过下面的扩展新端的方式接入。

以扩展新端方式接入（不建议此方式接入）

npm i chameleon-tool@1.0.3 -g

体验仓库

cml-demo cml-flexbox cml-yanxuan cml-todomvc

下载字节跳动小程序开发者工具

clone 下来以上仓库之后, 分支，执行 cml tt dev，在开发者工具中即可预览效果

效果图如下

字节跳动小程序接入步骤

根据以下步骤配置之后，既有 CML 的项目可以直接在头条小程序运行。

0、升级最新的 CML 包

1、安装头条小程序端所依赖的库

2、将原本引用依赖的 CML 内置库 改成头条小程序的库，头条的库会依赖原本的CML 内置库，所以依然可以运行原本的各种小程序、 Web 端、Weex 端。

安装头条扩展需要的仓库

检查原有依赖的版本

"chameleon-api": "1.0.0",
"chameleon-runtime": "1.0.0",
"chameleon-store": "1.0.0",
"chameleon-ui-builtin": "1.0.0",
"cml-ui": "1.0.0"

新增头条小程序相关仓库

"cml-tt-api": "0.2.3",
"cml-tt-plugin": "0.2.3",
"cml-tt-runtime": "0.2.3",
"cml-tt-store": "0.2.3",
"cml-tt-ui": "0.2.3",
"cml-tt-ui-builtin": "0.2.3",

修改 chameleon.config.js 配置文件

引入 path模块

const path = require('path');

增加 builtinNpmName 、 extPlatform 和 babelPath 配置

builtinNpmName: 'cml-tt-ui-builtin',
extPlatform: {
  tt: 'cml-tt-plugin',
},
babelPath: [
  path.join(__dirname,'node_modules/cml-tt-ui-builtin'),
  path.join(__dirname,'node_modules/cml-tt-runtime'),
  path.join(__dirname,'node_modules/cml-tt-api'),
  path.join(__dirname,'node_modules/cml-tt-ui'),
  path.join(__dirname,'node_modules/cml-tt-store'),
  path.join(__dirname,'node_modules/cml-tt-mixins'),
  path.join(__dirname,'node_modules/mobx'),
],

以上配置解释

builtinNpmName 字段是你定义的内置 npm 包名称 extPlatform 是配置扩展新端的编译插件，key 值为端标识，value 为编译插件 npm 包名称。 babelPath 配置的是哪些 npm 包要过 babel 处理

扩展头条的核心实现具体可以参考 的 dev 分支

如果要引入基础样式,需要增加 tt：true的配置,默认导入基础样式

baseStyle:{
  wx: true,
  web: true,
  weex: true,
  alipay: true,
  baidu: true,
  qq: true,
  tt:true,
},

修改项目中代码

修改项目中引入 chameleon-store chameleon-api cml-ui 的地方

store 和 api 的引用:

chameleon-store 改为 cml-tt-store

chameleon-api改为cml-tt-api

import cml from 'chameleon-api';
import store from 'chameleon-store';

改为

import cml from 'cml-tt-api';
import store from 'cml-tt-stroe';

组件的引用: cml-ui 改为 cml-tt-ui

<script cml-type="json">
{
    "base": {
        "usingComponents": {
            "c-actionsheet": "cml-ui/components/c-actionsheet/c-actionsheet"
        },
    }
}
</script>

改为

<script cml-type="json">
{
    "base": {
        "usingComponents": {
            "c-actionsheet": "cml-tt-ui/components/c-actionsheet/c-actionsheet"
        },
    }
}
</script>

项目中任意多态组件都要增加字节跳动这一端组件

如果原来某个多态组件 poly-comp

poly-comp.interface
poly-comp.web.cml
poly-comp.weex.cml
poly-comp.wx.cml
poly-comp.alipay.cml
poly-comp.baidu.cml

接入头条小程序的话，则需要在加一个 poly-comp.tt.cml

项目中任意多态接口要增加字节跳动这一端接口

如果原来一个多态接口 poly-api.interfacce

<script cml-type="interface">
type res = [String];
interface UnsupportedInterface {
  getUnsupportApis(): res;
}
</script>

<script cml-type="web">
class Method implements UnsupportedInterface {
  getUnsupportApis() {
    return [];
  }
}

export default new Method();
</script>

<script cml-type="weex">
class Method implements UnsupportedInterface {
  getUnsupportApis() {
    return ['设置页面标题', 'WebSocket', '地理位置'];
  }
}

export default new Method();
</script>

<script cml-type="wx">
class Method implements UnsupportedInterface {
  getUnsupportApis() {
    return [];
  }
}

export default new Method();
</script>

<script cml-type="alipay">
class Method implements UnsupportedInterface {
  getUnsupportApis() {
    return ['启动参数', 'beatles-bridge能力'];
  }
}

export default new Method();
</script>
<script cml-type="baidu">
class Method implements UnsupportedInterface {
  getUnsupportApis() {
    return ['beatles-bridge能力'];
  }
}

export default new Method();
</script>

<script cml-type="qq">
class Method implements UnsupportedInterface {
  getUnsupportApis() {
    return [];
  }
}

export default new Method();
</script>

那么需要增加

<script cml-type="tt">
class Method implements UnsupportedInterface {
  getUnsupportApis() {
    return [];
  }
}

export default new Method();
</script>

字节跳动小程序命令

字节跳动小程序支持的命令有

cml tt dev

cml tt build

当你完成了以上的步骤之后，就可以在你的项目中执行 cml tt dev 进行字节跳动小程序的开发了。

一个cml-demo仓库的 diff在这里,可供大家参考。