脚本宝典收集整理的这篇文章主要介绍了用vue.js开发微信app界面,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
线上地址: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方式,减少图片请求。
如微信扫码浏览空白,请 点击右上角-> 浏览器 打开
所有组件.vue名 都统一 《短横线》 命名
css内下划线( _ )开始的为通用类
js中内下划线( _ )开头的为私有属性
所有events均使用短横线 命名
所有组件(.vue)里template标签包含的元素必须是component-xx 开头
所有state统一下划线 命名
所有 action统一下划线命名
微博:Water杨涛
以上是脚本宝典为你收集整理的用vue.js开发微信app界面全部内容,希望文章能够帮你解决用vue.js开发微信app界面所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。