有赞招聘小程序，有你就很赞

仿有赞招聘小程序

前言

学了大概一个月的小程序&＃xff0c;从对小程序的一无所知&＃xff0c;到现在对小程序的渐渐熟悉&＃xff0c;其实心里挺开心的。现在看到一个小程序&＃xff0c;脑子里想的不是这个功能怎么怎么好用&＃xff0c;而是在想这个功能该怎么实现&＃xff0c;应该怎么设置数据&＃xff0c;大概的逻辑该是怎么样的&＃xff0c;这是这个小项目对我最大的帮助。这个小程序用了一周时间&＃xff0c;想着趁刚刚学完&＃xff0c;赶紧做个小项目巩固下自己学习的内容&＃xff0c;效果还是很好的。这个小程序说不上很高级&＃xff0c;如果您是大神&＃xff0c;您可以跳出文章&＃xff0c;这些知识您都知道&＃xff0c;就不要浪费您时间了&＃xff0c;留着点时间看别的有用的知识。如果您也是跟我一样的新手&＃xff0c;想巩固自己的学习内容&＃xff0c;那您可以看看我这篇文章&＃xff0c;我会对我踩得坑以及一些解决办法还有一些效果的实现做一个总结&＃xff0c;或许对您有帮助。

小功能的实现

页面缓存的操作&＃xff08;搜索历史记录&＃xff09;&＃xff0c;页面搜索功能实现
小程序折叠与展开文章的的实现
小程序收藏功能的实现
小程序弹出菜单的实现
小程序模板的使用
小程序地图组件的使用

小坑提醒

swiper组件圆点位置的改变

swiper组件圆点的默认位置在中间&＃xff0c;找了很久找到圆点位置的设置属性

.product-image .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom: 2rpx;margin-left: 300rpx; }

swiper滑动同步改变内容

在swiper组件上绑定bindchange事件&＃xff0c;然后使用current表示当前滑块id&＃xff0c;然后在要显示文字的view中绑定数据层的current&＃xff0c;实现同步
wxml:

{{name}}

changeDec: function (e) {let current &＃61; e.detail.current;switch (current) {case 0:this.setData({name: &＃39;有赞零售&＃39;})break;case 1:this.setData({name: &＃39;有赞云&＃39;})break;case 2:this.setData({name: &＃39;有赞微商城&＃39;})break;}this.setData({current: current,})},

标题栏标题与两边线的距离

由于使用了weui&＃xff0c;样式默认为原有样式&＃xff0c;但是我又想改下他们之间的距离&＃xff0c;然后在源码中找到了设置方法

.weui-loadmore__tips_in-line{padding: 0 2em;color: #6e6e6f; }

列表上cell的线的隐藏

上边框的线怎么隐藏&＃xff1f;试了好久,还以为是border的问题&＃xff0c;后面发现这个是伪元素的问题&＃xff0c;这个也是看源码分析出的&＃xff0c;发现看源码真的能解决很多问题

.company-adress>.weui-media-box:nth-child(3):before{content: " ";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1rpx solid #e5e5e5;left: 7px } .company-adress>.weui-media-box:nth-child(4):before{content: " ";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1rpx solid #e5e5e5;left: 7px }

map组件遮住内容的问题

由于map组件的优先级最高&＃xff0c;试了很多下&＃xff0c;想把view放上去&＃xff0c;不过最后都无功而返&＃xff0c;最后百度下&＃xff0c;发现用cover-view可以&＃xff0c;不过cover-view能用的范围也不多&＃xff0c;暂时还没找到更加好的办法

文字间无法插入空格的问题

有时候有些文字描述的内容没有必要再加一个text标签&＃xff0c;但是内容间又有间距怎么办&＃xff1f;刚开始用后面测试下发现在小程序里直接这样是没有用的&＃xff0c;必须加上decode&＃61;"{{true}}"&＃xff0c;还要记得加分号&＃xff0c;不然没有用

#简历处理快如闪电 #很少回聊天信息　#早上活跃

不过我更加倾向于用第二种方法:把输入法改成全角&＃xff0c;然后就可以愉快的使用空格打空格了

数据的操作

页面间数据的传递
- wx.request或者navigator的url参数代入一个个性值&＃xff0c;通过与另一个页面间的数据匹配&＃xff0c;实现页面间数据的同步
- 缓存setStorage,getStorage,一边设置&＃xff0c;另一边获取
- globalData,全局变量,通过getApp().globalData方法赋值

状态操作的经验
只要涉及到状态操作的&＃xff0c;可以考虑使用三元运算符&＃xff0c;通过在数据层true or false控制状态&＃xff0c;然后视图层通过类名控制样式

工具与网站分享

GifCam(Gif录制工具)
snipaster(截图取色工具)
everything(文件快速检索)
猎豹翻译(一款浏览器插件&＃xff0c;支持划词翻译&＃xff0c;很方便)
IDM(高速下载工具)
Octotree(树形显示GitHub目录)
Page Ruler(屏幕尺子插件,可以在量屏幕尺寸像素大小)
Fiddle(抓包工具)
Momentum(chrome新空白标签页主题)
Textify(窗体文本复制工具)
小程序社区
小程序开发文档

我的一些想法

底部tabBar可以通过设置一大一小图片&＃xff0c;展示选中效果&＃xff0c;这样会有一种动态效果&＃xff0c;会不会体验更好一点&＃xff1f;

最后小结

这个项目确确实实的加深了我对小程序的理解&＃xff0c;但更重要得是&＃xff0c;能感觉到自己独立解决问题的能力提升不少&＃xff0c;最后总结的时候会发现自己踩过好多坑&＃xff0c;虽然中途也因为没解决问题感到痛苦&＃xff0c;但是现在总结写文章的时候&＃xff0c;感觉很棒&＃xff0c;对自己走过的路总结&＃xff0c;反省的过程是真的很愉快的&＃xff0c;会对自己认识也更深刻一点&＃xff0c;最后希望自己会越来越好&＃xff0c;希望以后能给社区带来更好的项目&＃xff0c;最后附上源码