千家信息网

拉勾小程序如何开发

发表于:2024-12-12 作者:千家信息网编辑
千家信息网最后更新 2024年12月12日,本篇内容主要讲解"拉勾小程序如何开发",感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习"拉勾小程序如何开发"吧!数据请求拉勾里面有非常多的数据,所以我在easy
千家信息网最后更新 2024年12月12日拉勾小程序如何开发

本篇内容主要讲解"拉勾小程序如何开发",感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习"拉勾小程序如何开发"吧!

数据请求

拉勾里面有非常多的数据,所以我在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,然后列表就会隐藏起来,从后一个页面返回时也不会出现那种状况。

{{item}}
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里面,因为我想换一种方式去实现。在个人信息中,有一个表单验证,在这里,我除了一个大亏。先贴代码,看看我写的表单验。

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