[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8872":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},8872,"vue-wechat","useryangtao\u002Fvue-wechat","useryangtao","用Vue.js开发微信app","",null,"Vue",1677,486,100,10,0,1,53.16,false,"master",true,[23,24,25,26,27,28],"vue","vue-cli","vue-router","vuex","wechat","weui","2026-06-12 04:00:41","# vue-wechat\n  用vue.js开发微信app\n\n#### 主要初衷还是自己可以通过个人项目实践新技术，在业务中发现问题，积累经验。并且可以与各位交流发现不足。\n\n  线上地址:  [vue-wechat.github.io](https:\u002F\u002Fvue-wechat.github.io)\n\n  项目地址:  [useryangtao\u002Fvue-wechat](https:\u002F\u002Fgithub.com\u002Fuseryangtao\u002Fvue-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  (语音\u002F文字)对话框 组件间 动画切换，还有通过事件注册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  ![](.\u002Fsrc\u002Fassets\u002Fimages\u002Freadme\u002Fqr-vue-wechat.png)\n  \n  如微信扫码浏览空白，请 点击右上角-> 浏览器 打开\n  首次加载都很慢,请耐心等待。\n\n\n\n### 基本操作\n\n  主页\n\n  ![](.\u002Fsrc\u002Fassets\u002Fimages\u002Freadme\u002Fview-chat-contact.png)![](.\u002Fsrc\u002Fassets\u002Fimages\u002Freadme\u002Fview-chat.png)\n\n  页面切换,动画过渡\n  (仿照ios系统切换风格:下一页打开时,当前页左偏移-30%;当前页关闭时,上一页左偏移从-30%过渡到0%)\n\n  ![](.\u002Fsrc\u002Fassets\u002Fimages\u002Freadme\u002Fview-wechat-animation.gif)\n\n  消息列表 (未读\u002F已读)操作 及 删除\n\n  ![](.\u002Fsrc\u002Fassets\u002Fimages\u002Freadme\u002Fview-wechat-chat.gif)\n\n  按下说话,松开结束 效果\n\n  ![](.\u002Fsrc\u002Fassets\u002Fimages\u002Freadme\u002Ftap-say.png)\n\n  发现-朋友圈\n\n  ![](.\u002Fsrc\u002Fassets\u002Fimages\u002Freadme\u002Fview-wechat-find-albums-friends.gif)\n\n  发现-扫一扫\n\n  ![](.\u002Fsrc\u002Fassets\u002Fimages\u002Freadme\u002Fview-wechat-find-sao-yi-sao.gif)\n\n  图标-iconfont\n\n#### 为了减少图片加载,图标使用的iconfont\n\n  ![](.\u002Fsrc\u002Fassets\u002Fimages\u002Freadme\u002Ffont.png)\n\n### 添加到主屏幕\n\n  ![](.\u002Fsrc\u002Fassets\u002Fimages\u002Freadme\u002Fadd-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:\u002F\u002Fgithub.com\u002Fshinygang\u002FVue-cnodejs)\n\n  [vue-zhihu-daily](https:\u002F\u002Fgithub.com\u002Fhilongjw\u002Fvue-zhihu-daily)\n\n  [vue-mobile-qq](https:\u002F\u002Fgithub.com\u002Fhilongjw\u002Fvue-mobile-qq)\n\n  [vue-shopping](https:\u002F\u002Fgithub.com\u002Fandylei18\u002Fvue-shopping)\n\n### 关于作者\n\n微博:[Water杨涛](http:\u002F\u002Fweibo.com\u002Fu\u002F3503321141)\n\n```\n\u002F\u002F TODO\n\n####《用vue2开发微信app界面》\n\n开发完善的功能，如实现注册账号，加好友，实现聊天功能，等。\n\n```\n  \n","vue-wechat 是一个使用 Vue.js 开发的微信应用界面项目。它通过 Vue、Vuex、Vue Router 和 WeUI 等技术栈，实现了微信应用中的多个核心功能，包括消息列表、聊天界面、朋友圈以及扫一扫等功能。项目中特别注重用户体验，例如实现了页面切换时的平滑过渡动画、消息列表中的左划操作和语音输入效果等。此外，为了提高加载速度，所有图标均采用 iconfont 方式呈现。该项目适合前端开发者学习 Vue.js 及相关技术的应用实践，同时也可作为构建类似即时通讯应用的基础模板。",2,"2026-06-11 03:20:06","top_language"]