Vue全家桶模仿閒魚移動端App

Sukura發表於2017-06-25
VueAPP

官方文件介紹：Vue.js，一套漸進式的JavaScript框架，擁有簡單小巧的核心，卻足以應付任何規模的應用。因此，想通過模仿閒魚移動端App來感受一下vue的靈活與輕盈，專案僅以個人學習為目的。

話不多說，來看看效果吧（請自動忽略渣畫素O(∩_∩)O）

登入與登出

clipboard.png

購買閒置

clipboard.png

釋出閒置

clipboard.png

搜尋功能

clipboard.png

線上預覽

線上體驗： demo (ps： 瀏覽器f12切換移動端檢視效果更佳)

原始碼： 原始碼

技術棧

  • vue 頁面顯示
  • vue-router實現spa
  • vuex 元件狀態共享
  • axios 解決非同步請求
  • esay-mock 提供資料介面，使用它不會出現跨域的麻煩
  • es6 程式碼書寫優雅美觀
  • lrz localResizeIMG圖片先壓縮再上傳
  • webpack 檔案打包
  • html5 css3 內容與裝飾

元件庫

  • mint-ui element-ui下的一款產品，打理移動端的UI特別好用，提供豐富的元件
  • vue-awesome-swiper 輪播圖外掛，雖然mint-ui也提供了輪播圖外掛，但是突然想玩一下swiper，所以我們們借用一下swiper元件
  • vue-region-picker china-area-data 我們國家城市選擇器元件，便於地址的管理

實現功能

  • 登入與登出
    使用者進入App會有兩種狀態，登入和未登入。當你未登入的時候，你檢視的介面是有效的，在必要的時候，會提醒你進行登入，所以，這就會產生狀態的切換，那我們要怎樣來登記這個狀態呢？Localstorage?可以。但是這裡我使用了vuex來實現狀態的共享，因為我需要儲存的狀態有太多了，當你的頁面超過了十幾個，你就可以考慮使用vuex.
  • 釋出閒置
    使用者可以釋出想要賣掉的東西，這裡的核心就是在移動端裝置上呼叫相機，呼叫相簿，現在科技發展的太快，移動裝置畫素越來越高，隨便一張照片2M+，因此解決移動端圖片上傳問題，可以藉助lrz外掛將圖片按設定的的寬高壓縮成base64的檔案，然後通過ajax請求將圖片傳送給後端，進行儲存。使用者可以進行多次釋出，當然這也是用vuex實現的，在state裡設定一個陣列變數，通過陣列的push方法將你釋出的資料新增進去。
  • 刪除釋出
    刪除釋出的難點在於我們怎麼去實現繫結在v-for渲染出來的模板上的方法，這麼說可能有點繞口，簡單的說，怎麼知道你就是要刪除某個釋出。其實，解決這個疑惑，我們就要用好v-for這個指令，它可以有index這個引數來標識當前的索引，而剛剛好，這個標識就是我們使用者選中項的索引值，所以，只要我們把v-for指令等其他可以配合的指令用靈活，就沒有什麼問題解決不了。
  • 購買商品
    其實購買商品跟釋出閒置的思想差不多，甚至比釋出還要簡單，因為它沒用圖片上傳問題，這裡會有一個城市三金聯動外掛會用到，這也帶來了很多遍歷。補充一點，釋出閒置和購買商品後，相應的數量值也會-1，這個也是用vuex實現的。
  • 刪除訂單
    刪除訂單對應刪除釋出，刪除之後相應的數量會減少，當然，以上些都基於你已經登入，如果是位登入狀態是無法進行操作的。
  • 撩客服
    如果你有看demo的話，那麼你會注意到這裡可以傳送訊息，而且也可以傳送表情。表情的實現是個難點，我是學著GitHub上一位大佬老做的，其實每一個emoji就是一張圖片，只是以code的形式展現，通過正規表示式以及陣列的切割方法將它以<img src=""/>的格式輸出。此處實現的確有點難，但是想明白後也就理解了，如果感興趣的話，可以看原始碼。

  • 搜尋商品
    使用者輸入關鍵字，通過ajax傳送到後臺資料，這裡利用了字串的indexOf()方法來判斷使用者輸入的關鍵字有沒有在後臺返回的資料裡，有的話就輸出資料，沒有就輸出提示。

    this.axios.get('https://easy-mock.com/mock/593f72288ac26d795ff1e570/search/results')
          .then((res) => {
              let result = res.data
              console.log(result)
              for( let i in result){
                  let item = i
                  console.log(item.indexOf(this.keywords))
                  if(item.indexOf(this.keywords) !== -1){
                      this.items = result[item]
                  }
              }
  • div、css3打造自定義數字鍵盤
    類似支付寶、銀行等App都有自帶的數字鍵盤提供給使用者使用，這是怎麼實現的呢？其實，div+css3+js就能幫你實現，這裡不需要用input標籤，因為它會帶來反作用，在移動端它會喚醒你手機的自帶輸入法鍵盤，而在PC端則會允許使用者輸入任意的東西，顯然這不是我們想要的效果。所以，我們就使用一個div好了，而閃爍游標用css3的animation來模擬就行啦,這樣不就很像一個輸入框了，剩下的邏輯控制就交給js了。一個流程下來，數字鍵盤的表現和功能就完成了。
  • 跟隨導航
    什麼是跟隨導航？就是隨著你的滾動或滑動到某一個位置固定住的導航欄，在很多應用裡都有這個需求。它的實現並不是很難，就是通過window的scroll事件判斷來判斷滾動的距離是否大於某一個值，如果大於，就把導航元素固定在某一位置。
  • 返回頂部
    這裡的需求就是，使用者瀏覽了很長的頁面，希望一鍵就能跑到頂部去，這個時候，就需要用到返回頂部這個事件了，它的實現跟上面原理類似，都是判斷滾輪滑動的位置，如果大於某一個值，我們們就把這個值慢慢的變小，直到為0。
  • 圖片輪播
    藉助mint-ui元件裡的mt-swiper,配置一些相關的變數即可輕鬆實現，贈上mint-ui文件

入過的坑

  • 跨域操作
    在實現搜尋功能的時候，我企圖呼叫閒魚官網的介面來獲取資料，但是很不幸，他告訴我跨域。但是沒關係，CORS來應付，我們只需在後端領域裡配置一下響應頭就行，header("Access-Control-Allow-Origin：*") 當然這種方法必須開啟cors才能成功。還有另外一種方法就是在config資料夾的index.js中設定代理來解決跨域問題。形如：

    proxyTable: {
      '/api': {
            target: 'https://s.2.taobao.com/list/list.htm?q=',
            changeOrigin: true,
            pathRewrite: { //需要rewrite重寫的, 如果在伺服器端做了處理則可以不要這段
             '^/api': ''
            }
      }
  • 裝置適配
    市面上充斥著各式各樣的手機，裝置適配問題成了web開發的一個大挑戰，現在也提出了各種解決方案，我採用的是css3的rem單位來解決適配問題，rem就是將根節點html的font-size的值作為整個頁面的基準尺寸，預設html的font-size是16px，即1rem=16px，在未來的css樣式裡將你所有的px都按這樣的比例換算成rem(字型的大小除外)，如果選擇了這種方式，請rem一路到底，不然頁面就會炸。
  • 移動端圖片上傳
    上面有提到使用lrz圖片壓縮外掛來實現，但是在適配手機時，發現有些手機不能夠呼叫手機的相機以及本地檔案，我猜想是使用者的許可權問題，你需要在設定裡授予這個許可權，不然也就不能傳圖片了。

  • vue元件通訊
    vue由許多的元件組成，那麼各元件之間的通訊就成了一個問題。vue中元件之間傳值有這麼幾種方式。如果是頁面較少，就可以考慮使用props傳值，父傳子，子傳孫，一直傳下去···但是，使用Props，會有些麻煩，狀態的改變要往回傳，頁面一多就有些煩人。所以如果你的頁面超過了10個以上，就要考慮vuex了，vuex就是專門為vue.js開發的狀態管理模式，能夠實現元件之間的元件共享。

    使用手則

    Build Setup

      # install dependencies
  npm install

  # serve with hot reload at localhost:8081
  npm run dev

  # build for production with minification
  npm run build

  # build for production and view the bundle analyzer report
  npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue- loader.

相關文章