找工作怎麼辦，拉勾小程式來幫你

1haixinzgf發表於2018-06-11

引言

現在的前端有各種各樣的新知識和新框架，小程式才出生幾年，就已經火到這種程度了，所以作為前端學習者，這個新技能我們是一定要儘快get到的。學習小程式最好的方法就是自己手寫一個小程式，能從中找到自己的不足之處。於是我便萌發了一個新想法，自己手擼一個拉勾小程式。剛開始的時候，起步是有點難的，不知道怎麼把學的東西轉化成自己想要寫的東西，但謝了一點後，感覺有點入迷了，停不下來。希望我寫的東西能夠幫助社群的學習者，如果寫的不好，也歡迎你指正。

開發工具與資源平臺

微信web開發者工具：用於敲網頁程式碼，但是最主要用來進行手機效果預覽。
VsCode:主要用於佈局排版，也是敲程式碼的主戰場，真心覺得這個編輯器不錯，快捷輸入和排版，大大提高了開發效率，使用簡單，一學就會。
Iconfont-阿里巴巴向量圖示庫：提供專案中的所有圖示，資源豐富。
微信小程式開發者文件:微信小程式開發的文件，資源庫，以及API規範
Easy Mock: 可以模擬我們想要的資料，非常方便。這裡是部分資料

預覽圖片

功能展示

資料請求

拉勾裡面有非常多的資料，所以我在easy mock裡面建立了很多介面，在頁面需要用到的時候去
請求資料，如果每一次都要用wx.request，而且到處都是非同步請求，處理時會遇到很多的麻煩，
es6中的promise可以將非同步變成同步(vue中的async和await也可以)，封裝一個request在以後
的開發中也用得到的
複製程式碼

封裝的request

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轉化成數字在去進行匹配，得到了想要點選的詳情頁。

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，通過這點去判斷。寫這個只要知道大概的想法，一般是不怎麼會出錯的。

 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，然後列表就會隱藏起來，從後一個頁面返回時也不會出現那種狀況。

<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() 函式用於獲取當前頁面棧的例項，以陣列形式按棧的順序給出，第一個元素為首頁，最後一個元素為當前頁面。

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

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裡面，因為我想換一種方式去實現。在個人資訊中，有一個表單驗證，在這裡，我除了一個大虧。先貼程式碼，看看我寫的表單驗。(下門只是部分程式碼，想要看完整程式碼可以看這裡我的專案)

<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__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="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(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;
    }

    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的地方應該再對返回的值做判斷。當然也可以使用其他方法去驗證表單，比如中介者模式

功能還有一部分沒有寫出來，還有一部分沒有做出來，如果我的描述中有什麼錯誤的話，歡迎指正，我們這群程式猿就是在bug中提升自己的。如果你想對我的專案想要了解更多，可以檢視我的專案

想說

現在的前端技術更新的太快了，去年剛火的小程式，就推出了mpvue和wepy兩個主流的框架，對於我們這些前端來說，要學的東西太多了，每天都在學習新東西。社群是個好地方，有問題，大家一起解決，有好東西，大家一起分享。寫文章的確挺累的，但是也挺值的。

rac壞了asm盤進不去怎麼辦？amdu來辦幫你
2023-12-25
ASM
提升開發效率，小程式容器來幫你
2023-03-14
SQL 語句寫的爛怎麼辦？我幫你解決?
2019-09-05
SQL
小程式沒有返回按鈕怎麼辦?
2018-04-03
辦公小技巧：excel重複項怎麼找出來？
2022-01-20
Excel
Macbook出現閃屏現象怎麼辦？macz小編幫你支招！
2020-08-10
Mac
同城吃喝玩樂小程式既能幫你省錢又能幫你賺錢
2022-06-08
微信小程式 Video 視訊太小怎麼辦
2020-12-13
微信小程式IDE
親愛的程式猿們怎麼找工作
2015-08-27
商家怎麼用小程式來搭建私域流量？
2021-03-08
怎麼提高網路應用效能？讓DPDK GRO和GSO來幫你！
2018-07-31
發現資料異常波動怎麼辦？別慌，指標監控和歸因分析來幫你
2024-03-28
指標
想要更精準的小程式模版訊息推送？我們來幫你實現
2019-04-02
Reddit熱點 | 想看被打碼的羞羞圖片怎麼辦？CNN幫你解決
2019-02-28
CNN
程式猿，讓我來告訴你怎麼追女生！！！
2018-12-16
小程式弱網環境卡頓怎麼辦？一招迅速提升小程式執行速度
2018-02-09
mp4檔案太大怎麼變小？影片壓縮的軟體能幫你
2019-07-24
上課聽得懂，但是敲不出來程式碼怎麼辦？
2013-06-09
Go語言爬蟲抓取拉勾職位—提升找工作成功概率
2018-01-17
Go爬蟲
安卓手機越來越慢怎麼辦？
2016-09-29
安卓
iPhone X來電鈴聲變小是怎麼回事? iPhone X來電鈴聲變小的解決辦法
2018-12-24
iPhone
Markdown 怎麼便捷插入圖片？uPic 幫你解決
2019-10-22
企業OA升級遇阻？小程式容器來幫忙
2023-01-10
小程式怎麼開發？具體怎麼操作
2020-08-13
資料庫索引是什麼？新華字典來幫你
2019-02-16
資料庫索引
數位 dp / lianggj 讓你學小專題應該怎麼辦
2024-04-02
小程式導航來了，快速尋找屬於你的小程式
2019-05-11
win10 xbox控制檯小幫手閃退怎麼辦_win10開啟xbox控制檯小幫手就閃退如何解決
2020-06-23
Win10
[應用案例]小程式來了，收錄屬於你的小程式，快來提交吧
2019-05-11
程式碼不止｜想制勝海外市場？Google 來幫你！
2020-11-20
Go
Win10小娜無法搜尋Win32程式怎麼辦
2017-01-14
Win10Win32
Linux當機了你會怎麼辦？
2014-03-20
Linux
當你遇到layer.alert is not a function怎麼辦
2024-04-01
Function
程式設計師累了怎麼辦？
2016-04-23
程式設計師
K8S節點異常怎麼辦？TKE"節點健康檢查和自愈"來幫忙
2020-10-15
K8S
寶付敲寫Java怎麼自學找工作
2019-08-30
Java
小程式SSL證書怎麼選？
2021-12-09
微信小程式漏洞怎麼修復
2022-02-11
微信小程式