iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >拉勾小程序如何开发
  • 680
分享到

拉勾小程序如何开发

2023-06-26 08:06:23 680人浏览 安东尼
摘要

本篇内容主要讲解“拉勾小程序如何开发”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“拉勾小程序如何开发”吧!数据请求拉勾里面有非常多的数据,所以我在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__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') {      w

到此,相信大家对“拉勾小程序如何开发”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 拉勾小程序如何开发

本文链接: https://www.lsjlt.com/news/308384.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 拉勾小程序如何开发
    本篇内容主要讲解“拉勾小程序如何开发”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“拉勾小程序如何开发”吧!数据请求拉勾里面有非常多的数据,所以我在easy mock里面创建了很多接口,...
    99+
    2023-06-26
  • 小程序如何开发
    这篇文章将为大家详细讲解有关小程序如何开发,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信官方简易教程我们先来看看微信官网给出的简易教程。起步基础,注册小程序帐号之后,需要安装开发工具,然后在官方开发工...
    99+
    2023-06-02
  • 开发类似货拉拉小程序有哪些好处
    这篇文章主要介绍开发类似货拉拉小程序有哪些好处,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!开发类似货拉拉小程序有什么好处? 快速注册功能用户可以通过该平台执行快速帐户注册功能,可以通过社交帐户进行注册或使用手机验证...
    99+
    2023-06-27
  • 小程序wepy上拉下拉如何解决
    这篇文章主要介绍了小程序wepy上拉下拉如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇小程序wepy上拉下拉如何解决文章都会有所收获,下面我们一起来看看吧。列表上拉下拉加载数据是再常见不过的功能,第一个...
    99+
    2023-06-26
  • 小程序插件如何开发
    本文小编为大家详细介绍“小程序插件如何开发”,内容详细,步骤清晰,细节处理妥当,希望这篇“小程序插件如何开发”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。  插件是对一组 js 接口或自定义组件的封装,用于提供给...
    99+
    2023-06-26
  • 小说阅读小程序如何开发
    这篇文章主要介绍了小说阅读小程序如何开发的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇小说阅读小程序如何开发文章都会有所收获,下面我们一起来看看吧。首先先说下边的tabBar,...
    99+
    2024-04-02
  • mpvue如何开发微信小程序
    这篇文章主要介绍mpvue如何开发微信小程序,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、mpvue简介mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vu...
    99+
    2024-04-02
  • 如何在App里拉起小程序?
    什么是小程序运行时框架? FinClip 的小程序编程模型是分为多个页面,每个页面有自己的 template、CSS 和 JS,实际在运行的时候,业务逻辑的 JS 代码是运行在独立的 JavaScript 引擎中,每个页面的 templat...
    99+
    2023-09-03
    小程序
  • 微信小程序中如何开发
    这篇文章主要介绍了微信小程序中如何开发,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、序微信小程序,估计大家都不陌生,现在应用场景特别多。...
    99+
    2024-04-02
  • taro如何开发微信小程序
    这篇文章主要为大家展示了“taro如何开发微信小程序”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“taro如何开发微信小程序”这篇文章吧。开发环境操作系统:Wi...
    99+
    2024-04-02
  • 微信小程序如何开发MAP
    这篇文章主要介绍了微信小程序如何开发MAP,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序 开发MAP(地图)实例详解在创建MAP(...
    99+
    2024-04-02
  • 微信小程序 | 小程序开发
    🖥️ 微信小程序专栏:小程序开发 初级知识 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫...
    99+
    2023-09-08
    微信小程序 小程序
  • 小程序开发中如何实现停止当前页面下拉刷新
    这篇“小程序开发中如何实现停止当前页面下拉刷新”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“小程序开发中如何实现停止当前页面下拉刷新”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢...
    99+
    2023-06-26
  • iOS开发 APP拉起微信小程序Universal Links配置
    APP中有需要跳转微信小程序的需求,记录一下接入过程 步骤一:配置Associated Domains 登录苹果开发者中心,找到对应的Identifier勾选 Associated Domains,重新配置下对应的描述文件,在Xcode中重...
    99+
    2023-08-17
    ios 微信小程序 小程序
  • 微信小程序开发中如何实现仿电影影评小程序开发
    这篇文章将为大家详细讲解有关微信小程序开发中如何实现仿电影影评小程序开发,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。  首先如图建立文件夹和page页面  然后app.json页面更新代码如下:  { ...
    99+
    2023-06-26
  • 校园快递小程序如何开发
    这篇文章主要介绍“校园快递小程序如何开发”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“校园快递小程序如何开发”文章能帮助大家解决问题。校园快递小程序开发流程:一、明确校园快递小程序的核心内容 首先,...
    99+
    2023-06-27
  • 新手如何开发小程序社区
    本文小编为大家详细介绍“新手如何开发小程序社区”,内容详细,步骤清晰,细节处理妥当,希望这篇“新手如何开发小程序社区”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。微信小程序越来越受欢迎,很多小白也想制作自己的小程...
    99+
    2023-06-27
  • 小程序日历组件如何开发
    本篇内容主要讲解“小程序日历组件如何开发”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“小程序日历组件如何开发”吧!  模版应用:  src="../cal/calendar.wxml&...
    99+
    2023-06-26
  • mpvue如何开发音频类小程序
    这篇文章主要为大家展示了“mpvue如何开发音频类小程序”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“mpvue如何开发音频类小程序”这篇文章吧。这是我第一次开...
    99+
    2024-04-02
  • 微信电商小程序如何开发
    今天小编给大家分享一下微信电商小程序如何开发的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。电商底部导航栏的制作我想大家对电商...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作