Skip to content

🔥🔥🔥 利用 Vue2.x 来高仿微信(WeChat)7.0.x App,良好的代码规范、注释详解、以及接近原生App的视觉体验。

Notifications You must be signed in to change notification settings

CoderMikeHe/vue-wechat

Repository files navigation

vue-wechat

概述

  • 利用vue/cli 3.x + vue 2.x + vue-route 3.x + vuex 3.x 来构建和模仿微信7.0.x app,同时利用weui.css 2.0.x提供样式和weui.js 1.2.x提供基础js封装,从而达到与原生app相近的视觉效果。

  • 笔者于2019年02月入坑H5开发,纯属小白一枚,此项目初衷还是想通过项目实践新技术,在业务实践中发现问题,从而积累技术经验,源码中有详细的注释,以及发现问题和解决问题的思路。

  • 笔者希望初学者通过学习和实践这个项目,能够打开学习vue的大门。当然同时也是抛砖引玉,取长补短,希望能够提供一点思路,少走一些弯路,填补一些细坑,在帮助他人的过程中,收获分享技术的乐趣。


使用

  • 线上预览:https://codermikehe.github.io/vue-wechat/

  • 项目运行

     npm install    // 项目初始化         
     npm run serve  // 项目运行
    
  • 使用注意

    • 笔者建议统一使用桌面端Chrome浏览器预览,手机预览可能会有少许Bug。
    • Mac电脑:① 打开Chrome浏览器;② 打开 开发者工具(PS:【鼠标右键】-【检查】 Or Cmd+Alt+I); ③ 模拟手机预览 (PS:Cmd+Shift+M)
    • Windows电脑:① 打开Chrome浏览器;② 打开 开发者工具(PS:F12); ③ 模拟手机预览 (PS:Ctrl+Shift+M)
    • 桌面端预览,请忽略掉浏览器的前进和后退按钮,毕竟移动端是没有这两个玩意滴,返回一般都是点击返回按钮来驱动的。
    • 登陆和注册:只支持QQ账号手机号的登录或注册(PS:后期增加微信号和QQ邮箱登陆),且必须保证QQ手机号的有效性。密码或者验证码可以随便输入,但必须是:密码长度需要保证在8~16位,手机验证码必须保证是6位有效数字

期待

  • 如果在使用过程中遇到BUG,希望你能Issues我,谢谢(或者尝试下载最新的代码看看BUG修复没有)。
  • 如果在使用过程中有任何地方不理解,希望你能Issues我,我非常乐意促使项目的理解和使用,谢谢。
  • 如果通过该工程的使用和说明文档的阅读,对你在平时开发中有帮助,码字不易,还请点击右上角star按钮,谢谢;
  • 简书地址:https://www.jianshu.com/u/126498da7523

商业互吹

About

🔥🔥🔥 利用 Vue2.x 来高仿微信(WeChat)7.0.x App,良好的代码规范、注释详解、以及接近原生App的视觉体验。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published