4 |
5 | ### 概述
6 | - 利用`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相近的视觉效果。
7 |
8 | - 笔者于**2019年02月**入坑H5开发，纯属小白一枚，此项目初衷还是想通过项目实践新技术，在业务实践中发现问题，从而积累技术经验，源码中有详细的注释，以及发现问题和解决问题的思路。
9 |
10 | - 笔者希望初学者通过学习和实践这个项目，能够打开学习`vue`的大门。当然同时也是抛砖引玉，取长补短，希望能够提供一点思路，少走一些弯路，填补一些细坑，在帮助他人的过程中，收获分享技术的乐趣。
11 |
12 | ---
13 |
14 | ### 使用
15 | - 线上预览：
3 |
103 |
104 |
105 |
113 |
114 |
115 |
131 |
--------------------------------------------------------------------------------
/src/components/alert-view/AlertView.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CoderMikeHe/vue-wechat/87605d238e09363d4506e76d76200a150163ca93/src/components/alert-view/AlertView.vue
--------------------------------------------------------------------------------
/src/components/launch/Launch.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
20 |
42 |
--------------------------------------------------------------------------------
/src/components/loading/Loading.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
10 |
Installed CLI Plugins
12 |-
13 |
- 14 | babel 20 | 21 |
- 22 | eslint 28 | 29 |
- 30 | unit-mocha 36 | 37 |
- 38 | e2e-cypress 44 | 45 |
Essential Links
47 |-
48 |
- 49 | Core Docs 50 | 51 |
- 52 | Forum 55 | 56 |
- 57 | Community Chat 60 | 61 |
- 62 | Twitter 65 | 66 |
- 67 | News 68 | 69 |
Ecosystem
71 |-
72 |
- 73 | vue-router 76 | 77 |
- 78 | vuex 79 | 80 |
- 81 | vue-devtools 87 | 88 |
- 89 | vue-loader 92 | 93 |
- 94 | awesome-vue 100 | 101 |
8 |
9 |
21 |
15 |
16 |
20 |
17 | {{ $t(text) || $t("loading") }}
3 |
41 |
42 |
43 |
72 |
73 |
99 |
--------------------------------------------------------------------------------
/src/components/loadmore/loadmore_up_arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CoderMikeHe/vue-wechat/87605d238e09363d4506e76d76200a150163ca93/src/components/loadmore/loadmore_up_arrow.png
--------------------------------------------------------------------------------
/src/components/navigationBar/index.js:
--------------------------------------------------------------------------------
1 | import NavigationBarComp from './NavigationBar.vue';
2 |
3 | // 这里是重点
4 | const NavigationBar = {
5 | install: function(Vue){
6 | Vue.component('NavigationBar',NavigationBarComp);
7 | }
8 | };
9 |
10 | // 导出组件
11 | export default NavigationBar;
12 |
13 | // 🔥 vue自定义全局组件
14 | // https://www.jianshu.com/p/26ba589bc161
15 | // https://blog.csdn.net/weixin_42283462/article/details/80600623
16 | // - [vue自定义组件(通过Vue.use()来使用)即install的使用](https://blog.csdn.net/wang729506596/article/details/81018270)
17 |
18 | // - [Vuejs（16）——Vue插件写、用详解（附demo）](https://blog.csdn.net/qq20004604/article/details/56965703)
19 | // - [自己写个vue.js插件(1):自定义指令的妙用](https://blog.csdn.net/github_26672553/article/details/53046923)
20 | // - [实战Vue组件和Mixins](https://www.w3cplus.com/vue/practical-use-of-components-and-mixins-in-vue-js.html)
21 | // - [Vue2.0学习笔记：Vue中的Mixins](https://www.w3cplus.com/vue/vue-mixins.html)
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/components/toast/Toast.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CoderMikeHe/vue-wechat/87605d238e09363d4506e76d76200a150163ca93/src/components/toast/Toast.vue
--------------------------------------------------------------------------------
/src/components/vue-route-transition/RouteLayout.vue:
--------------------------------------------------------------------------------
1 |
2 | toubu
4 |
5 |
10 |
38 |
39 |
40 | 00000000000
11 |123
12 |123
13 |123
14 |123
15 |123
16 |123
17 |123
18 | 32 |123
33 |123
34 |123
35 |123
36 |8888888888
37 |
3 |
4 |
6 |
7 |
9 |
12 |
13 |
14 |
32 |
33 |
58 |
--------------------------------------------------------------------------------
/src/components/vue-route-transition/index.js:
--------------------------------------------------------------------------------
1 | import RouteTransition from './RouteTransition.vue'
2 | import RouteLayout from './RouteLayout.vue'
3 |
4 | const install = function (Vue) {
5 | Vue.component(RouteTransition.name, RouteTransition)
6 | Vue.component(RouteLayout.name, RouteLayout)
7 | }
8 |
9 | if (typeof window !== 'undefined' && window.Vue) {
10 | install(window.Vue)
11 | }
12 |
13 | export default {
14 | install
15 | }
16 |
--------------------------------------------------------------------------------
/src/modules.js:
--------------------------------------------------------------------------------
1 | export default (modules, handler) => {
2 | let result = {}
3 | modules.keys().forEach(fileName => {
4 | const oneModule = modules(fileName)
5 | const moduleName = fileName
6 | // 移除开始的 './'
7 | .replace(/^\.\//, '')
8 | // 移除文件扩展
9 | .replace(/\.\w+$/, '')
10 | let moduleValue
11 | if (typeof handler === 'function') {
12 | moduleValue = handler(oneModule.default)
13 | } else {
14 | moduleValue = oneModule.default
15 | }
16 | result[moduleName] = moduleValue
17 | })
18 | return result
19 | }
20 |
--------------------------------------------------------------------------------
/src/store/modules/badge.js:
--------------------------------------------------------------------------------
1 | // 处理全局的红点点
2 | const state = {
3 | // 微信
4 | mainframe: {
5 | type: 'digit',
6 | value: 0,
7 | text:'',
8 | show: false,
9 | dot: false
10 | },
11 | // 发现页
12 | discover: {
13 | moments: {
14 | type: 'dot',
15 | value: 1,
16 | text:'',
17 | show: true,
18 | dot: true
19 | },
20 | type: 'dot',
21 | value: 1,
22 | text:'',
23 | show: true,
24 | dot: true
25 | },
26 | // 我
27 | profile: {
28 | camera: {
29 | type: 'dot',
30 | value: 1,
31 | text:'',
32 | show: true,
33 | dot: true
34 | },
35 | type: 'new',
36 | value: 1,
37 | text:'NEW',
38 | show: true,
39 | dot: false
40 | },
41 |
42 | }
43 |
44 | const getters = {
45 |
46 | }
47 |
48 | const actions = {
49 |
50 | }
51 |
52 | const mutations = {
53 | // 修改mainframe的badge
54 | changeMainframe(state, badge) {
55 | // Mutation 需遵守 Vue 的响应规则 https://vuex.vuejs.org/zh/guide/mutations.html
56 | state.mainframe = Object.assign({}, badge)
57 | },
58 | // 修改discover的badge
59 | changeDiscover(state, badge) {
60 | // Mutation 需遵守 Vue 的响应规则 https://vuex.vuejs.org/zh/guide/mutations.html
61 | state.discover = Object.assign({}, badge)
62 | },
63 | // 修改profile的badge
64 | changeProfile(state, badge) {
65 | // Mutation 需遵守 Vue 的响应规则 https://vuex.vuejs.org/zh/guide/mutations.html
66 | state.profile = Object.assign({}, badge)
67 | }
68 | }
69 |
70 |
71 |
72 | export default {
73 | namespaced: true,
74 | state,
75 | getters,
76 | actions,
77 | mutations
78 | }
79 |
--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | import modules from '../modules'
4 | // 存储类
5 | import Storage from '../assets/js/MHPreferenceSettingHelper'
6 | // 常量类
7 | import Constant from '../assets/js/constant/constant'
8 |
9 | // 类似单利
10 | // PS： root store 只处理用户信息，其他的请放在 modules 中，例如：badge.js
11 | Vue.use(Vuex)
12 |
13 | // 获取本地缓存的用户信息
14 | let user = JSON.parse(Storage.getItem(Constant.MH_USER_INFO_KEY) || '{}')
15 | console.log('🔥😴😿 ** USER ** 😴😿🔥', user)
16 |
17 | export default new Vuex.Store({
18 | state: {
19 | // 当前登陆用户
20 | user: user
21 | },
22 | mutations: {
23 | // 登陆用户
24 | loginUser(state, user) {
25 | // 0 记录User
26 | state.user = user
27 | // 1 归档用户数据
28 | // 0. 对象转json字符串
29 | let jsonStr = JSON.stringify(user)
30 | // 1. 归档数据
31 | Storage.setItem(Constant.MH_USER_INFO_KEY, jsonStr)
32 | },
33 | // 登出用户
34 | logoutUser(state) {
35 | // 只需要将 vuex 的user置位空对象即可，无需删除本地数据
36 | // 20190723 Fixed Bug：就算退出登录了 也不要置空user，而是删除掉登录账号即可
37 | // state.user = {};
38 | }
39 | },
40 | getters: {},
41 | actions: {},
42 | modules: modules(require.context('./modules', true, /.+\.js$/))
43 | })
44 |
--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
16 |
17 |
28 |
--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 | This is an about page
4 |
3 | 
4 |
6 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
/src/views/contacts/AddFriends.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
3 |
58 |
59 |
60 |
79 |
80 |
93 |
--------------------------------------------------------------------------------
/src/views/contacts/Contacts.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
57 | 你好吗
6 |你好
7 |你好
8 |你好
9 |你好
10 |你好
11 |你好
12 |你好
13 |你好
14 |你好
15 |你好
16 |你好
17 |你好
18 |你好
19 |你好
20 |你好
21 |你好
22 |你好
23 |你好
24 |你好
25 |你好
26 |你好
27 |你好
28 |你好
29 |你好
30 |你好
31 |你好
32 |你好
33 |你好
34 |你好
35 |你好
36 |你好
37 |你好
38 |你好
39 |你好
40 |你好
41 |你好
42 |你好
43 |你好
44 |你好
45 |你好
46 |你好
47 |你好
48 |你好
49 |你好
50 |你好
51 |你好
52 |你好
53 |你好
54 |你好
55 |我不好
56 |
9 |
10 |
13 |
14 |
23 |
24 | 我是头部
15 |
16 | {{
17 | slotProps.user.lastName
18 | }}
19 |
20 | 我是尾部
21 |
22 |
3 |
5 |
7 |
8 | {{ user.firstName }}
9 |
10 |
13 |
14 |
15 |
16 |
28 |
29 |
52 |
--------------------------------------------------------------------------------
/src/views/discover/Test.vue:
--------------------------------------------------------------------------------
1 |
2 | Slot Test
4 |
3 |
18 |
19 |
20 |
32 |
33 |
38 |
--------------------------------------------------------------------------------
/src/views/discover/moments/view/MomentOperationMore.vue:
--------------------------------------------------------------------------------
1 |
2 | 检点点0
4 |检点点
5 | 6 |检点点
7 |检点点
8 |检点点
9 |检点点
10 |检点点
11 |检点点
12 |检点点
13 |检点点
14 |检点点
15 |检点点
16 |检点点222222
17 |
3 |
21 |
22 |
23 |
76 |
77 |
147 |
--------------------------------------------------------------------------------
/src/views/discover/moments/view/MomentProfile.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
10 | 
15 |
16 | {{ liked ? "取消" : "赞" }}
17 |
18 |
19 |
15 | 评论
20 |
3 |
24 |
25 |
26 |
85 |
86 |
165 |
--------------------------------------------------------------------------------
/src/views/discover/other/MomentsOther.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
13 | {{ user.screen_name }}
9 |
10 | ![]()
11 |
12 |
14 |
23 |
19 |
20 |
21 |
22 |
9 | ![]()
18 |
19 | 点击内容：👉{{ value }}
10 |
4 |
6 | 这是一段文字
5 |
3 |
36 |
37 |
38 |
106 |
107 |
113 |
--------------------------------------------------------------------------------
/src/views/mainframe/chat/ChatMessage.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
35 |
14 |
33 |
34 |
3 | ![]()
11 |
12 |
13 |
14 |
79 |
80 |
102 |
--------------------------------------------------------------------------------
/src/views/profile/ChatRecord.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CoderMikeHe/vue-wechat/87605d238e09363d4506e76d76200a150163ca93/src/views/profile/ChatRecord.vue
--------------------------------------------------------------------------------
/src/views/profile/DiscoverManager.vue:
--------------------------------------------------------------------------------
1 | // 发现页管理
2 |
3 |
10 |
22 |
15 |
21 |
5 |
18 |
15 |
17 |
8 |
24 |
26 |
27 |
13 |
19 |
20 |