亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

MycLambert / 3241人閱讀

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

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


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

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

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

五分鐘真的能入門嗎？

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

安裝node環(huán)境
詳見@i5ting 的文章：狼叔：如何正確的學(xué)習(xí)Node.js

全局安裝Chameleon構(gòu)建工具

npm i -g chameleon-tool

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

創(chuàng)建項(xiàng)目(可選參數(shù):project、page、component)，輸入項(xiàng)目名會(huì)自動(dòng)創(chuàng)建項(xiàng)目文件并安裝依賴

cml init

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

那就先看看目錄結(jié)構(gòu)

   ├── chameleon.config.js                 // 項(xiàng)目的配置文件
   ├── 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                                 // 項(xiàng)目源代碼
       ├── app                             // app啟動(dòng)入口(包含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依賴安裝不成功，可以手動(dòng)安裝；或者切換成taobao源

通過運(yùn)行help命令查看chameleon的幫助提示

cml -h

  Usage: chameleon [command] [options]

 Options:

-V, --version     輸出版本號(hào)
-h, --help        輸出使用信息

 Commands:

init [options]    初始化多帶帶飛(chameleon)項(xiàng)目的模板
dev [options]     啟動(dòng)開發(fā)模式
build [options]   啟動(dòng)構(gòu)建模式
server [options]  開發(fā)環(huán)境服務(wù)器的工具
web [options]     Web項(xiàng)目的工具
weex [options]    Weex項(xiàng)目的工具
wx [options]      微信小程序項(xiàng)目的工具
baidu [options]   百度小程序項(xiàng)目的工具
alipay [options]  支付寶小程序項(xiàng)目的工具

運(yùn)行dev命令啟動(dòng)dev環(huán)境，同時(shí)瀏覽器會(huì)打開彩蛋

cml dev web

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103291.html

相關(guān)文章

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

    摘要：根據(jù)當(dāng)時(shí)的情境，是在微信開發(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); ↑開局一張圖，故事全靠編...

    hsluoyz 評(píng)論0 收藏0

  • Chameleon跨端框架——壹個(gè)理想主義團(tuán)隊(duì)的開源作品

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

    darkbug 評(píng)論0 收藏0

  • 【Copy攻城獅日志】踩坑小程序之canvas的顯示層級(jí)問題

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

    Coly 評(píng)論0 收藏0

  • 【Copy攻城獅日志】Node.js之http下載圖片失敗

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

    darkbaby123 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<