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

摘要:  有赞招聘小程序,有你就很赞前言学了大概一个月的小程序,从对小程序的一无所知,到现在对小程序的渐渐熟悉,其实心里挺开心的。现在看到一个小程序,脑子里想的不是这个功能怎么怎么好用,而是在想这个功能该怎么实 ...

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

前言

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


小功能的实现

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

小坑提醒

  • swiper组件圆点位置的改变
有赞招聘小程序,有你就很赞

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

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

  • swiper滑动同步改变内容
有赞招聘小程序,有你就很赞

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

        {{name}}

js

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

  • 标题栏标题与两边线的距离
有赞招聘小程序,有你就很赞

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

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

  • 列表上cell的线的隐藏
有赞招聘小程序,有你就很赞

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

.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组件的优先级最高,试了很多下,想把view放上去,不过最后都无功而返,最后百度下,发现用cover-view可以,不过cover-view能用的范围也不多,暂时还没找到更加好的办法


  • 文字间无法插入空格的问题
有赞招聘小程序,有你就很赞

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

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

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


数据的操作

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

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

工具与网站分享

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

我的一些想法

  • 底部tabBar可以通过设置一大一小图片,展示选中效果,这样会有一种动态效果,会不会体验更好一点?
有赞招聘小程序,有你就很赞


最后小结

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

如果文章对你有帮助,欢迎点击上方按钮打赏作者

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

返回顶部