有贊招聘小程式，有你就很贊

Kerinlin發表於2018-06-11

前言

學了大概一個月的小程式，從對小程式的一無所知，到現在對小程式的漸漸熟悉，其實心裡挺開心的。現在看到一個小程式，腦子裡想的不是這個功能怎麼怎麼好用，而是在想 這個功能該怎麼實現，應該怎麼設定資料，大概的邏輯該是怎麼樣的，這是這個小專案對我最大的幫助。這個小程式用了一週時間，想著趁剛剛學完，趕緊做個小專案鞏固下自己學習的內容，效果還是很好的。這個小程式說不上很高階，如果您是大神，您可以跳出文章，這些知識您都知道，就不要浪費您時間了，留著點時間看別的有用的知識。如果您也是跟我一樣的新手，想鞏固自己的學習內容，那您可以看看我這篇文章，我會對我踩得坑以及一些解決辦法還有一些效果的實現做一個總結，或許對您有幫助。

小功能的實現

小坑提醒

  • 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>
複製程式碼

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標籤，但是內容間又有間距怎麼辦？剛開始用&nbsp後面測試下發現在小程式裡直接這樣是沒有用的，必須加上decode="{{true}}"，還要記得加分號，不然沒有用

<text decode="{{true}}" class="titleTag">#簡歷處理快如閃電&nbsp;&nbsp;&nbsp;#很少回聊天資訊&emsp;#早上活躍</text>
複製程式碼

不過我更加傾向於用第二種方法:把輸入法改成全形，然後就可以愉快的使用空格打空格了

資料的操作

  • 頁面間資料的傳遞
    • wx.request或者navigator的url引數代入一個個性值，通過與另一個頁面間的資料匹配，實現頁面間資料的同步
    • 快取setStorage,getStorage,一邊設定，另一邊獲取
    • globalData,全域性變數,通過getApp().globalData方法賦值

  • 狀態操作的經驗

    只要涉及到狀態操作的，可以考慮使用三元運算子，通過在資料層true or false控制狀態，然後檢視層通過類名控制樣式

工具與網站分享

我的一些想法

  • 底部tabBar可以通過設定一大一小圖片，展示選中效果，這樣會有一種動態效果，會不會體驗更好一點？

有贊招聘小程式，有你就很贊

最後小結

這個專案確確實實的加深了我對小程式的理解，但更重要得是，能感覺到自己獨立解決問題的能力提升不少，最後總結的時候會發現自己踩過好多坑，雖然中途也因為沒解決問題感到痛苦，但是現在總結寫文章的時候，感覺很棒，對自己走過的路總結，反省的過程是真的很愉快的，會對自己認識也更深刻一點，最後希望自己會越來越好，希望以後能給社群帶來更好的專案，最後附上原始碼

相關文章