資訊專欄INFORMATION COLUMN
摘要：開局一張圖，故事全靠編是啥多帶帶飛又是啥自從有小程序以來，小程序的第三方框架便孕育而生，從原始時代的只基于微信小程序多如今多端統(tǒng)一開發(fā)框架，可以說前端技術(shù)從年到年又發(fā)生了天翻地覆的變化。
Created 2019-4-6 21:57:17 by huqi
Updated 2019-4-7 22:54:55 by huqi
↑開局一張圖，故事全靠編↑
自從有小程序以來，小程序的第三方框架便孕育而生，從原始時代的只基于微信小程序多如今多端統(tǒng)一開發(fā)框架，可以說前端技術(shù)從2018年到2019年又發(fā)生了天翻地覆的變化。感覺現(xiàn)在和圈內(nèi)人吹水，不蹦出幾個諸如megalo、Taro、uni-app之類的新詞都感覺沒法混，哈哈。今天逛掘金的時候，偶然間打開了@Chameleon社區(qū) 發(fā)布的我們用5分鐘寫了一個跨多端項目,Chameleon剛剛開源的時候就有關(guān)注過，不過一直沒有入手，看到開頭這個視頻教程就有了嘗試的沖動(相比某個開源的商業(yè)化項目出的教程還需支付一定費用已經(jīng)很良心了)，三天節(jié)假日也已經(jīng)過去兩天了，是該在Copy&Paste一下，不然連這個CP的技能冷卻時間會變得更長。
一句話介紹CML：cml(Chameleon 多帶帶飛） 作為真正讓一套代碼運行多端的框架，提供標(biāo)準(zhǔn)的MVVM模式，統(tǒng)一開發(fā)各類終端。
為什么要入手Chameleon？我覺得Chameleon的思想覺得我們學(xué)習(xí)，畢竟多端統(tǒng)一對前端來說是個大趨勢。
答案不肯定的，當(dāng)然也不是否定的，要根據(jù)用戶的實際場景實際情況，假如我連前端開發(fā)環(huán)境都木有，別說入門，就算是裝個Cli環(huán)境甚至Node環(huán)境可能都要花費好幾分鐘；假如我掌握了一定技巧且有良好的環(huán)境，Copy&Paste也輕而易舉的事。廢話不多說，前提是您至少要用node環(huán)境。
安裝node環(huán)境
詳見@i5ting 的文章：狼叔：如何正確的學(xué)習(xí)Node.js
全局安裝Chameleon構(gòu)建工具
npm i -g chameleon-tool
我已安裝[email protected]、[email protected](展示沒看到更新命令，最新0.1.1，并且暫不支持yarn、cnpm等安裝方式)
創(chuàng)建項目(可選參數(shù):project、page、component)，輸入項目名會自動創(chuàng)建項目文件并安裝依賴
cml init
說實話，如果npm不給力，別說5分鐘，可能15分鐘過去了估計還卡在npm installing...
那就先看看目錄結(jié)構(gòu)
├── chameleon.config.js // 項目的配置文件
├── dist // 打包產(chǎn)出目錄(build之后顯示)
├── alipay // 支付寶小程序代碼(build之后顯示)
├── baidu // 百度小程序代碼(build之后顯示)
├── wx // 微信小程序代碼(build之后顯示)
├── mock // 模擬數(shù)據(jù)目錄(目前內(nèi)置api和template文件夾)
├── node_modules // npm包依賴
├── package.json // 包文件
├── npm-shrinkwrap.json // 鎖定依賴版本
└── src // 項目源代碼
├── app // app啟動入口(包含app.cml)
├── assets // 靜態(tài)文件夾(包含默認(rèn)images)
├── components // 組件文件夾(包含默認(rèn)組件)
├── pages // 頁面文件夾(包含默認(rèn)頁面)
├── router.config.json // 路由配置
└── store // 全局狀態(tài)管理(類似Vuex)
.cml文件vscode默認(rèn)是不支持的，不過已經(jīng)有拓展可以下載
如果npm依賴安裝不成功，可以手動安裝；或者切換成taobao源
通過運行help命令查看chameleon的幫助提示
cml -h Usage: chameleon [command] [options] Options: -V, --version 輸出版本號 -h, --help 輸出使用信息 Commands: init [options] 初始化多帶帶飛(chameleon)項目的模板 dev [options] 啟動開發(fā)模式 build [options] 啟動構(gòu)建模式 server [options] 開發(fā)環(huán)境服務(wù)器的工具 web [options] Web項目的工具 weex [options] Weex項目的工具 wx [options] 微信小程序項目的工具 baidu [options] 百度小程序項目的工具 alipay [options] 支付寶小程序項目的工具
運行dev命令啟動dev環(huán)境，同時瀏覽器會打開彩蛋
cml dev web
當(dāng)然，也許不一定一帆風(fēng)順，遇到問題先本地排查，實在解決不了再去chameleon官方倉庫翻翻issue，或者直接提出issue。
既然是Copy&paste，那就直接把@jalonjs 大佬創(chuàng)建的cml-first-demo直接復(fù)制過來，一邊看文檔一邊敲代碼，盡走上從入門到放棄的康莊大道！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103291.html
摘要：根據(jù)當(dāng)時的情境，是在微信開發(fā)者工具中刪掉該小程序然后重新載入就解決了，大家給出的結(jié)論是微信小程序開發(fā)者工具的。 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); ↑開局一張圖，故事全靠編...
摘要：跨端框架壹個理想主義團(tuán)隊的開源作品歷經(jīng)近個月打磨，滴滴跨端方案終于開源了真正專注于一套代碼運行多端。這時候我們專門成立了一個人的小項目組，完成一個名為的項目，一期目標(biāo)是不影響用戶發(fā)揮，不依賴框架方的原則性實現(xiàn)一套代碼運行和微信小程序。 Chameleon跨端框架——壹個理想主義團(tuán)隊的開源作品 歷經(jīng)近20個月打磨，滴滴跨端方案chameleon終于開源了https://github.co...
摘要：依舊是很簡單的需求，但是對于資深的攻城獅來說，除了布局，其他的就只能去了。特別是真機(jī)跑的時候，問題特別多。還是坑在基礎(chǔ)不牢固，文檔看得不深入，對小程序原生組件應(yīng)該注意的事項把握不準(zhǔn)，才會掉入這個非常基礎(chǔ)的坑。 Created 2019-4-3 18:29:53 by huqiUpdated 2019-4-3 19:12:22 by huqi showImg(https://segmen...
摘要：當(dāng)用戶或搜索引擎向網(wǎng)站服務(wù)器發(fā)出瀏覽請求時，服務(wù)器返回的數(shù)據(jù)流中頭信息中的狀態(tài)碼的一種，表示本網(wǎng)頁永久性轉(zhuǎn)移到另一個地址。通過在源代碼中添加日志輸出，我們也能清楚地看到的狀態(tài)碼。 Created 2019-4-5 22:24:33 by huqi Updated 2019-4-5 23:23:56 by huqi showImg(https://segmentfault.com/...
閱讀 4000·2021-11-24 09:38
閱讀 1465·2021-11-19 09:40
閱讀 2798·2021-11-18 10:02
閱讀 3736·2021-11-09 09:46
閱讀 1806·2021-09-22 15:27
閱讀 3139·2019-08-29 15:24
閱讀 1027·2019-08-29 12:40
閱讀 1707·2019-08-28 18:24
