https://github.com/dave-wind/mpvue-netbar
use mpvue for find network
https://github.com/dave-wind/mpvue-netbar
mpvue vue-router2 vue2 webpack
Last synced: over 1 year ago
JSON representation
use mpvue for find network
- Host: GitHub
- URL: https://github.com/dave-wind/mpvue-netbar
- Owner: dave-wind
- Created: 2018-04-02T07:38:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-09-20T12:29:04.000Z (almost 4 years ago)
- Last Synced: 2025-03-18T20:40:43.367Z (over 1 year ago)
- Topics: mpvue, vue-router2, vue2, webpack
- Language: JavaScript
- Size: 263 KB
- Stars: 16
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mpvue-netbar
> mpvue 组件化开发 地图组件系列
## 设计初衷
本人喜欢上网,穿梭各大城市之间时 眼光不光停留在山水高楼之间 也会驻扎于网咖，因为没钱住旅馆 那仿佛就像我的家，我的港湾，正好基于mpvue就想开发一套找网咖的小程序
1.0版本：在借鉴了大神小明找厕所小程序版后开发的，具体功能如下:
1.定位附近网咖
2.展示网咖信息
3.点击绘制步行路线
4.手机定位导航
emmmm, 我知道这段开门见山的话很拙 没事 感兴趣你继续往下瞅瞅~
### 项目入口
## 初始化
``` bash
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart mpvue-network
# 安装依赖
$ cd mpvue-network
$ npm install 或者 cnpm install (淘宝镜像)
# 启动构建
$ npm run dev
```
## 项目主结构
> vue 组件化
```
│
├─api //接口 js 支持wx promise写法
│ requestIntercept.js
│ wxp.js
│
├─components //组件
│ address.vue //展示bar地址信息组件
│ net-fixed.vue //定位按钮组件 用于跳转
│ net-map.vue //地图组件基于wx map
│ permis.vue //权限组件基于 wx 权限
│
├─pages //小程序页面
│ ├─goBar //Route 步行规划页面
│ │ index.vue
│ │ main.js
│ │
│ └─index //项目主页面 数据的分配
│ index.vue
│ main.js
│
├─store // vuex
│ action.js
│ getters.js
│ index.js
│ mutation-types.js
│ mutations.js
│ state.js
├─utils // 工具类
│
│ App.vue // 不解释
│ bus.js // Vue Bus
│ global.js // Vue.prototype 拓展 wx api
│ main.js // mpvue 入口
```
### 设计流程图
### js部分
这是 pages下index的主页面 组件思想编写, 数据采用vuex存储 && 组件通信
``` js
```
### 总结
相对于mpvue 就是算踩坑了 里面有很多意想不到的问题的，对于该项目还是总结以下几点:
1.在mpvue里尽量不要用小程序生命周期。
2.在mpvue里没有router每个页面需要配置main.js以及接口交互最好用flyio,如果对这几点深感洁癖的追求完美的可以用大神的插件:
* [mpvue-entry](https://github.com/F-loat/mpvue-entry) - 集中式页面配置，不再需要重复编辑各页面的 main.js 文件
* [mpvue-router-patch](https://github.com/F-loat/mpvue-router-patch) - 在 mpvue 中使用 vue-router 兼容的路由写法
* [fly](https://github.com/wendux/fly) - 支持所有JavaScript运行时请求转发和基于Promise的HTTP客户端
3.模块化思想很重要 写之前整理好
4.webpack 解析wx 需要配置，mpvue框架 组件化css 需要配置 等等都需要注意 有问题请看mpvue的Issues
5.mpvue 数据data方面不能放过多数据 要把业务和组件抽离分开
6.真的意识到写好项目不难，但是写出一个可维护且高质量的代码真的很难。
7.该项目目前是1.0版本, 默认只是查询附近网吧功能，实际上组件已经抽离出来 可通过父组件传值改变搜索的内容，后期还会逐步升级，希望通过爬虫获取详情数据，敬请期待。