mpvue-netbar

mpvue 组件化开发 地图组件系列

设计初衷

  本人喜欢上网,穿梭各大城市之间时 眼光不光停留在山水高楼之间 也会驻扎于网咖，因为没钱住旅馆 那仿佛就像我的家，我的港湾，正好基于mpvue就想开发一套找网咖的小程序 1.0版本：在借鉴了大神小明找厕所小程序版后开发的，具体功能如下:
1.定位附近网咖
2.展示网咖信息
3.点击绘制步行路线
4.手机定位导航
emmmm, 我知道这段开门见山的话很拙 没事 感兴趣你继续往下瞅瞅~

项目入口

初始化

# 全局安装 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存储 && 组件通信

<div class="container">
    <div v-if="permit">
      <net-map
        :longitude="longitude"
        :latitude="latitude"
        :search="search">
      </net-map>
      <net-address></net-address>
      <net-fixed :cname="fxClass"
                 typeInfo="info"
                 :fxShow="fxShow"
                 @click="goDetail">

      </net-fixed>
    </div>
    <permission
      @changePermit="changePermit"
      @setLocation="setLocation"
      @getUserInfo="getUserInfo"
      @openSetting="openSetting">
    </permission>
  </div>

总结

  相对于mpvue 就是算踩坑了 里面有很多意想不到的问题的，对于该项目还是总结以下几点:
1.在mpvue里尽量不要用小程序生命周期。
2.在mpvue里没有router每个页面需要配置main.js以及接口交互最好用flyio,如果对这几点深感洁癖的追求完美的可以用大神的插件:

• mpvue-entry - 集中式页面配置，不再需要重复编辑各页面的 main.js 文件
• mpvue-router-patch - 在 mpvue 中使用 vue-router 兼容的路由写法
• fly - 支持所有JavaScript运行时请求转发和基于Promise的HTTP客户端

3.模块化思想很重要 写之前整理好
4.webpack 解析wx 需要配置，mpvue框架 组件化css 需要配置 等等都需要注意 有问题请看mpvue的Issues
5.mpvue 数据data方面不能放过多数据 要把业务和组件抽离分开
6.真的意识到写好项目不难，但是写出一个可维护且高质量的代码真的很难。 7.该项目目前是1.0版本, 默认只是查询附近网吧功能，实际上组件已经抽离出来 可通过父组件传值改变搜索的内容，后期还会逐步升级，希望通过爬虫获取详情数据，敬请期待。