258资源分享网

现在的前端有各种各样的新知识和新框架，小程序才出生几年，就已经火到这种程度了，所以作为前端学习者，这个新技能我们是一定要尽快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=http://www.yiyongtong.com/archives/"../../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