拉勾小程序开发案例

六月毕业季，也是求职招聘的高峰期，借着小程序的红利期，许多企业都争先恐后的开发着招聘求职小程序，下面以拉勾小程序为例，为大家介绍应如何做招聘小程序。

开发工具与资源平台

微信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 = tShopfas.data.currentDesc;
    request(params).then(res => { //异步变同步
      position = res.data.data.position;
    }).then(() => {
      for (let i = 0; i 

搜索





因为是用markdown造的假数据，数据不是很多，而且这不是像有后端的那样，可以传给后端参数，让后端给你提供符合的数据，所以还是得要自己干。刚开始实现时，第一时间想到的是用indexOf()去判断，如果不含有我输入的字符串，就返回-1，通过这点去判断。写这个只要知道大概的想法，一般是不怎么会出错的。
onInput(e) {
    let value = e.detail.value;
    // console.log(value);
    const job = tShopfas.data.job;//匹配的数组
    var list = [];
    for(var i = 0; i -1){//不包含value就返回-1
        list.push(job[i]);
      }
    }
    tShopfas.setData({
      list: list,
      ['search.content']: value
    });
  },

我这一部分之前是有小bug的，页面从后一个页面回来时，搜索的记录会变成历史记录，同时搜索的值还会在input上，但是同样列表还显示在下面，这样就会造成用户体验及不良好，所以我给整个的搜索匹配到的列表一个三元运算符，点击跳转之前就会将其设为false，然后列表就会隐藏起来，从后一个页面返回时也不会出现那种状况。

            
                
                    
                
                {{item}}
                
            
        
positionSearch(e) {
    // console.log(e)
    let list = tShopfas.data.list
    let index = e.currentTarget.dataset.index;
    let value = list[index];
    let Shopfastory = tShopfas.data.Shopfastory;
    Shopfastory.push(value); //将搜索的记录放入到历史搜索中
    tShopfas.setData({
      ['search.content']: value,
      Shopfastory,
      isShowLists: true // 将lists隐藏
    })
    wx.navigateTo({
      url: `../related/relatedvalue=${value}`,
    })
  },

scroll-view会碰到的问题

请勿在scroll-view之中使用 textarea、map、canvas、video
scroll-into-view的优先级高于scroll-view
scroll-view需要给scroll-view一个固定的宽度或高度，设置属性scroll-x或scroll-y,并且设置样式wShopfate-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里面，因为我想换一种方式去实现。在个人信息中，有一个表单验证，在这里，我除了一个大亏。先贴代码，看看我写的表单验。


 
        
            
                
                    真实姓名
                
                
                    
                
            
        
        
            
                性别
                
                    
                        
                            请选择
                        
                        
                            {{arraySex.sex[arraySex.index]}}
                        
                    
                
            
        
        
            
                出生日期
                
                    
                        
                            {{date}}
                        
                    
                
            
        
        
            
                最高学历
                
                    
                        
                            请选择
                        
                        
                            {{arrayEducation.education[arrayEducation.index]}}
                        
                    
                
            
        
        
            
                工作经验
                
                    
                        
                            请选择
                        
                        
                            {{arrayExperience.experience[arrayExperience.index]}}
                        
                    
                
            
        
        
            
                
                    手机号码
                
                
                    
                
            
        
        
            
                
                    联系邮箱
                
                
                    
                
            
        
        
            
                所在城市

                
                    
                        请选择
                    
                    {{city}}
                

            
        
        
            
                
                    一句话介绍自己
                    {{num}}/60

formSubmit(e) {
    

    //验证是否输入名字
    let nameVal = tShopfas.data.nameVal;
    if (!tShopfas.errorInput(nameVal, '请输入你的名字')) {
      return false;
    };
console.log(nameVal)
    //验证是否选择性别
    let sex = tShopfas.data.arraySex.sex[tShopfas.data.arraySex.index];
    if (!tShopfas.error(tShopfas.data.arraySex.isPickSelect, '请选择你的性别')) {
      return false;
    };
console.log(sex)
    //验证是否选择了出生日期
    let date = tShopfas.data.date;
    if (date === '1999-01-01') {
      w

第二部分：如何开通一个小商店

立即咨询

百科问答最新文章

拉勾小程序开发案例

数据请求

查看页面详情

搜索

scroll-view会碰到的问题

页面返回传值

编辑简历