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

仿有赞招聘小程序

前言

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

小功能的实现

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

小坑提醒

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:

<swiper class="product-image" indicator-active-color="#fff" indicator-dots="true" bindchange="changeDec" current="{{current}}" circular="true">
            <block wx:for="{{productImg}}" wx:for-index="index" wx:key="id">
                <swiper-item>
                    <image src="{{item.url}}" class="slide-image" mode="aspectFill" />
                </swiper-item>
            </block>
      </swiper>
     <view class="product-dec" data-id="{{current}}">{{name}}</view>

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标签，但是内容间又有间距怎么办？刚开始用&nbsp后面测试下发现在小程序里直接这样是没有用的，必须加上decode="{{true}}"，还要记得加分号，不然没有用

<text decode="{{true}}" class="titleTag">#简历处理快如闪电&nbsp;&nbsp;&nbsp;#很少回聊天信息　#早上活跃</text>

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

数据的操作

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

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

工具与网站分享

我的一些想法

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

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

最后小结

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

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

仿有赞招聘小程序

前言

小功能的实现

小坑提醒

数据的操作

工具与网站分享

我的一些想法

最后小结

相关推荐