拉勾小程序開(kāi)發(fā)案例

六月畢業(yè)季，也是求職招聘的高峰期，借著小程序的紅利期，許多企業(yè)都爭(zhēng)先恐后的開(kāi)發(fā)著招聘求職小程序，下面以拉勾小程序?yàn)槔?，為大家介紹應(yīng)如何做招聘小程序。

開(kāi)發(fā)工具與資源平臺(tái)

• 微信web開(kāi)發(fā)者工具：用于敲網(wǎng)頁(yè)代碼，但是最主要用來(lái)進(jìn)行手機(jī)效果預(yù)覽。
• VsCode:主要用于布局排版，也是敲代碼的主戰(zhàn)場(chǎng)，真心覺(jué)得這個(gè)編輯器不錯(cuò)，快捷輸入和排版，大大提高了開(kāi)發(fā)效率，使用簡(jiǎn)單，一學(xué)就會(huì)。
• Iconfont-阿里巴巴矢量圖標(biāo)庫(kù) ：提供項(xiàng)目中的所有圖標(biāo)，資源豐富。
• 微信小程序開(kāi)發(fā)者文檔:微信小程序開(kāi)發(fā)的文檔，資源庫(kù)，以及API規(guī)范
• Easy Mock: 可以模擬我們想要的數(shù)據(jù)，非常方便。這里是部分?jǐn)?shù)據(jù)

預(yù)覽圖片

功能展示

數(shù)據(jù)請(qǐng)求

拉勾里面有非常多的數(shù)據(jù)，所以我在easy mock里面創(chuàng)建了很多接口，在頁(yè)面需要用到的時(shí)候去
請(qǐng)求數(shù)據(jù)，如果每一次都要用wx.request，而且到處都是異步請(qǐng)求，處理時(shí)會(huì)遇到很多的麻煩，
es6中的promise可以將異步變成同步(vue中的async和await也可以)，封裝一個(gè)request在以后
的開(kāi)發(fā)中也用得到的

封裝的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("請(qǐng)求出錯(cuò):" + err.errMsg);
      }
    })
  })
}


export default request

》import request from '../../utils/request.js'
需要請(qǐng)求數(shù)據(jù)引入request.js

查看頁(yè)面詳情

查看頁(yè)面詳情就是講你點(diǎn)擊的那個(gè)id傳過(guò)去，但是我在這里遇到了一個(gè)坑，我在尋找點(diǎn)擊的那個(gè)id的詳情時(shí)，發(fā)現(xiàn)我匹配不了我的數(shù)據(jù)，后來(lái)我一步一步打印找事哪一步有問(wèn)題，發(fā)現(xiàn)我用easymock造的數(shù)據(jù)，傳的id是個(gè)字符串而不是數(shù)字，所以我將傳過(guò)來(lái)id轉(zhuǎn)化成數(shù)字在去進(jìn)行匹配，得到了想要點(diǎn)擊的詳情頁(yè)。

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轉(zhuǎn)化成number
    this.getActive(id); //請(qǐng)求數(shù)據(jù)匹配id
  },

搜索

因?yàn)槭怯胢arkdown造的假數(shù)據(jù)，數(shù)據(jù)不是很多，而且這不是像有后端的那樣，可以傳給后端參數(shù)，讓后端給你提供符合的數(shù)據(jù)，所以還是得要自己干。剛開(kāi)始實(shí)現(xiàn)時(shí)，第一時(shí)間想到的是用indexOf()去判斷，如果不含有我輸入的字符串，就返回-1，通過(guò)這點(diǎn)去判斷。寫(xiě)這個(gè)只要知道大概的想法，一般是不怎么會(huì)出錯(cuò)的。

onInput(e) {
    let value = e.detail.value;
    // console.log(value);
    const job = this.data.job;//匹配的數(shù)組
    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的，頁(yè)面從后一個(gè)頁(yè)面回來(lái)時(shí)，搜索的記錄會(huì)變成歷史記錄，同時(shí)搜索的值還會(huì)在input上，但是同樣列表還顯示在下面，這樣就會(huì)造成用戶體驗(yàn)及不良好，所以我給整個(gè)的搜索匹配到的列表一個(gè)三元運(yùn)算符，點(diǎn)擊跳轉(zhuǎn)之前就會(huì)將其設(shè)為false，然后列表就會(huì)隱藏起來(lái)，從后一個(gè)頁(yè)面返回時(shí)也不會(huì)出現(xiàn)那種狀況。

<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會(huì)碰到的問(wèn)題

• 請(qǐng)勿在scroll-view之中使用 textarea、map、canvas、video
• scroll-into-view的優(yōu)先級(jí)高于scroll-view
• scroll-view需要給scroll-view一個(gè)固定的寬度或高度，設(shè)置屬性scroll-x或scroll-y,并且設(shè)置樣式white-space:nowrap;（這個(gè)很重要，不設(shè)置這個(gè)樣式，無(wú)法完成scroll-view的效果
• 如果要下拉刷新時(shí)，請(qǐng)使用scroll-view組件自帶的方法，在scroll-view中滾動(dòng)是不會(huì)觸發(fā)onPullDownRefresh事件的

頁(yè)面返回傳值

跳轉(zhuǎn)頁(yè)面的時(shí)候，可以通過(guò)navigateTo將要傳遞參數(shù)放在url上，但是返回原頁(yè)面時(shí)，就得換過(guò)一種傳參方法。一種是在app.js中設(shè)置golbaldata，然后在你想要傳值的地方去設(shè)置golbaldata就可以了，或者你將數(shù)據(jù)儲(chǔ)存在stroage里面。還有一種就是 getCurrentPages() ，getCurrentPages() 函數(shù)用于獲取當(dāng)前頁(yè)面棧的實(shí)例，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁(yè)，最后一個(gè)元素為當(dāng)前頁(yè)面。

• 不要嘗試修改頁(yè)面棧，會(huì)導(dǎo)致路由以及頁(yè)面狀態(tài)錯(cuò)誤。

   

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

編輯簡(jiǎn)歷

用weui去寫(xiě)微信小程序去寫(xiě)節(jié)省我們一部分的時(shí)間。這個(gè)功能這里也有一個(gè)需要將值傳回來(lái)的，我在這里是將參數(shù)傳入stroage里面，因?yàn)槲蚁霌Q一種方式去實(shí)現(xiàn)。在個(gè)人信息中，有一個(gè)表單驗(yàn)證，在這里，我除了一個(gè)大虧。先貼代碼，看看我寫(xiě)的表單驗(yàn)。

<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">真實(shí)姓名</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input name-input" type="text" value="{{val}}" bindinput="nameChange" placeholder="請(qǐng)輸入" />
                </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>請(qǐng)選擇</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">最高學(xué)歷</view>
                <view class="weui-cell__ft">
                    <picker bindchange="bindEducationChange" value="{{index}}" range="{{arrayEducation.education}}">
                        <view class="selectPick" wx:if="{{!arrayEducation.isPickSelect}}">
                            <text>請(qǐng)選擇</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">工作經(jīng)驗(yàn)</view>
                <view class="weui-cell__ft">
                    <picker bindchange="bindExperienceChange" value="{{index}}" range="{{arrayExperience.experience}}">
                        <view class="selectPick" wx:if="{{!arrayExperience.isPickSelect}}">
                            <text>請(qǐng)選擇</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">手機(jī)號(hào)碼</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input name-input" type="number" value="{{val}}" bindinput="telChange" placeholder="請(qǐng)輸入" />
                </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">聯(lián)系郵箱</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input name-input" type="email" value="{{val}}" bindinput="mailChange" placeholder="請(qǐng)輸入" />
                </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>請(qǐng)選擇</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="說(shuō)出你的心聲" value="{{value}}" maxlength="60" class="input" bindinput="inputChange" />
                </view>
            </view>
            <button class="btnEdit"  bindtap="formSubmit">保存</button>
        </view>
</view>

formSubmit(e) {
    

    //驗(yàn)證是否輸入名字
    let nameVal = this.data.nameVal;
    if (!this.errorInput(nameVal, '請(qǐng)輸入你的名字')) {
      return false;
    };
console.log(nameVal)
    //驗(yàn)證是否選擇性別
    let sex = this.data.arraySex.sex[this.data.arraySex.index];
    if (!this.error(this.data.arraySex.isPickSelect, '請(qǐng)選擇你的性別')) {
      return false;
    };
console.log(sex)
    //驗(yàn)證是否選擇了出生日期
    let date = this.data.date;
    if (date === '1999-01-01') {
      w