「小紅書」——給你一記安利

時間 2019-11-24

標籤安利简体版

原文原文鏈接

微信小程序html

寫在前面

小程序發佈至今已有一年多時間，不少人都已經在小程序道路上狂奔。最近我也開始了學習小程序，學了一段時間後，想看看這段時間的學習效果，因而邊學習邊開始了個人第一個小程序。相信不少人都用太小紅書吧，我但是被它安利了不少好東西呢，因此想着就仿寫一個小紅書的微信小程序吧。下面我就給你們「安利」幾個我在寫的過程當中的「坑」。
由於花的時間很少，功能有不少沒有完善，頁面寫的不是很好看，請各位將就着看啦。╮(╯▽╰)╭ git

準備工做

開發環境：WXML(HTML),WXSS(CSS),Javascript
開發工具：vscode，微信開發者工具
輔助工具：

Markman：圖標標註工具，可用於取色、測量。
Easy-Mock：能夠僞造假數據，在js中引用就行了。點這裏能夠查看個人項目數據。
Markdown：在線編輯器
GifCam：Gif錄製工具
微信小程序開發文檔
Iconfont-阿里巴巴矢量圖標庫：各類須要的小圖標都有哦

遇到的幾個問題

一、首頁導航欄左右滑動

效果圖：
github

這部分，是經過微信小程序的 scroll-view組件來完成的。代碼以下：

<scroll-view class="navBar-box" scroll-x="true" style="white-space: nowrap; display:flex ">
    <view class="cate-list {{curIndex==index?'on':''}}" wx:for="{{category}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchCategory">
        {{item.name}}
    </view>
</scroll-view>
複製代碼

scroll-x="true"是設置其水平方向滑動，若是要設置垂直方向滑動，則使用scroll-y="true"。這裏要注意的是，使用橫向滾動時，須要給一個固定寬度，同理，豎向滾動則要設置固定高度。導航列表的每一項必定要設置寬度，其全部項的總寬度要小於scroll-view的寬度，不然列表項會垂直排列。由於導航列表項的個數比較多，這裏使用了wx:for循環將列表項循環出來。這樣減小了不少代碼量，真是個好東西φ(゜▽゜*)♪
一些使用scroll-view的注意事項：web

請勿在 scroll-view 中使用 textarea、map、canvas、video 組件
scroll-into-view 的優先級高於 scroll-top
在滾動 scroll-view 時會阻止頁面回彈，因此在 scroll-view 中滾動，是沒法觸發 onPullDownRefresh
若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view ，這樣也能經過點擊頂部狀態欄回到頁面頂部

二、首頁文章列表隨着點擊導航欄列表改變

效果圖：canvas

這部分，是經過微信小程序的 swiper組件來完成的。代碼以下：

<swiper class="notes" current="{{toView}}">
  <swiper-item class="category" wx:for="{{detail}}"
  wx:key="{{item.id}}">
    <scroll-view class="cate-box" id="{{item.id}}" scroll-y>
     <-- 文章列表內容 -->
      <view class="note" wx:for="{{item.notes}}" wx:for-item="notes" wx:key="{{index}}">
        <view class="note-info">      
          <navigator url="../index/note-info/note-info" >
            <view class="home-note-img">
              <image src="{{notes.note_image}}"/>
            </view>
            <span>{{notes.title}}</span>
          </navigator>
        </view> 
        <!-- 做者信息 -->
        <view class="note-handle">
          <navigator class="writer" url="../index/note-writer/note-writer">
            <image class="photo-img" src="{{notes.writer_img}}"/>
            <span class="name">{{notes.writer}}</span>
          </navigator>
          <view class="like">
            <image class="like-icon" src="/images/like.png"/>
            <span>{{notes.like}}</span>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
</swiper>
複製代碼

使用swiper組件，將全部文章列表包起來，每一個swiper-item表示不一樣的列表模塊。以前在導航欄各列表項綁定了不一樣的值，在點擊導航時觸發switchCategory事件，swiper-item根據導航點擊的不一樣值，展現相對應的item文章列表。在這裏我使用了Easy-Mock將頁面的數據放在裏面，而後用wx:request請求數據就好了。小程序

// 請求數據
wx.request({
  url: 'https://www.easy-mock.com/mock/5b1e17a0d4a14a3247a6cd6b/',
  success: (res) => {
    this.setData({
      detail: res.data.data
    })
  }
})  
複製代碼

經過wx:for循環，將每一個文章頁內容獲取過來。在swiper-item裏面使用scroll-view，使得頁面能夠滾動。
微信小程序

內容超出一屏的時候，文章列表右邊就會出現滾動條，這樣也太醜了吧。那如何能讓這個滾動條不出現呢，那就是讓它隱藏掉。經過在全局樣式中設置scroll隱藏,這樣就好看多了。

::-webkit-scrollbar{  
  height: 0;
  width: 0;
  color: transparent;   // 透明
}
複製代碼

三、搜索頁面的歷史記錄

在搜索框中輸入要搜索的內容後，輸入的內容會增長到歷史記錄裏面。這裏我用 wx：for循環historyRecord，index值區分不一樣的搜索內容，recordItem是要輸出在歷史記錄的值。代碼以下：

<view class="search-history">
    <text class="history-record">歷史記錄</text>
    
    <view class="search-history-item" wx:for="{{historyRecord}}" wx:key="{{index}}">    
        <text>{{item.recordItem}}</text>
    </view>
</view>
複製代碼

由於文章的詳情頁尚未寫，因此輸入搜索內容後彈出的類似內容後，按enter鍵觸發bindconfirm事件，使用wx.navigateTo直接跳回了搜索頁面，以前輸入的搜索內容就會增長到歷史記錄裏面。api

bindconfirm: function(e){      
  var recordItem = e.detail.value;
  this.saveHistory({
    id: 0,
    recordItem
  })
  wx.navigateTo({      //跳轉到搜索頁面
    url: '../searchbar/searchbar',
  })
  this.setData({
    searchContext:''
  })
},
複製代碼

四、收貨地址的添加

使用微信小程序提供的表單組件，很快就將添加地址的頁面作好了。值得一提的就是 picker。
picker：從底部彈起的滾動選擇器，現支持五種選擇器，經過mode來區分，分別是普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區選擇器，默認是普通選擇器。它的一些屬性，可點擊查看 picker。

<!-- wxml -->
<picker bindchange="bindaddressChange" value="{{addressValue}}" range="{{addressRange}}">
    <view class="weui-select weui-select_in-select-after" name="adress">{{addressRange[addressValue]}}</view>
複製代碼

//  js 設置初始值
 data: {
    addressValue: 0,   //地址下標
    addressRange: ["北京市","江西省", "湖南省", "上海市","湖北省","浙江省", "福建省", "重慶市"],
  },
</picker>
複製代碼

可是這塊地方，表單驗證及添加地址信息提交到地址列表中，有讓我一陣子頭疼。
首先就是表單驗證，當你提交表單時觸發formSubmit事件，對錶單進行驗證。若是未輸入內容或者輸入內容格式有誤，經過wx.showModal()給用戶提示。代碼以下：緩存

formSubmit: function(e){
    var warn = "";
    var that = this;
    var flag = false;
    if(!e.detail.value.name){       //判斷輸入內容
      warn = "請填寫收件人！";
    } else if(!e.detail.value.tel){
      warn = "請填寫手機號碼！";
    } else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel))){
      warn = "手機號碼格式不正確！";
    } else if(!e.detail.value.adress){
      warn = "請選擇地區！";
    } else if(!e.detail.value.doorAdress){
      warn = "請填寫詳細地址！";
    } else if(!e.detail.value.IDcard){
      warn = "請填寫身份證號碼";
    } else if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(e.detail.value.IDcard)){
      warn = "身份證號碼格式不正確"
    } else{
      flag=true;
        // 存儲到全局變量adressInfo
        app.globalData.adressInfo.push(e.detail.value);
        wx.navigateTo({
          url: '/pages/my/adress/adress'
        })
    }
    if(flag==false){     
        wx.showModal({
        title: '提示',
        content:warn
      })
    } 
  },
複製代碼

添加地址信息提交到地址列表中，這部分要怎麼解決呢？我一開始的思路是，將添加的地址信息存在本地，而後在地址列表那獲取添加的地址信息。這樣就不得不提下wx.setStorage( )和wx.getStorage( )這兩個方法了。微信

wx.setStorage()：將數據存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應的內容，這是一個異步接口。

wx.getStorage()：從本地緩存中異步獲取指定 key 對應的內容。

wx:getStorage是從本地緩存中異步獲取指定 key 對應的內容。Key指定了，因此再添加的地址就會覆蓋原來的key對應的內容，從而得不到保存地址的效果，只有一條數據。

//添加地址信息到本地緩存 add-adress.js
submitdate: function (event) {
    var adressInfo = event.detail.value;
    wx.setStorage({
        key: 'adressInfo',
        data: adressInfo,
        success: function (res){
          wx.navigateTo({
            url: '/pages/my/adress/adress'
          })
        }
  })
},
//地址列表裏獲取緩存在本地的地址信息 adress.js 
var that=this;     
wx.getStorage({
  key:'adressInfo',
  success:function(res){
    console.log(res);
    var adressInfo=[];
    adressInfo.push(res.data);
    that.setData({
      adressInfo
    })
  }
})
複製代碼

因而呢，就去請教了幾位大佬，看有什麼方法能夠解決這個問題。通過討論，得出瞭解決辦法：將添加的地址信息push到全局上去，而後再從全局裏面獲取，這樣就不會將以前的數據覆蓋。並且這樣處理，代碼量大大的減小了。代碼以下：

// 定義globalData對應的全局變量 app.js
globalData: {
    userInfo: null,
    adressInfo:[]
}
// 提交地址信息，調用定義的變量 add-adress.js
submitdate: function (event) {
    app.globalData.adressInfo.push(event.detail.value);
    wx.navigateTo({
        url: '/pages/my/adress/adress'
    })
    console.log(app.globalData.adressInfo);
},
//獲取地址信息,調用定義的變量 adress.js
var that=this;     
that.setData({
  adressInfo:app.globalData.adressInfo
})
複製代碼

注意：須要在調用全局變量的文件裏，開始的時候初始化app這個對象

const app = getApp();
複製代碼

五、Easy-Mock數據接口的引入問題

使用Easy-Mock僞造數據時，必定要書寫規範，我在這裏踩的"坑"就是：數據屬性名，不能包含「-」（好比：note-image）。這樣雖然數據接口可以建立，可是引入的時候就會報錯，引入的數據爲空。數據屬性名能夠用「_」（好比：note_image)。

總結

以上即是我以爲比較容易掉坑，比較難的地方。還有不少沒有完成的功能，後續我會慢慢完善。對於小程序這方面，徹底仍是新手，給跟我同樣的新手的一個建議，除了看微信小程序開發文檔以外，也能夠多看一看開源的小程序項目源碼，遇到問題，能夠看看別人是怎麼解決的。各個社區也是很好的平臺，能夠將問題發佈出來，你們一塊兒解決。

本文若是有很差的地方，或者更好的方法，歡迎大佬們指出，一塊兒學習。
本文爲我的原創，若是你想對個人項目想要了解更多，能夠查看個人項目源碼。但願這篇文章對你有幫助，歡迎你們點贊收藏~~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。