用vue.js開發微信app界面

vue-wechat

用vue.js開發微信app界面的demo

線上地址:vue-wechat.github.io
項目地址:useryangtao/vue-wechat
github.io 加載略慢, 建議clone本地調試預覽。

安裝

# install dependencies
cnpm install

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

# build for production with minification
npm run build

技術棧

此demo在技術使用上如下技術的部分語法

• vue

• vuex

• vue-cli

• vue-router

• vue-toutch

• vue-animated-list

• weui

• zepto

• fastclick

一些亮點

　　　　新頁面跳轉的過渡動畫 參照ios系統的頁面切換風格,是經過router-view及transition特性結合實現的。

　　　　消息列表頁的item 左劃操做處理,使用vuex(getters,actions)實現實時處理計算數據

(語音/文字)對話框 組件間 動畫切換，還有經過事件註冊tap 實現 按住說話效果；

還有一些交互行爲細節及動畫：

• 如css3動畫實現的掃一掃;

• 刪除消息列表item，經過vue-animated-list 實現動畫移除;

• 消息頁右上角+的顯出無動畫，隱藏有動畫；

• 朋友圈下拉拖拽顯示完整封面

listview部分也使用了weui的結構。

小圖標所有使用iconfont方式,減小圖片請求。

手機預覽(QR)

如微信掃碼瀏覽空白，請 點擊右上角-> 瀏覽器 打開

基本操做

首頁

頁面切換,動畫過渡

仿照ios系統切換風格:下一頁打開時,當前頁左偏移-30%;當前頁關閉時,上一頁左偏移從-30%過渡到0%

消息列表 (未讀/已讀)操做 及 刪除

按下說話,鬆開結束 效果

發現-朋友圈

發現-掃一掃

圖標-iconfont

爲了減小圖片加載,圖標使用的iconfont

開發約定

全部組件.vue名 都統一 《短橫線》 命名
css內下劃線( _ )開始的爲通用類
js中內下劃線( _ )開頭的爲私有屬性
全部events均使用短橫線 命名
全部組件(.vue)裏template標籤包含的元素必須是component-xx 開頭
全部state統一下劃線 命名
全部 action統一下劃線命名

參考

Vue-cnodejs

vue-zhihu-daily

vue-mobile-qq

vue-shopping

關於做者

微博:Water楊濤