用vue.js开发微信app界面的demo
线上地址: vue-wechat.github.io
项目地址: useryangtao/vue-wechat
github.io 加载略慢, 建议clone本地调试预览。
# install dependenciescnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build
vue-wechat是主要在利用Vue.js * 实现了微信app及很多细节。
此demo在实现上使用了以下技术
新页面跳转的过渡动画 参照ios系统的页面切换风格,是通过router-view及transition特性结合实现的。
消息列表页的item 左划操作处理,使用vuex(getters,actions)实现实时处理计算数据
(语音/文字)对话框 组件间 动画切换,还有通过事件注册tap 实现 按住说话效果;
还有一些交互行为细节及动画:
朋友圈下拉拖拽显示完整封面
listview部分也使用了weui的结构。
小图标全部使用iconfont方式,减少图片请求。
(仿照ios系统切换风格:下一页打开时,当前页左偏移-30%;当前页关闭时,上一页左偏移从-30%过渡到0%)
所有组件.vue名 都统一 《短横线》 命名css内下划线( _ )开始的为通用类js中内下划线( _ )开头的为私有属性所有events均使用短横线 命名所有组件(.vue)里template标签包含的元素必须是component-xx 开头所有state统一下划线 命名所有 action统一下划线命名
微博:Water杨涛
联系客服