快速上手(Quick start)

视频教程

1 安装启动

[success] 运行环境 node >= 8.10.0npm >= 5.6.0

建议安装使用nvm管理 node 版本

1.1 全局安装 chameleon-tool 构建工具

  1. npm i -g chameleon-tool

注:暂不支持使用 yarn、cnpm 等第三方 npm 工具进行安装。

安装成功后,执行 cml -v 即可查看当前版本, cml -h查看命令行帮助文档。

1.2 创建项目与启动

  • 执行 cml init project
  • 输入项目名称
  • 等待自动执行 npm install 依赖
  • 切换到项目根目录执行cml dev
  • 会自动打开预览界面 预览界面如下: 快速上手  - 图1

web 端可以点击模拟器内页面右上角打开 · 新的浏览器窗口。

native 端的效果请 · 下载chameleon playground(目前可下载 Android 端,IOS 端即将发布)或者下载weex playground扫码预览

小程序端请下载对应小程序开发工具,打开项目根目录下的/dist/[wx|alipay|baidu]目录预览。

微信开发者工具支付宝开发者工具百度开发者工具

2 目录与文件结构

生成的目录结构如下,详细介绍参见目录结构

  1. ├── chameleon.config.js // 项目的配置文件
  2. ├── dist // 打包产出目录
  3. ├── alipay // 支付宝小程序代码
  4. ├── baidu // 百度小程序代码
  5. ├── wx // 微信小程序代码
  6. ├── mock // 模拟数据目录
  7. ├── node_modules // npm包依赖
  8. ├──package.json
  9. └── src // 项目源代码
  10. ├── app // app启动入口
  11. ├── components // 组件文件夹
  12. ├── pages // 页面文件夹
  13. ├── router.config.json // 路由配置
  14. └── store // 全局状态管理
· 编辑器中语法高亮,暂时使用.vue的插件,参见编辑器插件,后续会推出更强大的插件。

3 编辑器插件

  • Idea、Webstorm 插件cml-language-support
  • Vscode 插件cml
  • Atom 插件language-cml
  • sublime 插件审核中,敬请期待…

4 语法体验

替换src/pages/index/index.cml文件,删除src/pages/index/index.cml文件中的所有代码,然后替换为下面的代码,体验 chameleon 语法。

数据绑定

  1. <template>
  2. <view>
  3. <!-- 数据绑定与计算属性 -->
  4. <text>{{ message }}</text>
  5. <textclass="class1">{{ message2 }}</text>
  6. <!-- 条件与循环渲染 -->
  7. <viewc-if="{{showlist}}">
  8. <view
  9. c-for="{{array}}"
  10. c-for-index="idx"
  11. c-for-item="itemName"
  12. c-key="city"
  13. >
  14. <text> {{idx}}: {{itemName.city}}</text>
  15. </view>
  16. </view>
  17. <!-- 事件绑定 -->
  18. <viewc-bind:tap="changeShow"><text>切换展示</text></view>
  19. </view>
  20. </template>
  21. <script>
  22. classIndex{
  23. data ={
  24. message:"Hello Chameleon!",
  25. array:[
  26. {
  27. city:"北京"
  28. },
  29. {
  30. city:"上海"
  31. },
  32. {
  33. city:"广州"
  34. }
  35. ],
  36. showlist:true
  37. };
  38. computed ={
  39. message2:function(){
  40. return"computed"+this.message;
  41. }
  42. };
  43. watch ={
  44. showlist(newVal, oldVal){
  45. console.log(`showlist changed:`+ newVal);
  46. }
  47. };
  48. methods ={
  49. changeShow(){
  50. this.showlist =!this.showlist;
  51. }
  52. };
  53. created(){
  54. console.log("生命周期");
  55. }
  56. }
  57. exportdefaultnewIndex();
  58. </script>
  59. <stylescoped>
  60. .class1 {
  61. color:#f00;
  62. }
  63. </style>
  64. <scriptcml-type="json">
  65. {
  66. }
  67. </script>

5 创建新页面

项目根目录下 · 执行 · cml init page, 输入页面名称 first-page

  1. $ cml init page
  2. ?Please input page name:

回车,即可生成页面 · 组件src/pages/first-page/first-page.cml

6 创建及引用组件

项目根目录下 · 执行 · cml init component,选择Normal component,输入 first-com, · 回车,即可生成文件components/first-com/first-com.cml。 组件也是 cml 文件 · 结构上与页面相同。

拷贝如下代码到first-com.cml

  1. <template>
  2. <view>
  3. <textclass="first-com-text">我是组件first-com</text>
  4. </view>
  5. </template>
  6. <script>
  7. classFirstCom{}
  8. exportdefaultnewFirstCom();
  9. </script>
  10. <stylescoped>
  11. .first-com-text {
  12. color:#0f0;
  13. }
  14. </style>
  15. <scriptcml-type="json">
  16. {
  17. }
  18. </script>

然后在刚才的src/pages/index/index.cml中引用first-com

  1. <scriptcml-type="json">
  2. {
  3. "base":{
  4. "usingComponents":{
  5. "first-com":"components/first-com/first-com"
  6. }
  7. }
  8. }
  9. </script>

template 中使用 first-com 组件。

  1. <template>
  2. <view>
  3. <first-com></first-com>
  4. </view>
  5. </template>

经过以上操作,你已经学会了组件的引用,丰富的组件等待着你去学习!

7 项目配置

chameleon.config.js为项目的配置文件,以后定制化构建会 · 使用到,比如是否带 hash,是否 · 压缩等等,可以在项目根目录下执行cml build · , · 执行完成后 · ,项目根目录的dist文件夹下生成 build 模式的文件。

8 模拟 · 数据

mock/api/index.js文件内容如下,可以本地模拟 api 请求。访问localhost:8000/api/getMessage · 即可看到模拟的 api 返回。端口以实际启动为准,默认 8000.

  1. module.exports =[
  2. {
  3. method:["get","post"],
  4. path:"/api/getMessage",
  5. controller:function(req, res,next){
  6. res.json({
  7. total:0,
  8. message:[
  9. {
  10. name:"Hello chameleon!"
  11. }
  12. ]
  13. });
  14. }
  15. }
  16. ];

9 · 示例 demo 学习

· chameleon-tool中内置了 todolist 的项目模板, · 通过命令cml init project —demo todo 即可生成该模板,按照 1.2 节中的说明启动项目,即可看到如下页面

快速上手  - 图2

经过以上的介绍和实践操作,相信你已经了解了 chameleon 的基本使用,本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节,所以请务必完整阅读整个文档!

10 FAQ

我想使用chameleon,是否需要大刀阔斧的重构项目?

不需要,可以使用chameleon开发公用组件,导出到各端原有项目中使用。

用CML标准编写代码,是否增加调试成本?

我们实现了全面的语法检查功能,且在持续加强。理论上框架是降低调试成本,就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本,见仁见智。

各端包括小程序的接口更新频繁,如何保证框架编译的抽象度和稳定性?

1、自建输入语法标准 cml,编译输出结果自定的格式语法。2、框架的runtime层实现匹配接收的编译输出代码,runtime跟随小程序更新。3、框架整体方向一致:mvvm底层设计模式为标准设计接口。基于以上三条,你可以理解为:我们设计了一个框架统一标准协议,再在各个端runtime分别实现这个框架,宏观的角度就像nodejs同时运行在window和macOS系统,就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况,否则不影响框架,如果真遇到不向下兼容更新,这种情况下是否用框架都需要改。

框架有多大,性能是否有影响?

1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能,我们在这里会做优化,尽可能diff出修改的部分进行传输,性能会更好。2、包大小,小程序有包大小限制,web端包大小也是工程师关心的点。首先基于多态协议,产出包纯净保留单端代码;其次框架的api和组件会按需打包。包大小是我们重点发力点,会持续优化到极致。目前build模式包大小测试结果如下:minimize | minimize + gzip

平台js总体积外部框架chameleon运行时代码其他代码
web141.87kb | 43.72kb vue+vuex+vue-router99.26kb | 33.89kb35.96kb | 8.85kb 业务代码
weex135kb | 32.43kb vuex+vue-router33.49kb | 17.96kb25.23kb | 5.94kb 业务代码
wx101.66kb | 28.12kb mobx算在chameleon运行时中 98.75kb | 26.53kb 业务代码
baidu101.72kb | 28.13kb mobx算在chameleon运行时中 98.78kb | 26.61kb 业务代码
alipay102kb | 28.12kb mobx算在chameleon运行时中 99.15kb | 26.34kb 业务代码
我只想跨web和各类小程序,是否可以不使用 Flexbox 布局模型?

可以,如果你的项目不在 快应用、react-native、weex等平台运行,可以更便捷开发项目,特别是CSS的限制更少:只跨web和小程序的应用