Skip to content

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

Notifications You must be signed in to change notification settings

CoderMikeHe/vue-wechat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

87605d2 · Dec 16, 2019
Jun 4, 2019
Dec 16, 2019
Feb 21, 2019
Feb 21, 2019
Feb 27, 2019
Apr 15, 2019
Jun 29, 2019
Dec 5, 2019
Mar 6, 2019
Feb 21, 2019
Aug 15, 2019
Jul 26, 2019
Jul 24, 2019
Apr 11, 2019
Apr 11, 2019
Feb 21, 2019
Jun 21, 2019

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按钮,谢谢;
  • 简书地址:http://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