{"id":13536350,"url":"https://github.com/useryangtao/vue-wechat","last_synced_at":"2025-05-16T03:05:28.726Z","repository":{"id":45586194,"uuid":"67803662","full_name":"useryangtao/vue-wechat","owner":"useryangtao","description":"用Vue.js开发微信app","archived":false,"fork":false,"pushed_at":"2017-10-19T06:52:51.000Z","size":12499,"stargazers_count":1679,"open_issues_count":11,"forks_count":494,"subscribers_count":101,"default_branch":"master","last_synced_at":"2025-04-08T13:12:17.894Z","etag":null,"topics":["vue","vue-cli","vue-router","vuex","wechat","weui"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/useryangtao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-09T14:01:06.000Z","updated_at":"2025-03-19T11:34:18.000Z","dependencies_parsed_at":"2022-09-17T03:30:46.708Z","dependency_job_id":null,"html_url":"https://github.com/useryangtao/vue-wechat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useryangtao%2Fvue-wechat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useryangtao%2Fvue-wechat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useryangtao%2Fvue-wechat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useryangtao%2Fvue-wechat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/useryangtao","download_url":"https://codeload.github.com/useryangtao/vue-wechat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459088,"owners_count":22074605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vue-cli","vue-router","vuex","wechat","weui"],"created_at":"2024-08-01T09:00:37.606Z","updated_at":"2025-05-16T03:05:23.719Z","avatar_url":"https://github.com/useryangtao.png","language":"Vue","funding_links":[],"categories":["Vue","Demo示例","Vue（104）"],"sub_categories":[],"readme":"# vue-wechat\n  用vue.js开发微信app\n\n#### 主要初衷还是自己可以通过个人项目实践新技术，在业务中发现问题，积累经验。并且可以与各位交流发现不足。\n\n  线上地址:  [vue-wechat.github.io](https://vue-wechat.github.io)\n\n  项目地址:  [useryangtao/vue-wechat](https://github.com/useryangtao/vue-wechat)\n\n  github.io 加载略慢, 建议clone本地调试预览。\n\n\n### 安装\n\n``` bash\n# install dependencies\ncnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n```\n### 技术栈\n  vue-wechat是主要在利用Vue.js * 实现了微信app及很多细节。\n\n  此demo在实现上使用了以下技术\n  \n  - vue\n  - vuex\n  - vue-cli\n  - vue-router\n  - vue-touch\n  - vue-animated-list\n  - weui\n  - zepto\n  - fastclick\n\n#### 一些亮点\n\n  新页面跳转的过渡动画 参照ios系统的页面切换风格,是通过router-view及transition特性结合实现的。\n  \n  消息列表页的item 左划操作处理,使用vuex(getters,actions)实现实时处理计算数据\n  \n  (语音/文字)对话框 组件间 动画切换，还有通过事件注册tap 实现 按住说话效果；\n\n  还有一些交互行为细节及动画：\n   - 如css3动画实现的扫一扫;\n   - 删除消息列表item，通过vue-animated-list 实现动画移除;\n   - 消息页右上角+的显出无动画，隐藏有动画；\n  \n  朋友圈下拉拖拽显示完整封面\n  \n  listview部分也使用了weui的结构。 \n  \n  小图标全部使用iconfont方式,减少图片请求。\n  \n\n###手机预览(QR)\n\n  ![](./src/assets/images/readme/qr-vue-wechat.png)\n  \n  如微信扫码浏览空白，请 点击右上角-\u003e 浏览器 打开\n  首次加载都很慢,请耐心等待。\n\n\n\n### 基本操作\n\n  主页\n\n  ![](./src/assets/images/readme/view-chat-contact.png)![](./src/assets/images/readme/view-chat.png)\n\n  页面切换,动画过渡\n  (仿照ios系统切换风格:下一页打开时,当前页左偏移-30%;当前页关闭时,上一页左偏移从-30%过渡到0%)\n\n  ![](./src/assets/images/readme/view-wechat-animation.gif)\n\n  消息列表 (未读/已读)操作 及 删除\n\n  ![](./src/assets/images/readme/view-wechat-chat.gif)\n\n  按下说话,松开结束 效果\n\n  ![](./src/assets/images/readme/tap-say.png)\n\n  发现-朋友圈\n\n  ![](./src/assets/images/readme/view-wechat-find-albums-friends.gif)\n\n  发现-扫一扫\n\n  ![](./src/assets/images/readme/view-wechat-find-sao-yi-sao.gif)\n\n  图标-iconfont\n\n#### 为了减少图片加载,图标使用的iconfont\n\n  ![](./src/assets/images/readme/font.png)\n\n### 添加到主屏幕\n\n  ![](./src/assets/images/readme/add-to-screen.png)\n\n\n\n### 开发约定\n  ``` bash\n  所有组件.vue名 都统一 《短横线》 命名\n  css内下划线( _ )开始的为通用类\n  js中内下划线( _ )开头的为私有属性\n  所有events均使用短横线 命名\n  所有组件(.vue)里template标签包含的元素必须是component-xx 开头\n  所有state统一下划线 命名\n  所有 action统一下划线命名\n  ```\n\n\n### 参考\n\n  [Vue-cnodejs](https://github.com/shinygang/Vue-cnodejs)\n\n  [vue-zhihu-daily](https://github.com/hilongjw/vue-zhihu-daily)\n\n  [vue-mobile-qq](https://github.com/hilongjw/vue-mobile-qq)\n\n  [vue-shopping](https://github.com/andylei18/vue-shopping)\n\n### 关于作者\n\n微博:[Water杨涛](http://weibo.com/u/3503321141)\n\n```\n// TODO\n\n####《用vue2开发微信app界面》\n\n开发完善的功能，如实现注册账号，加好友，实现聊天功能，等。\n\n```\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseryangtao%2Fvue-wechat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuseryangtao%2Fvue-wechat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseryangtao%2Fvue-wechat/lists"}