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

目录(?)[-]

1. vue-wechat
   1. 安装
   2. 技术栈
   3. 为了减少图片加载图标使用的iconfont
   4. 手机预览QR
   5. 基本操作
   6. 开发约定
   7. 参考

   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