最近學習chameleon框架開發的一款以美食爲主的商城demo。這種一份代碼支持多端的框架還是第一次接觸呢~~想的時候有點想吐啦,尤其是每次保存刷新頁面的那個速度呀,,,之前小程序項目基本用原生開發,也嘗試過mpvue。這次想挑戰下生態框架,考慮到平時開發中vue後臺系統和h5用的多,chameleon類似vue的語法,上手更快些吧,下面來總結幾點學習中遇到的那麼questions:
1.根據chameleon官網文檔實現創建文件命令:
參考文檔:https://cml.js.org/docs/setup.html
依賴環境:node>=8.10.0、node>=5.6.0
使用git輸入命令:npm i -g chameleon-tool
完成後,執行cml -v查看當前版本
安裝後如下圖所示:
2.創建項目與啓動
創建項目文件:cml init page、
page name: home
3.跑本地項目:
cml dev
啓動本地預覽網址後http://192.168.1.84:8000/preview.html,點擊預覽頁面左邊的H5模擬器,進入 H5頁面進行開發
4.view標籤觸發事件c-bind-tap,用c-bind:event和c-bind:onclick點擊無效
5.首頁入口菜單跳轉到其他頁面,首先要再route內配置頁面文件路徑
跳轉到其他頁面的路徑和路由中需要保持一致,(tips: 該框架內的圖片引入需要用require)
6.for循環列表獲取當前列表信息,數據熟悉使用和小程序一樣,data-xxx
6.1、如果獲取某個具體字段如path則表示爲:data-name=“{{item.path}}”
6.2、如果獲取當前列表內某一條列表對象信息,data-item="{{JSON.stringify(item)}}"
Last:初版demo還在進行中,小白上路還需要不停的學習踩坑,在百度上查找資料有限,尤其學習持續更新中。
附上我的github項目地址:https://github.com/Dandelion529?tab=repositories
歡迎小夥伴歡迎來star~,一起進步一起學習!