【Copy攻城獅日志】CML之5分鐘入門多端統一框架

MycLambert 發布于2019-08-23 16:47 / 3168人閱讀

摘要：開局一張圖，故事全靠編是啥多帶帶飛又是啥自從有小程序以來，小程序的第三方框架便孕育而生，從原始時代的只基于微信小程序多如今多端統一開發框架，可以說前端技術從年到年又發生了天翻地覆的變化。

Created 2019-4-6 21:57:17 by huqi
Updated 2019-4-7 22:54:55 by huqi

↑開局一張圖，故事全靠編↑

CML是啥？多帶帶飛又是啥？

自從有小程序以來，小程序的第三方框架便孕育而生，從原始時代的只基于微信小程序多如今多端統一開發框架，可以說前端技術從2018年到2019年又發生了天翻地覆的變化。感覺現在和圈內人吹水，不蹦出幾個諸如megalo、Taro、uni-app之類的新詞都感覺沒法混，哈哈。今天逛掘金的時候，偶然間打開了@Chameleon社區發布的我們用5分鐘寫了一個跨多端項目,Chameleon剛剛開源的時候就有關注過，不過一直沒有入手，看到開頭這個視頻教程就有了嘗試的沖動(相比某個開源的商業化項目出的教程還需支付一定費用已經很良心了)，三天節假日也已經過去兩天了，是該在Copy&Paste一下，不然連這個CP的技能冷卻時間會變得更長。
一句話介紹CML：cml(Chameleon 多帶帶飛）作為真正讓一套代碼運行多端的框架，提供標準的MVVM模式，統一開發各類終端。
為什么要入手Chameleon？我覺得Chameleon的思想覺得我們學習，畢竟多端統一對前端來說是個大趨勢。

五分鐘真的能入門嗎？

答案不肯定的，當然也不是否定的，要根據用戶的實際場景實際情況，假如我連前端開發環境都木有，別說入門，就算是裝個Cli環境甚至Node環境可能都要花費好幾分鐘；假如我掌握了一定技巧且有良好的環境，Copy&Paste也輕而易舉的事。廢話不多說，前提是您至少要用node環境。

安裝node環境
詳見@i5ting 的文章：狼叔：如何正確的學習Node.js

全局安裝Chameleon構建工具

npm i -g chameleon-tool

我已安裝node@10.14.1、chameleon-tool@0.0.16(展示沒看到更新命令，最新0.1.1，并且暫不支持yarn、cnpm等安裝方式)

創建項目(可選參數:project、page、component)，輸入項目名會自動創建項目文件并安裝依賴

cml init

說實話，如果npm不給力，別說5分鐘，可能15分鐘過去了估計還卡在npm installing...

那就先看看目錄結構

   ├── chameleon.config.js                 // 項目的配置文件
   ├── dist                                // 打包產出目錄(build之后顯示)
     ├── alipay                            // 支付寶小程序代碼(build之后顯示)
     ├── baidu                             // 百度小程序代碼(build之后顯示)
     ├── wx                                // 微信小程序代碼(build之后顯示)
   ├── mock                                // 模擬數據目錄(目前內置api和template文件夾)
   ├── node_modules                        // npm包依賴
   ├── package.json                        // 包文件
   ├── npm-shrinkwrap.json                 // 鎖定依賴版本
   └── src                                 // 項目源代碼
       ├── app                             // app啟動入口(包含app.cml)
       ├── assets                          // 靜態文件夾(包含默認images)
       ├── components                      // 組件文件夾(包含默認組件)
       ├── pages                           // 頁面文件夾(包含默認頁面)
       ├── router.config.json              // 路由配置
       └── store                           // 全局狀態管理(類似Vuex)

.cml文件vscode默認是不支持的，不過已經有拓展可以下載

如果npm依賴安裝不成功，可以手動安裝；或者切換成taobao源

通過運行help命令查看chameleon的幫助提示

cml -h

  Usage: chameleon [command] [options]

 Options:

-V, --version     輸出版本號
-h, --help        輸出使用信息

 Commands:

init [options]    初始化多帶帶飛(chameleon)項目的模板
dev [options]     啟動開發模式
build [options]   啟動構建模式
server [options]  開發環境服務器的工具
web [options]     Web項目的工具
weex [options]    Weex項目的工具
wx [options]      微信小程序項目的工具
baidu [options]   百度小程序項目的工具
alipay [options]  支付寶小程序項目的工具

運行dev命令啟動dev環境，同時瀏覽器會打開彩蛋

cml dev web

當然，也許不一定一帆風順，遇到問題先本地排查，實在解決不了再去chameleon官方倉庫翻翻issue，或者直接提出issue。

既然是Copy&paste，那就直接把@jalonjs 大佬創建的cml-first-demo直接復制過來，一邊看文檔一邊敲代碼，盡走上從入門到放棄的康莊大道！

云服務器 GPU云服務器攻城獅三分鐘入門每隔5分鐘 5分鐘打造webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103291.html

【Copy攻城獅日志】踩坑小程序之can't read property 'of

摘要：根據當時的情境，是在微信開發者工具中刪掉該小程序然后重新載入就解決了，大家給出的結論是微信小程序開發者工具的。 Created 2019-4-2 22:17:34 by huqiUpdated 2019-4-2 23:17:34 by huqishowImg(https://segmentfault.com/img/bVbqOLH?w=1526&h=818); ↑開局一張圖，故事全靠編...

hsluoyz 2019-08-26 13:42 評論0 收藏0
Chameleon跨端框架——壹個理想主義團隊的開源作品

摘要：跨端框架壹個理想主義團隊的開源作品歷經近個月打磨，滴滴跨端方案終于開源了真正專注于一套代碼運行多端。這時候我們專門成立了一個人的小項目組，完成一個名為的項目，一期目標是不影響用戶發揮，不依賴框架方的原則性實現一套代碼運行和微信小程序。 Chameleon跨端框架——壹個理想主義團隊的開源作品歷經近20個月打磨，滴滴跨端方案chameleon終于開源了https://github.co...

darkbug 2019-08-23 15:06 評論0 收藏0
【Copy攻城獅日志】踩坑小程序之canvas的顯示層級問題

摘要：依舊是很簡單的需求，但是對于資深的攻城獅來說，除了布局，其他的就只能去了。特別是真機跑的時候，問題特別多。還是坑在基礎不牢固，文檔看得不深入，對小程序原生組件應該注意的事項把握不準，才會掉入這個非常基礎的坑。 Created 2019-4-3 18:29:53 by huqiUpdated 2019-4-3 19:12:22 by huqi showImg(https://segmen...

Coly 2019-08-23 16:43 評論0 收藏0
【Copy攻城獅日志】Node.js之http下載圖片失敗

摘要：當用戶或搜索引擎向網站服務器發出瀏覽請求時，服務器返回的數據流中頭信息中的狀態碼的一種，表示本網頁永久性轉移到另一個地址。通過在源代碼中添加日志輸出，我們也能清楚地看到的狀態碼。 Created 2019-4-5 22:24:33 by huqi Updated 2019-4-5 23:23:56 by huqi showImg(https://segmentfault.com/...

darkbaby123 2019-08-23 16:46 評論0 收藏0