vue-wechat

用vue.js開(kāi)發(fā)微信app界面的demo

線上地址: vue-wechat.

項(xiàng)目地址: useryangtao/vue-wechat

加載略慢, 建議clone本地調(diào)試預(yù)覽。

安裝

# install dependencies
cnpm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

技術(shù)棧

vue-wechat是主要在利用Vue.js * 實(shí)現(xiàn)了微信app及很多細(xì)節(jié)。

此demo在實(shí)現(xiàn)上使用了以下技術(shù)

• vue
• vuex
• vue-cli
• vue-router
• vue-toutch
• vue-animated-list
• weui
• zepto
• fastclick

一些亮點(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à)：

• 如css3動(dòng)畫(huà)實(shí)現(xiàn)的掃一掃;
• 刪除消息列表item，通過(guò)vue-animated-list 實(shí)現(xiàn)動(dòng)畫(huà)移除;
• 消息頁(yè)右上角+的顯出無(wú)動(dòng)畫(huà)，隱藏有動(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ā)約定

所有組件.vue名 都統(tǒng)一 《短橫線》 命名
css內(nèi)下劃線( _ )開(kāi)始的為通用類(lèi)
js中內(nèi)下劃線( _ )開(kāi)頭的為私有屬性
所有events均使用短橫線 命名
所有組件(.vue)里template標(biāo)簽包含的元素必須是component-xx 開(kāi)頭
所有state統(tǒng)一下劃線 命名
所有 action統(tǒng)一下劃線命名

參考

Vue-cnodejs

vue-zhihu-daily

vue-mobile-qq

vue-shopping

關(guān)于作者

微博:Water楊濤