mpvue外卖小程序

前言

首先说说为何本身会想着写一个小程序emmmmmm 感受没有为何 就是想写了 我就干了hhhhh~~~

我就粗略看了一下小程序的官方文档和mpvue的文档 而后就开撸了。

项目仓库 欢迎start和pr哦~~

为了节省你们的宝贵时间，不废话 直接进入正题；

技术栈

mpvue

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js......(能够看官网介绍~).

iview weapp

iview weapp 一套高质量的 微信小程序 UI 组件库.

界面展现

大概的界面就是这样(界面是模仿得饿了么 我也只会模仿点页面了hhhhh)

完成进度

• [x] 小程序的基本界面展现
• [x] 简单的购买流程
• [x] 使用全局状态保存部分数据
• [x] 使用Fly请求数据
• [x] 使用Easy-mock模拟数据
• [x] ......
• [ ] 没有数据库保存真实数据
• [ ] 没有根据多个数据渲染店和商品
• [ ] 没有作添加地址的数据校验等
• [ ] 订单页面还须要优化 折叠显示等
• [ ] 商家端还未开发
• [ ] ......

其实还有不少功能没写，由于这是刚开始上班没事作的时候撸的(因此兴趣才是最好的老师)，而后如今事情比较忙就可能先放下了 若是有大佬或者有时间的大佬能够帮忙完善或者pr emmm 你直接拿走再写也是能够的~

技术实现

技术实现过程和一些踩过的坑

界面

界面主要使用 iview weapp 组件库 而后 有一些组件库没有的本身原生写法来撸，这里还好没啥坑 可是在布局上面彷佛有一个1px的问题 我好像没处理 不知道哪位大佬能发现 而且教我怎么解决~~ 单位主要使用小程序的rpx(很好用) 只须要根据iPhone6的尺寸来使用就能够了，详情能够看官方文档.

iview weapp input 彷佛不能使用双向数据绑定，须要本身从新撸.

底部的tabBar我是用的json来配置的 免得本身写 方便

tabBar: {
      color: '#6f6f6f',
      selectedColor: '#18a3ff',
      backgroundColor: '#ffffff',
      borderStyle: 'black',
      list: [
        {
          pagePath: 'pages/index/main',
          iconPath: 'static/img/wm.png',
          selectedIconPath: 'static/img/wms.png',
          text: '外卖'
        },
        {
          pagePath: 'pages/order/main',
          iconPath: 'static/img/dd.png',
          selectedIconPath: 'static/img/dds.png',
          text: '订单'
        },
        {
          pagePath: 'pages/shopp/main',
          iconPath: 'static/img/tj1.png',
          selectedIconPath: 'static/img/tj1s.png',
          text: '推荐'
        },
        {
          pagePath: 'pages/user/main',
          iconPath: 'static/img/user.png',
          selectedIconPath: 'static/img/users.png',
          text: '个人'
        }
      ]
    }
复制代码

这块的话可能须要你们查看小程序的文档来配置，其实也简单 跟玩同样就配置的很是好看

可能最麻烦的也是很简单的一个坑 如何引入 其实iview weapp 官方文档写的很清楚了 可是只是你们不知道这么配置而已 我来扣个代码演示一下.

到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到本身的项目中。而后按照以下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看：

1. 添加须要的组件 在页面的 json 中配置（路径根据本身项目位置配置）
// 添加 config json
export default {
  config: {
    // 这儿添加要用的小程序组件
    usingComponents: {
      'i-button': '../../dist/button/index'
    }
  }
}

复制代码

2. 在 wxml 中使用组件
<i-button type="primary" bind:click="handleClick">这是一个按钮</i-button>
复制代码

是否是很简单！！！ 没看明白的也能够看个人github仓库哦~

界面这块大概就是这么多 也可能我写掉了 后续想起来我会更一下的hhhh(懒)

mpvue

mpvue 新建页面须要从新 npm run dev 这个官方文档已经明确说明过了，因为一个页面只用重启一次 问题不大。

小程序的请求彷佛不能用axios 因此使用了Fly 来代替，至于为何 能够看github里面的issues

mpvue 支持小程序和vuejs的事件 详情能够查看文档

而后可能最坑的就是页面转跳了吧... 其实官方文档有写 目前页面路径最多只能十层。 好比说我再添加地址的时候 使用了wx.navigateTo(OBJECT) 而后返回到地址的列表页面而后继续重复添加地址 到达必定的数量以后 就不会再跳转，并且返回的也是以前重复的页面 用户体验很很差 因此须要一个解决的办法。文字太多可能看不懂 我来画个图。

关于登陆一块的话 我没有作什么处理 直接用新的用户信息接口就能够了

小程序与小游戏获取用户信息接口调整

<open-data type="groupName" open-gid="xxxxxx"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
复制代码

让后放到你想显示的地方，或者用button调用也能够，上面的文档都有提到过

总结

这样一总结下来感受本身彷佛没写多少功能Orz！！！

可是这篇文章多是我写的文字最多的一篇了 若是你们以为还不错的话能够点个喜欢哦~~ 蟹蟹o(∩_∩)o 哈哈

因此回到标题，兴趣才是最好的老师，接下面准备玩一玩electron-vue.....

写得好累，介绍的很少 可能有遗漏 可是大部分的核心基本上都已经说了，若是大佬们想找我交流的 ，能够加我QQ github 邮箱 都ojbk的

Qq：952822399 告辞 溜~~~~

新开了个Qq群，你们也能够进来互相交流~ iD 718639024 😏😏😏