当前位置: 首页 > >

用 vue.js 开发微信 app(ios 版) 界面的 demo

发布时间:

https://github.com/useryangtao/vue-wechat


主题?
Vue.js?
iOS开发




vue-wechat

用vue.js开发微信app(ios版)界面的demo


线上地址:?vue-wechat.github.io


因为github.io的限制,每次访问的入口都应是从主页(?vue-wechat.github.io?)访问,不要刷新。


安装

# 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

    为了减少图片加载,图标使用的iconfont,
    手机预览(QR)


    如微信扫码浏览空白,请 点击右上角-> 浏览器 打开

    加载略慢,建议clone本地预览

    基本操作

    chat 页



    页面切换,动画过渡 (仿照ios系统切换风格:下一页打开时,当前页左偏移-30%;当前页关闭时,上一页左偏移从-30%过渡到0%)



    消息列表 (未读/已读)操作 及 删除



    发现-朋友圈



    发现-扫一扫



    开发约定

    所有组件.vue名 都统一 《短横线》 命名
    css内下划线( _ )开始的为通用类
    js中内下划线( _ )开头的为私有属性
    所有events均使用短横线 命名
    所有组件(.vue)里template标签包含的元素必须是component-xx 开头
    所有state统一下划线 命名
    所有 action统一下划线命名
    参考

    Vue-cnodejs


    vue-zhihu-daily


    vue-mobile-qq


    vue-shopping



友情链接: