mpvue外賣小程序

時間 2019-11-16

標籤 mpvue 外賣程序简体版

原文原文鏈接

前言

首先說說爲何本身會想着寫一個小程序emmmmmm 感受沒有爲何就是想寫了我就幹了hhhhh~~~html

我就粗略看了一下小程序的官方文檔和mpvue的文檔而後就開擼了。前端

項目倉庫歡迎start和pr哦~~vue

爲了節省你們的寶貴時間，不廢話直接進入正題；ios

技術棧

mpvue

mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js......(能夠看官網介紹~).git

iview weapp

iview weapp 一套高質量的微信小程序 UI 組件庫.github

界面展現

大概的界面就是這樣(界面是模仿得餓了麼我也只會模仿點頁面了hhhhh)數據庫

完成進度

[x] 小程序的基本界面展現
[x] 簡單的購買流程
[x] 使用全局狀態保存部分數據
[x] 使用Fly請求數據
[x] 使用Easy-mock模擬數據
[x] ......
[ ] 沒有數據庫保存真實數據
[ ] 沒有根據多個數據渲染店和商品
[ ] 沒有作添加地址的數據校驗等
[ ] 訂單頁面還須要優化摺疊顯示等
[ ] 商家端還未開發
[ ] ......

其實還有不少功能沒寫，由於這是剛開始上班沒事作的時候擼的(因此興趣纔是最好的老師)，而後如今事情比較忙就可能先放下了若是有大佬或者有時間的大佬能夠幫忙完善或者pr emmm 你直接拿走再寫也是能夠的~npm

技術實現

技術實現過程和一些踩過的坑json

界面

界面主要使用 iview weapp 組件庫而後有一些組件庫沒有的本身原生寫法來擼，這裏還好沒啥坑可是在佈局上面彷佛有一個1px的問題我好像沒處理不知道哪位大佬能發現而且教我怎麼解決~~ 單位主要使用小程序的rpx(很好用) 只須要根據iPhone6的尺寸來使用就能夠了，詳情能夠看官方文檔.axios

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>
複製代碼