| vue-wechat用vue.js開(kāi)發(fā)微信app界面的demo 線上地址: vue-wechat. 項(xiàng)目地址: useryangtao/vue-wechat 加載略慢, 建議clone本地調(diào)試預(yù)覽。 安裝技術(shù)棧vue-wechat是主要在利用Vue.js * 實(shí)現(xiàn)了微信app及很多細(xì)節(jié)。 此demo在實(shí)現(xiàn)上使用了以下技術(shù) 
 一些亮點(diǎn)新頁(yè)面跳轉(zhuǎn)的過(guò)渡動(dòng)畫(huà) 參照ios系統(tǒng)的頁(yè)面切換風(fēng)格,是通過(guò)router-view及transition特性結(jié)合實(shí)現(xiàn)的。 消息列表頁(yè)的item 左劃操作處理,使用vuex(getters,actions)實(shí)現(xiàn)實(shí)時(shí)處理計(jì)算數(shù)據(jù) (語(yǔ)音/文字)對(duì)話框 組件間 動(dòng)畫(huà)切換,還有通過(guò)事件注冊(cè)tap 實(shí)現(xiàn) 按住說(shuō)話效果; 還有一些交互行為細(xì)節(jié)及動(dòng)畫(huà): 
 朋友圈下拉拖拽顯示完整封面 listview部分也使用了weui的結(jié)構(gòu)。 小圖標(biāo)全部使用iconfont方式,減少圖片請(qǐng)求。 手機(jī)預(yù)覽(QR)
 基本操作主頁(yè) 及消息列表 (未讀/已讀)操作 及 刪除頁(yè)面切換,動(dòng)畫(huà)過(guò)渡(仿照ios系統(tǒng)切換風(fēng)格:下一頁(yè)打開(kāi)時(shí),當(dāng)前頁(yè)左偏移-30%;當(dāng)前頁(yè)關(guān)閉時(shí),上一頁(yè)左偏移從-30%過(guò)渡到0%) 按下說(shuō)話,松開(kāi)結(jié)束 效果發(fā)現(xiàn)-朋友圈發(fā)現(xiàn)-掃一掃圖標(biāo)-iconfont為了減少圖片加載,圖標(biāo)使用的iconfont添加到主屏幕開(kāi)發(fā)約定參考關(guān)于作者微博:Water楊濤 | 
|  |