{"id":16490533,"url":"https://github.com/dave-wind/mpvue-netbar","last_synced_at":"2025-03-23T12:34:38.181Z","repository":{"id":174889518,"uuid":"127722009","full_name":"dave-wind/mpvue-netBar","owner":"dave-wind","description":"use mpvue for find network","archived":false,"fork":false,"pushed_at":"2022-09-20T12:29:04.000Z","size":269,"stargazers_count":16,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T20:40:43.367Z","etag":null,"topics":["mpvue","vue-router2","vue2","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dave-wind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-02T07:38:58.000Z","updated_at":"2024-11-22T08:20:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"eda403fe-b00b-44a9-bd4e-08c2cdeb2a5b","html_url":"https://github.com/dave-wind/mpvue-netBar","commit_stats":null,"previous_names":["dave-wind/mpvue-netbar"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dave-wind%2Fmpvue-netBar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dave-wind%2Fmpvue-netBar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dave-wind%2Fmpvue-netBar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dave-wind%2Fmpvue-netBar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dave-wind","download_url":"https://codeload.github.com/dave-wind/mpvue-netBar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245104460,"owners_count":20561377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mpvue","vue-router2","vue2","webpack"],"created_at":"2024-10-11T13:48:20.187Z","updated_at":"2025-03-23T12:34:38.146Z","avatar_url":"https://github.com/dave-wind.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mpvue-netbar\n\n\u003e mpvue 组件化开发 地图组件系列\n\n## 设计初衷\n\u0026nbsp;\u0026nbsp;本人喜欢上网,穿梭各大城市之间时 眼光不光停留在山水高楼之间 也会驻扎于网咖，因为没钱住旅馆 那仿佛就像我的家，我的港湾，正好基于mpvue就想开发一套找网咖的小程序\n1.0版本：在借鉴了大神小明找厕所小程序版后开发的，具体功能如下:  \n1.定位附近网咖  \n2.展示网咖信息  \n3.点击绘制步行路线  \n4.手机定位导航  \nemmmm, 我知道这段开门见山的话很拙 没事 感兴趣你继续往下瞅瞅~\n\n### 项目入口\n\u003cp\u003e\n  \u003cimg alt=\"\" src=\"https://user-images.githubusercontent.com/28003460/191257495-c40cfa4d-3e47-4132-b820-ef2becadc380.jpg\"/\u003e\n\u003c/p\u003e\n\n\n## 初始化\n\n``` bash\n# 全局安装 vue-cli\n$ npm install --global vue-cli\n\n# 创建一个基于 mpvue-quickstart 模板的新项目\n$ vue init mpvue/mpvue-quickstart mpvue-network\n\n# 安装依赖\n$ cd mpvue-network\n$ npm install  或者 cnpm install (淘宝镜像)\n# 启动构建\n$ npm run dev\n```\n## 项目主结构\n\u003e vue 组件化\n```\n│  \n├─api                         //接口 js 支持wx promise写法\n│      requestIntercept.js    \n│      wxp.js\n│      \n├─components                  //组件\n│      address.vue            //展示bar地址信息组件\n│      net-fixed.vue          //定位按钮组件 用于跳转\n│      net-map.vue            //地图组件基于wx map\n│      permis.vue             //权限组件基于 wx 权限\n│      \n├─pages                       //小程序页面\n│  ├─goBar                    //Route 步行规划页面\n│  │      index.vue\n│  │      main.js             \n│  │      \n│  └─index                    //项目主页面 数据的分配\n│          index.vue\n│          main.js\n│          \n├─store                       // vuex\n│      action.js\n│      getters.js\n│      index.js\n│      mutation-types.js\n│      mutations.js\n│      state.js\n├─utils                       // 工具类\n│\n│  App.vue                    // 不解释\n│  bus.js                     // Vue Bus\n│  global.js                  // Vue.prototype 拓展 wx api \n│  main.js                    // mpvue 入口\n```\n\n### 设计流程图\n\u003cp\u003e\n  \u003cimg alt=\"\" src=\"./screenshots/index.png\"/\u003e\n  \u003cimg alt=\"\" src=\"./screenshots/permis.png\"/\u003e\n  \u003cimg alt=\"\" src=\"./screenshots/main.png\"/\u003e\n\u003c/p\u003e\n\n### js部分\n\u0026nbsp;\u0026nbsp;这是 pages下index的主页面 组件思想编写, 数据采用vuex存储 \u0026\u0026 组件通信 \n``` js\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv v-if=\"permit\"\u003e\n      \u003cnet-map\n        :longitude=\"longitude\"\n        :latitude=\"latitude\"\n        :search=\"search\"\u003e\n      \u003c/net-map\u003e\n      \u003cnet-address\u003e\u003c/net-address\u003e\n      \u003cnet-fixed :cname=\"fxClass\"\n                 typeInfo=\"info\"\n                 :fxShow=\"fxShow\"\n                 @click=\"goDetail\"\u003e\n\n      \u003c/net-fixed\u003e\n    \u003c/div\u003e\n    \u003cpermission\n      @changePermit=\"changePermit\"\n      @setLocation=\"setLocation\"\n      @getUserInfo=\"getUserInfo\"\n      @openSetting=\"openSetting\"\u003e\n    \u003c/permission\u003e\n  \u003c/div\u003e\n```\n\n### 总结\n\u0026nbsp;\u0026nbsp;相对于mpvue 就是算踩坑了 里面有很多意想不到的问题的，对于该项目还是总结以下几点:    \n1.在mpvue里尽量不要用小程序生命周期。    \n2.在mpvue里没有router每个页面需要配置main.js以及接口交互最好用flyio,如果对这几点深感洁癖的追求完美的可以用大神的插件:      \n* [mpvue-entry](https://github.com/F-loat/mpvue-entry) - 集中式页面配置，不再需要重复编辑各页面的 main.js 文件  \n* [mpvue-router-patch](https://github.com/F-loat/mpvue-router-patch) - 在 mpvue 中使用 vue-router 兼容的路由写法  \n* [fly](https://github.com/wendux/fly) - 支持所有JavaScript运行时请求转发和基于Promise的HTTP客户端    \n\n3.模块化思想很重要 写之前整理好  \n4.webpack 解析wx 需要配置，mpvue框架 组件化css 需要配置 等等都需要注意 有问题请看mpvue的Issues    \n5.mpvue 数据data方面不能放过多数据 要把业务和组件抽离分开    \n6.真的意识到写好项目不难，但是写出一个可维护且高质量的代码真的很难。\n7.该项目目前是1.0版本, 默认只是查询附近网吧功能，实际上组件已经抽离出来 可通过父组件传值改变搜索的内容，后期还会逐步升级，希望通过爬虫获取详情数据，敬请期待。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdave-wind%2Fmpvue-netbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdave-wind%2Fmpvue-netbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdave-wind%2Fmpvue-netbar/lists"}