資訊專欄INFORMATION COLUMN
摘要：基于的版本和編寫的模仿原生應(yīng)用的源碼地址歡迎項(xiàng)目演示地址建議直接添加到主屏幕端體驗(yàn)差一些前言為什么做這個(gè)項(xiàng)目學(xué)習(xí)全家桶，很長一段時(shí)間在用。作者聲稱之后增強(qiáng)了對的支持，探究在中的支持情況。
vue-ts-daily
基于Vue.js的2.5.13版本和TypeScript編寫的模仿原生應(yīng)用的WebApp.
源碼地址 歡迎star
項(xiàng)目演示地址
建議直接添加到主屏幕(ios端體驗(yàn)差一些).
前言為什么做這個(gè)項(xiàng)目？
學(xué)習(xí)vue全家桶，很長一段時(shí)間在用React。
利用PWA技術(shù)來模仿原生應(yīng)用,來探究PWA與原生的差異。
作者聲稱2.5之后vue增強(qiáng)了對TS的支持，探究TS在vue中的支持情況。
那么為什么模仿一款"習(xí)慣養(yǎng)成APP"而不是餓了么、美團(tuán)、頭條等著名APP？
原生APP與WebApp最大的區(qū)別就是離線能力，我們希望做一款以離線能力為主的app，這種類型的app絕大多數(shù)都是工具類的，例如番茄鬧鐘、效率工具等等，諸如美團(tuán)、頭條這種app離線場景價(jià)值有限（離線怎么點(diǎn)餐看新聞??？緩存里的應(yīng)該叫舊聞了）。
這個(gè)項(xiàng)目跟其他Vue仿餓了么和qq音樂的項(xiàng)目有何不同?
我們?nèi)蘐ypescript編寫,組件完全Class化,寫法更貼近Angular,ts是構(gòu)建健壯應(yīng)用的必備良藥,眾多團(tuán)隊(duì)在ts化自己的項(xiàng)目了,而github上我找不到任何一個(gè)ts+vue的完整app,此項(xiàng)目可以供你學(xué)習(xí).
我們利用了pwa技術(shù),pwa目前已經(jīng)被ios支持(雖然支持得爛),所以,開花結(jié)果是遲早的事情,vue+pwa的項(xiàng)目也是十分有限,尤其是在vue-cli 3.0之后就沒有相關(guān)的項(xiàng)目供參考了.
技術(shù)棧vue2.5 + Typescript + vuex + vue-router
項(xiàng)目啟動git clone https://github.com/xiaomuzhu/vue-ts-daily npm i && npm run dev開發(fā)環(huán)境
MacOS 10.12.6 node10.0.0目標(biāo)功能
[x] 習(xí)慣新建 -- 完成
[x] 習(xí)慣編輯 -- 完成
[x] 習(xí)慣歸檔 -- 完成
[x] 習(xí)慣刪除 -- 完成
[x] 習(xí)慣激活 -- 完成
[x] vuex持久化 -- 完成
[x] 當(dāng)日習(xí)慣展示 -- 完成
[x] 對之前習(xí)慣的補(bǔ)簽和取消 -- 完成
[x] 默認(rèn)習(xí)慣選擇列表 -- 完成
[x] 習(xí)慣圖標(biāo)與背景顏色的編輯 -- 完成
[x] 習(xí)慣的重復(fù)日期、激勵(lì)語、重復(fù)時(shí)間段的編輯-- 完成
[x] 獎(jiǎng)勵(lì)卡領(lǐng)取 -- 完成
[x] 不同時(shí)間段不同習(xí)慣的tab篩選 -- 完成
[x] 習(xí)慣的總天數(shù)、當(dāng)前連續(xù)天數(shù)、歷史最高紀(jì)錄等記錄邏輯 -- 完成
[x] 登錄 -- 完成
[x] 反饋 -- 完成
[x] 更新日志 -- 完成
[x] 遠(yuǎn)程同步信息 -- 完成
[ ] 開啟https實(shí)現(xiàn)pwa
[ ] 加入后臺推送功能
[ ] 加入主題更換
[ ] 豐富動畫效果
項(xiàng)目截圖首頁
習(xí)慣管理
習(xí)慣記錄
新建習(xí)慣
編輯習(xí)慣
最后本項(xiàng)目是還原了APP Store一個(gè)精選習(xí)慣管理app,叫"小日常"。
整體功能還原了90%以上，身為工具類的app還是以邏輯為主，有兩個(gè)點(diǎn)比較難處理.
邏輯耦合嚴(yán)重，例如一個(gè)習(xí)慣成功打卡或者取消打卡后，相關(guān)的連續(xù)天數(shù)、總天數(shù)、當(dāng)前天數(shù)、習(xí)慣當(dāng)前的ui、日歷ui、彈窗邏輯全部要響應(yīng).
時(shí)間處理,習(xí)慣養(yǎng)成工具最主要的還是要處理時(shí)間,例如日歷組件,當(dāng)天之后的補(bǔ)簽是不能響應(yīng)的,因此需要做一個(gè)時(shí)間上的判斷,而補(bǔ)簽之前的相關(guān)連續(xù)記錄要做改變,這個(gè)時(shí)候需要計(jì)算這個(gè)補(bǔ)簽是否改變了連續(xù)的記錄,其中又得涉及時(shí)間的處理,整個(gè)邏輯就是處理跟時(shí)間的關(guān)系.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95030.html
摘要：基于等開發(fā)一款移動端音樂，界面參考了安卓版的網(wǎng)易云音樂布局適配常見移動端。圖標(biāo)使用阿里巴巴圖標(biāo)庫，中間的唱片旋轉(zhuǎn)動畫使用了實(shí)現(xiàn)。搜索功能實(shí)現(xiàn)功能搜索歌手歌單歌曲熱門搜索數(shù)據(jù)節(jié)流上拉刷新保存搜索記錄。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發(fā)一款移動端音樂 WebApp，UI ...
摘要：前言這個(gè)項(xiàng)目是利用工作之余寫的一個(gè)模仿微信的單頁面應(yīng)用，整個(gè)項(xiàng)目包含個(gè)頁面，涉及實(shí)時(shí)群聊，機(jī)器人聊天，同學(xué)錄，朋友圈等等，后續(xù)頁面還是開發(fā)中。 前言 這個(gè)項(xiàng)目是利用工作之余寫的一個(gè)模仿微信app的單頁面應(yīng)用，整個(gè)項(xiàng)目包含27個(gè)頁面，涉及實(shí)時(shí)群聊，機(jī)器人聊天，同學(xué)錄，朋友圈等等，后續(xù)頁面還是開發(fā)中。寫這個(gè)項(xiàng)目主要目的是練習(xí)和熟悉vue和vuex的配合使用，利用socket.io實(shí)現(xiàn)實(shí)時(shí)聊...
摘要：的組件化功能可謂是它的一大亮點(diǎn)，通過將頁面上某一組件的代碼放入一個(gè)的文件中進(jìn)行管理可以大大提高代碼的維護(hù)性。項(xiàng)目中未做移動端適配，在不同屏幕手機(jī)上打開，可能用戶體驗(yàn)會差些 一、項(xiàng)目展示： showImg(https://user-gold-cdn.xitu.io/2018/5/18/1637183ad14a696a?w=372&h=791&f=gif&s=2408442); 注意：如果...
閱讀 3057·2021-11-19 11:31
閱讀 3148·2021-09-02 15:15
閱讀 1001·2019-08-29 17:22
閱讀 1072·2019-08-29 16:38
閱讀 2475·2019-08-26 13:56
閱讀 844·2019-08-26 12:16
閱讀 1448·2019-08-26 11:29
閱讀 941·2019-08-26 10:12
