學習chameleon開發筆記

最近學習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~,一起進步一起學習!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章