基於mpvue開發微信小程序(項目已開源)

花了兩週時間,個人微信小程序終於開發完了(平時上班,基本上都是業餘時間開發的).
下面來介紹一下項目的功能以及結構.
用到的技術棧 vue2+weui+es6;要看項目 記得切換到dev分支上;
這是一款輔助記憶單詞的微信小程序,項目調用了百度翻譯api,這樣能夠獲取百度翻譯的數據.

項目目錄

build爲相關配置;
config爲開發相關配置文件;
dist爲打包文件;
src爲所寫的js文件了:
這裏面
assets爲靜態文件;
components爲組件;
models爲狀態管理(這個項目沒有用到model);
pages爲所寫的頁面;
service與utils爲本身的工具(習慣這樣了)

加單詞頁面: pages => myIndex

這個頁面能夠添加單詞,因爲沒有後端服務器,因此全部的單詞都是保存到localstorage,下方是代碼:

submit(e) {
    if(!e.target.value){
      return
    }
    // wx.removeStorage('words');
    let array = PubliceService.getStoreage('words') || [];
    let value = e.target.value;
    let valueObj = value ? {[value.word]: value.explain}:{};
    for (let i = 0; i < array.length; i++) {
      if(array[i][value.word]){
        PubliceService.openConfirm({title: '單詞有重複', content: '您輸入的單詞已存在列表中,是否替換?'}, () => {
          array[i][value.word] = value.explain;
          PubliceService.setStoreage('words', PubliceService.transformArrayData(array,false,true));
          this.inputValue = '';
          this.textareaValue = '';
        });
        return;
      }
    } // 判斷所提交的單詞是否有重複,若是有重複則提醒用戶是否替換,有重複的話,直接給更新,而後終止 不繼續往下走了;
    array.push(valueObj);
    this.inputValue = '';
    this.textareaValue = '';
    this.$forceUpdate();// 強制刷新頁面
    wx.showToast({
      title:'新增成功',
      icon:'success',
      duation:1500
    });
    PubliceService.setStoreage('words', PubliceService.transformArrayData(array,false,true)) // 給這個數組對象加一個id
    bus.$emit('addHandle');
  };
 以上是首頁的功能;

我的中心頁面:pages=>my

這個相對簡單,獲取用戶信息,而後根據在localstorage裏的數組長度給它一個等級,等級規則定義在config裏;
在mounted的函數裏直接定義這個方法就能夠;

initPage(){
    let array = PubliceService.getStoreage('words');
    console.log(array);
    this.wordTotal = array.length;
    this.degree = PubliceService.returnDegree(this.wordTotal);
  }

單詞列表頁面 pages=>wordlist

而後就是最後的單詞列表頁面,花的時間相對來講多一些,由於涉及到了刪除,編輯以及簡單的修改數據的功能:

這裏點擊編輯會跳到編輯單詞頁面:

這個頁面和首頁很像,講道理是能夠複用的,沒太多時間去弄這個.
就簡單複用了一些組件,函數沒的複用.
如下是我編輯函數保存時候的代碼:

submit(e){
    // wx.removeStorage('words');
    let array = PubliceService.getStoreage('words') || [];
    let value = e.target.value;
    console.log(array,value);
    for(let i = 0;i<array.length;i++){
      for(let key in array[i]){
        if(key === value.word && key !== 'key'){
          array[i][value.word] = value.explain;
          console.log(array);
          wx.showToast({
            title:'更新成功',
            icon:'success',
            duation:1500
          });
          PubliceService.setStoreage('words',array);
          PubliceService.debounceLog(500,()=>{wx.navigateBack({delta:1})});

          return
        }
      }
    }
    let obj = {[value.word]:value.explain,key:array.length};
    array.push(obj);
    wx.showToast({
      title:'新增成功',
      icon:'success',
      duation:1500
    });
    PubliceService.debounceLog(500,()=>{wx.navigateBack({delta:1})});
    PubliceService.setStoreage('words',array);
    console.log(array)

  }

這裏說明一下 用了雙層循環的緣由,由於當初在最開始寫的時候須要作判斷這裏面是否是有重複的單詞,而後當時爲了圖簡單,直接把數據結構寫成這樣:
[{test:'測試',key:0},{word:'單詞',key:1}],只能說這樣判斷是否有重複是簡單了不少,可是在我拿英文單詞的時候就得for in循環了,列表上循環也是這樣的,只能說沒時間去弄了,既然寫了就寫了吧!
刪除功能是經過es6的filter過濾的,這個時候以前在添加單詞的key值就用上了.

因爲是第一次用vue寫東西,不少vue的基本知識都不是特別的紮實,各位老鐵看了若是哪有問題,請必定及時幫我指出,最好能提一些建議,互相成長.
如下是這個項目的github地址:https://github.com/kaykie/rem...
若是這個微信小程序對你有幫助的話,請必定給我一個星星,下一個我的微信小程序項目我會用vuex來寫,但願能獲得各位的支持,給點動力吧!

總結

個人本命框架是react,公司也是用的react來開發項目的(技術棧爲react+redux-sage+antd+rn+react-router),剛開始從react轉到vue作開發,仍是有一些不習慣的,不少語法糖都不同,我也是一邊摸索一邊寫這個小程序,像項目中用到的bus,不一樣組件以前的通訊,以前用react由於用的都是redux,因此相對來講仍是新奇的.固然也有遇到過一些坑,我在我本身的博客上也有說起,這個坑本身在react開發中也是常常遇到過的,後來隨着對vue愈來愈熟悉,發現也沒有開始想像的那麼難,固然了頁面中尚未用到filter以及director;在下一個項目中我也要嘗試的用一下.

另外不得不說,感謝美團對開源社區的貢獻.感謝star!