mpvue外賣小程式

_小田發表於2018-09-08
原文網址 : https://juejin.im/post/5b940dc55188255c89010fe3
Vue

前言

首先說說為什麼自己會想著寫一個小程式emmmmmm 感覺沒有為什麼 就是想寫了 我就幹了hhhhh~~~

我就粗略看了一下小程式的官方文件和mpvue的文件 然後就開擼了。

專案倉庫 歡迎start和pr哦~~

為了節省大家的寶貴時間，不廢話 直接進入正題；

img

技術棧

mpvue

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

iview weapp

iview weapp 一套高質量的 微信小程式 UI 元件庫.

介面展示

mpvue
mpvue
mpvue
mpvue
mpvue

大概的介面就是這樣(介面是模仿得餓了麼 我也只會模仿點頁面了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) 然後返回到地址的列表頁面然後繼續重複新增地址 到達一定的數量之後 就不會再跳轉，而且返回的也是之前重複的頁面 使用者體驗很不好 所以需要一個解決的辦法。文字太多可能看不懂 我來畫個圖。

mpvue
關於登入一塊的話 我沒有做什麼處理 直接用新的使用者資訊介面就可以了

小程式與小遊戲獲取使用者資訊介面調整

<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 ???

相關文章