找工做怎麼辦，拉勾小程序來幫你

時間 2019-11-08

標籤怎麼辦拉勾程序幫你简体版

原文原文鏈接

引言

如今的前端有各類各樣的新知識和新框架，小程序纔出生幾年，就已經火到這種程度了，因此做爲前端學習者，這個新技能咱們是必定要儘快get到的。學習小程序最好的方法就是本身手寫一個小程序，能從中找到本身的不足之處。因而我便萌發了一個新想法，本身手擼一個拉勾小程序。剛開始的時候，起步是有點難的，不知道怎麼把學的東西轉化成本身想要寫的東西，但謝了一點後，感受有點入迷了，停不下來。但願我寫的東西可以幫助社區的學習者，若是寫的很差，也歡迎你指正。html

開發工具與資源平臺

微信web開發者工具：用於敲網頁代碼，可是最主要用來進行手機效果預覽。
VsCode:主要用於佈局排版，也是敲代碼的主戰場，真心以爲這個編輯器不錯，快捷輸入和排版，大大提升了開發效率，使用簡單，一學就會。
Iconfont-阿里巴巴矢量圖標庫：提供項目中的全部圖標，資源豐富。
微信小程序開發者文檔:微信小程序開發的文檔，資源庫，以及API規範
Easy Mock: 能夠模擬咱們想要的數據，很是方便。這裏是部分數據

預覽圖片前端

功能展現

數據請求

拉勾裏面有很是多的數據，因此我在easy mock裏面建立了不少接口，在頁面須要用到的時候去
請求數據，若是每一次都要用wx.request，並且處處都是異步請求，處理時會遇到不少的麻煩，
es6中的promise能夠將異步變成同步(vue中的async和await也能夠)，封裝一個request在之後
的開發中也用獲得的

封裝的requestvue

function request(params) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: params.url,
      method: params.method || 'get',
      data: params.data,
      header: {
        'content-type': 'application/json'
      },
      success: resolve,
      error: err => {
        console.log("請求出錯:" + err.errMsg);
      }
    })
  })
}


export default request

》import request from '../../utils/request.js'
須要請求數據引入request.js

查看頁面詳情

查看頁面詳情就是講你點擊的那個id傳過去，可是我在這裏遇到了一個坑，我在尋找點擊的那個id的詳情時，發現我匹配不了個人數據，後來我一步一步打印找事哪一步有問題，發現我用easymock造的數據，傳的id是個字符串而不是數字，因此我將傳過來id轉化成數字在去進行匹配，獲得了想要點擊的詳情頁。
git

getActive(id) {
    const url = 'https://www.easy-mock.com/mock/5b06da4872643c7a5c4edcd1/api/desc#!method=get';
    var params = {
      url: url,
      method: 'GET',
    };
    let position = [];
    let currentDesc = this.data.currentDesc;
    request(params).then(res => { //異步變同步
      position = res.data.data.position;
    }).then(() => {
      for (let i = 0; i < position.length; i++) {
        if (i === id) {
          let that = this;
          that.setData({
            currentDesc: position[i]
          })
          console.log(that.data.currentDesc)
        }
      }
    }
      );
  },
  onLoad: function (options) {
    let id = options.id - 0; //將id轉化成number
    this.getActive(id); //請求數據匹配id
  },

搜索

由於是用markdown造的假數據，數據不是不少，並且這不是像有後端的那樣，能夠傳給後端參數，讓後端給你提供符合的數據，因此仍是得要本身幹。剛開始實現時，第一時間想到的是用indexOf()去判斷，若是不含有我輸入的字符串，就返回-1，經過這點去判斷。寫這個只要知道大概的想法，通常是不怎麼會出錯的。es6

onInput(e) {
    let value = e.detail.value;
    // console.log(value);
    const job = this.data.job;//匹配的數組
    var list = [];
    for(var i = 0; i < job.length; i++){
      if(job[i].indexOf(value)>-1){//不包含value就返回-1
        list.push(job[i]);
      }
    }
    this.setData({
      list: list,
      ['search.content']: value
    });
  },

我這一部分以前是有小bug的，頁面從後一個頁面回來時，搜索的記錄會變成歷史記錄，同時搜索的值還會在input上，可是一樣列表還顯示在下面，這樣就會形成用戶體驗及不良好，因此我給整個的搜索匹配到的列表一個三元運算符，點擊跳轉以前就會將其設爲false，而後列表就會隱藏起來，從後一個頁面返回時也不會出現那種情況。github

<view class="item-lists {{isShoeLists?'hidden':''}}">
            <view class="weui-cell border-botton" wx:for="{{list}}" wx:key="index" bindtap="positionSearch" data-index="{{index}}">
                <view class="weui-cell__hd ">
                    <image src="../../images/job-search-pic.png" style="margin-right: 5px;vertical-align: middle;width:30px; height: 30px;"></image>
                </view>
                <view class="weui-cell__bd job-desc">{{item}}</view>
                <view class="weui-cell__ft"></view>
            </view>
        </view>

positionSearch(e) {
    // console.log(e)
    let list = this.data.list
    let index = e.currentTarget.dataset.index;
    let value = list[index];
    let history = this.data.history;
    history.push(value); //將搜索的記錄放入到歷史搜索中
    this.setData({
      ['search.content']: value,
      history,
      isShowLists: true // 將lists隱藏
    })
    wx.navigateTo({
      url: `../related/related?value=${value}`,
    })
  },

scroll-view會碰到的問題

請勿在scroll-view之中使用 textarea、map、canvas、video
scroll-into-view的優先級高於scroll-view
scroll-view須要給scroll-view一個固定的寬度或高度，設置屬性scroll-x或scroll-y,而且設置樣式white-space:nowrap;（這個很重要，不設置這個樣式，沒法完成scroll-view的效果
若是要下拉刷新時，請使用scroll-view組件自帶的方法，在scroll-view中滾動是不會觸發onPullDownRefresh事件的

頁面回退傳值

跳轉頁面的時候，能夠經過navigateTo將要傳遞參數放在url上，可是返回原頁面時，就得換過一種傳參方法。一種是在app.js中設置golbaldata，而後在你想要傳值的地方去設置golbaldata就能夠了，或者你將數據儲存在stroage裏面。還有一種就是 getCurrentPages() ，getCurrentPages() 函數用於獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素爲首頁，最後一個元素爲當前頁面。web

不要嘗試修改頁面棧，會致使路由以及頁面狀態錯誤。

changecity(e) {
    var value = e.target.dataset.value;
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];  //當前頁面
    var prevPage = pages[pages.length - 2]; //上一個頁面
    prePage.setData({
      location: value,
      city: value
    });
    wx.navigateBack({
      delta: 1
    })
  },

編輯簡歷

用weui去寫微信小程序去寫節省咱們一部分的時間。這個功能這裏也有一個須要將值傳回來的，我在這裏是將參數傳入stroage裏面，由於我想換一種方式去實現。在我的信息中，有一個表單驗證，在這裏，我除了一個大虧。先貼代碼，看看我寫的表單驗。json

<view class="container">
 
        <view class="weui-cells weui-cells_after-title name">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">真實姓名</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input name-input" type="text" value="{{val}}" bindinput="nameChange" placeholder="請輸入" />
                </view>
            </view>
        </view>
        <view class="weui-cells weui-cells_after-title name">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__bd">性別</view>
                <view class="weui-cell__ft">
                    <picker bindchange="bindSexChange" value="{{index}}" range="{{arraySex.sex}}" class="name-input">
                        <view class="selectPick" wx:if="{{!arraySex.isPickSelect}}">
                            <text>請選擇</text>
                        </view>
                        <view wx:else class="picker">
                            {{arraySex.sex[arraySex.index]}}
                        </view>
                    </picker>
                </view>
            </view>
        </view>
        <view class="weui-cells weui-cells_after-title name">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__bd">出生日期</view>
                <view class="weui-cell__ft">
                    <picker mode="date" value="{{date}}" start="1949-10-01" end="2018-06-01" bindchange="bindDateChange">
                        <view class="picker">
                            {{date}}
                        </view>
                    </picker>
                </view>
            </view>
        </view>
        <view class="weui-cells weui-cells_after-title name">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__bd">最高學歷</view>
                <view class="weui-cell__ft">
                    <picker bindchange="bindEducationChange" value="{{index}}" range="{{arrayEducation.education}}">
                        <view class="selectPick" wx:if="{{!arrayEducation.isPickSelect}}">
                            <text>請選擇</text>
                        </view>
                        <view wx:else class="picker">
                            {{arrayEducation.education[arrayEducation.index]}}
                        </view>
                    </picker>
                </view>
            </view>
        </view>
        <view class="weui-cells weui-cells_after-title name">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__bd">工做經驗</view>
                <view class="weui-cell__ft">
                    <picker bindchange="bindExperienceChange" value="{{index}}" range="{{arrayExperience.experience}}">
                        <view class="selectPick" wx:if="{{!arrayExperience.isPickSelect}}">
                            <text>請選擇</text>
                        </view>
                        <view wx:else class="picker">
                            {{arrayExperience.experience[arrayExperience.index]}}
                        </view>
                    </picker>
                </view>
            </view>
        </view>
        <view class="weui-cells weui-cells_after-title name">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">手機號碼</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input name-input" type="number" value="{{val}}" bindinput="telChange" placeholder="請輸入" />
                </view>
            </view>
        </view>
        <view class="weui-cells weui-cells_after-title name">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">聯繫郵箱</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input name-input" type="email" value="{{val}}" bindinput="mailChange" placeholder="請輸入" />
                </view>
            </view>
        </view>
        <view class="weui-cells weui-cells_after-title name">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__bd">所在城市</view>

                <view class="weui-cell__ft" bindtap="cityChange">
                    <view wx:if="{{!isChooseCity}}" class="changeCity">
                        <text>請選擇</text>
                    </view>
                    <view wx:else class="changeCity">{{city}}</view>
                </view>

            </view>
        </view>
        <view class="bgft">
            <view class="introduction">
                <view class="intro">
                    <text>一句話介紹本身</text>
                    <view class="wordNum">{{num}}/60</view>
                </view>
                <view>
                   
                    <textarea placeholder="說出你的心聲" value="{{value}}" maxlength="60" class="input" bindinput="inputChange" />
                </view>
            </view>
            <button class="btnEdit"  bindtap="formSubmit">保存</button>
        </view>
</view>

formSubmit(e) {
    

    //驗證是否輸入名字
    let nameVal = this.data.nameVal;
    if (!this.errorInput(nameVal, '請輸入你的名字')) {
      return false;
    };
console.log(nameVal)
    //驗證是否選擇性別
    let sex = this.data.arraySex.sex[this.data.arraySex.index];
    if (!this.error(this.data.arraySex.isPickSelect, '請選擇你的性別')) {
      return false;
    };
console.log(sex)
    //驗證是否選擇了出生日期
    let date = this.data.date;
    if (date === '1999-01-01') {
      wx.showModal({
        title: '系統提示',
        content: '請選擇你的出生日期',
        showCancel: false,
        duration: 1500,
        success: () => { }
      })
      return false;
    }
console.log(date)
    //驗證是否選擇了學歷
    let education = this.data.arrayEducation.education[this.data.arrayEducation.index];
    if (!this.error(this.data.arrayEducation.isPickSelect, '請選擇你的學歷')) {
      return false
    }

    console.log(education)
    //驗證是否選擇了工做經驗
    let experience = this.data.arrayExperience.experience[this.data.arrayExperience.index];
    if (!this.error(this.data.arrayExperience.isPickSelect, '請選擇你的工做經驗')) {
      return false
    }
    console.log(experience)
    let tel = this.data.telVal;
    if (!this.errorInput(tel, '請輸入手機號碼')) {
      return false;
    }
    if (!/1[3456789][0-9]{9}/.test(tel.trim())) {
      wx.showModal({
        title: '系統提示',
        content: '手機號碼格式有誤',
        showCancel: false,
        duration: 1500,
        success: () => { }
      })
      return;
    }
    console.log(tel)
    let mail = this.data.mailVal;
    if (!this.errorInput(mail, '請輸入你的郵箱')) {
      return;
    }
    if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(mail.trim())) {
      wx.showModal({
        title: '系統提示',
        content: '請輸入正確的郵箱',
        showCancel: false,
        duration: 1500,
        success: () => { }
      })
      return;
    }
console.log(mail)
let inputVal = this.data.inputVal;
if (!this.errorInput(inputVal, '一句話介紹你本身')) {
  return false;
}
    wx.setStorage({
      key: "personal",
      data: [{ name: nameVal },
        { sex: sex},
        { date: date }, 
        { education: education},
        { experience: experience},
         { tel: tel }, 
         { mail: mail }, 
         { inputVal: inputVal },
         ],
      success: function () {
        wx.showToast({
          title: "保存成功",
          icon: 'success',
          duration: 2000
        })
        setTimeout( function(){
          wx.navigateTo({
            url: "../resume/resume"
          })
        }, 1000);

      }
    })
  },
  errorInput(val, errorMsg) {//是否輸入
    if (val.trim() === '') {
      // console.log(errorMsg);
      wx.showModal({
        title: '系統提示',
        content: errorMsg,
        showCancel: false,
        duration: 1500,
        success: () => {
        }
      })
      return false;
    } else {
      return true;
    }
  },
  error(isShow, errorMsg) {//是否選擇
    if (!isShow) {
      wx.showModal({
        title: '系統提示',
        content: errorMsg,
        showCancel: false,
        duration: 1500,
        success: () => { }
      })
      return false;
    } else {
      return true;
    }

  },

我寫了兩個函數去判斷須要輸入和須要選擇的操做有沒有完成(errorInput,error)，若是沒有完成，就返回errorMsg，可是我這兩個函數是返回false的，我當初在寫的時候，沒有在乎，就一直卡住了，後來才發現我函數執行的返回值是false，執行這兩個函數d的地方應該再對返回的值作判斷。固然也可使用其餘方法去驗證表單，好比中介者模式canvas

功能還有一部分沒有寫出來，還有一部分沒有作出來，若是個人描述中有什麼錯誤的話，歡迎指正，咱們這羣程序猿就是在bug中提高本身的。若是你想對個人項目想要了解更多，能夠查看個人項目小程序