寫在前面

小(xiao)(xiao)(xiao)程(cheng)序(xu)發布至今已有一(yi)年多(duo)時(shi)間(jian)(jian)，很多(duo)人都(dou)已經在小(xiao)(xiao)(xiao)程(cheng)序(xu)道(dao)路上狂奔。最近我(wo)也開始(shi)了(le)(le)學(xue)習小(xiao)(xiao)(xiao)程(cheng)序(xu)，學(xue)了(le)(le)一(yi)段時(shi)間(jian)(jian)后，想(xiang)看看這段時(shi)間(jian)(jian)的(de)學(xue)習效(xiao)果，于是(shi)邊學(xue)習邊開始(shi)了(le)(le)我(wo)的(de)第一(yi)個(ge)小(xiao)(xiao)(xiao)程(cheng)序(xu)。相(xiang)信很多(duo)人都(dou)用過小(xiao)(xiao)(xiao)紅書吧，我(wo)可是(shi)被(bei)它安(an)利了(le)(le)很多(duo)好東西呢，所以想(xiang)著就仿寫一(yi)個(ge)小(xiao)(xiao)(xiao)紅書的(de)微(wei)信小(xiao)(xiao)(xiao)程(cheng)序(xu)吧。下面我(wo)就給大(da)家(jia)“安(an)利”幾個(ge)我(wo)在寫的(de)過程(cheng)中的(de)“坑(keng)”。

因為花的時(shi)間(jian)不(bu)多，功能有(you)很(hen)多沒(mei)有(you)完善(shan)，頁面(mian)寫的不(bu)是很(hen)好(hao)看，請(qing)各位將(jiang)就著看啦(la)。╮(╯▽╰)╭

準備工作

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

• Markman：圖標標注工具，可用于取色、測量。
• Easy-Mock：可以偽造假數據，在js中引用就好了。點這里可以查看我的項目數據。
• Markdown：在線編輯器
• GifCam：Gif錄制工具
• 微信小程序開發文檔
• Iconfont-阿里巴巴矢量圖標庫 ：各種需要的小圖標都有哦

遇到的幾個問題

1、首頁導航欄左右滑動

效果圖：

這部分，是通過微信小程序的 scroll-view

組件(jian)來完(wan)成的。代碼如下：

<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"是(shi)(shi)設(she)置(zhi)其水平方(fang)(fang)向(xiang)滑動(dong)(dong)，如(ru)果要(yao)設(she)置(zhi)垂直方(fang)(fang)向(xiang)滑動(dong)(dong)，則(ze)使(shi)(shi)用scroll-y="true"。這(zhe)里要(yao)注意的(de)是(shi)(shi)，使(shi)(shi)用橫向(xiang)滾動(dong)(dong)時，需要(yao)給一個固(gu)定寬度(du)(du)，同(tong)理，豎向(xiang)滾動(dong)(dong)則(ze)要(yao)設(she)置(zhi)固(gu)定高(gao)度(du)(du)。導(dao)航(hang)列表的(de)每一項一定要(yao)設(she)置(zhi)寬度(du)(du)，其所有(you)項的(de)總寬度(du)(du)要(yao)小于scroll-view的(de)寬度(du)(du)，否則(ze)列表項會垂直排列。因為導(dao)航(hang)列表項的(de)個數(shu)比較多，這(zhe)里使(shi)(shi)用了(le) wx:for 循(xun)環將列表項循(xun)環出來(lai)。這(zhe)樣(yang)減少了(le)很多代碼量，真是(shi)(shi)個好東西φ(゜▽゜*)?

一些使用scroll-view的注意事(shi)項：

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

2、首頁文章列表隨著點擊導航欄列表改變

效果圖：

這部分，是通過微信小程序的 swiper

組件來(lai)完成的。代碼(ma)如下：

<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>

使用(yong)swiper組件，將所(suo)有文(wen)章列(lie)表(biao)包起來，每個swiper-item表(biao)示不(bu)同(tong)的(de)(de)列(lie)表(biao)模塊。之前在(zai)(zai)導航(hang)欄(lan)各列(lie)表(biao)項綁定了不(bu)同(tong)的(de)(de)值(zhi)，在(zai)(zai)點擊導航(hang)時觸發(fa) switchCategory 事件，swiper-item根據導航(hang)點擊的(de)(de)不(bu)同(tong)值(zhi)，展示相對(dui)應的(de)(de)item文(wen)章列(lie)表(biao)。在(zai)(zai)這(zhe)里(li)我使用(yong)了Easy-Mock將頁面的(de)(de)數(shu)據放在(zai)(zai)里(li)面，然后(hou)用(yong) wx:request 請求數(shu)據就(jiu)行了。

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

通過 wx:for 循環，將每個文(wen)章頁(ye)內容獲(huo)取過來。在swiper-item里面使用(yong)scroll-view，使得頁(ye)面可以滾動。

內容超出一(yi)屏(ping)的時候，文章列表右邊(bian)就(jiu)會出現滾動(dong)條，這樣也(ye)太(tai)丑了(le)(le)吧。那如何能讓這個(ge)滾動(dong)條不出現呢，那就(jiu)是讓它隱藏(zang)掉(diao)。通過在(zai)全局樣式(shi)中(zhong)設(she)置scroll隱藏(zang),這樣就(jiu)好看多了(le)(le)。

::-webkit-scrollbar{  
  height: 0;
  width: 0;
  color: transparent;   // 透明
}

 

3、搜索頁面的歷史記錄

在搜索框中輸入要搜索的內容后，輸入的內容會增加到歷史記錄里面。這里我用 wx：for

循環(huan)historyRecord，index值(zhi)區分不同的搜索內容，recordItem是要(yao)輸出(chu)在歷史記錄的值(zhi)。代碼如下(xia)：

<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>

因(yin)為文章的詳情頁(ye)還沒(mei)有寫，所以(yi)輸(shu)入搜索內(nei)容后彈出(chu)的相似(si)內(nei)容后，按enter鍵觸發bindconfirm事(shi)件，使用 wx.navigateTo 直接跳回(hui)了搜索頁(ye)面，之前輸(shu)入的搜索內(nei)容就(jiu)會增加到歷史記錄里(li)面。

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

 

4、收貨地址的添加

使用(yong)微信小程(cheng)序提供的表(biao)單(dan)組件(jian)，很(hen)快就(jiu)將添加地(di)址的頁面做好了。值(zhi)得一提的就(jiu)是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>

但(dan)是這塊地方，表單驗證及添加地址信(xin)息提(ti)交到地址列表中，有讓我一(yi)陣子頭疼。

首先(xian)就是表單(dan)驗(yan)證(zheng)(zheng)，當你提(ti)交表單(dan)時(shi)觸發 formSubmit 事(shi)件，對表單(dan)進行驗(yan)證(zheng)(zheng)。如果未輸(shu)入內容(rong)或者輸(shu)入內容(rong)格式有誤，通過 wx.showModal() 給(gei)用戶提(ti)示。代碼(ma)如下：

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
      })
    } 
  },

添加(jia)(jia)地(di)址信息提(ti)交到地(di)址列(lie)表中，這部分要怎么解決呢(ni)？我一(yi)開(kai)始的思路是，將添加(jia)(jia)的地(di)址信息存在(zai)(zai)本地(di)，然后在(zai)(zai)地(di)址列(lie)表那獲取(qu)添加(jia)(jia)的地(di)址信息。這樣就(jiu)不得不提(ti)下wx.setStorage( )和(he)wx.getStorage( )這兩(liang)個方法了。

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

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

wx:getStorage是從(cong)本地緩存中異步獲取指定 key 對應的(de)內容。Key指定了，所(suo)以(yi)再添加的(de)地址(zhi)就會(hui)覆(fu)蓋原來的(de)key對應的(de)內容，從(cong)而(er)得不到保存地址(zhi)的(de)效(xiao)果，只有一條數據。

//添加地址信息到本地緩存   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
    })
  }
})

于是呢，就去請(qing)教了幾位大(da)佬，看有什么方法可以解(jie)決(jue)這(zhe)個問題。經(jing)過討論(lun)，得出了解(jie)決(jue)辦法：將(jiang)添加的地址(zhi)信(xin)息push到全局上(shang)去，然后再從(cong)全局里面獲取，這(zhe)樣就不(bu)會將(jiang)之前(qian)的數據(ju)覆蓋。而且這(zhe)樣處理(li)，代(dai)碼(ma)量大(da)大(da)的減少了。 代(dai)碼(ma)如下(xia)：

// 定義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
})

 注意(yi)：需要在調(diao)用全局變量的(de)文件里，開始的(de)時(shi)候初始化(hua) app 這個(ge)對象

const app = getApp();

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

使用Easy-Mock偽造數據(ju)時(shi)，一定要書寫(xie)規范，我在(zai)這里踩的(de)"坑"就是：數據(ju)屬(shu)性名(ming)，不(bu)能包含“-”（比(bi)如：note-image）。這樣雖然數據(ju)接(jie)口能夠創建，但(dan)是引入(ru)的(de)時(shi)候(hou)就會報錯，引入(ru)的(de)數據(ju)為空。數據(ju)屬(shu)性名(ming)可以用“_”（比(bi)如：note_image)。

總結

以(yi)上便是(shi)(shi)我覺得比較容(rong)易掉坑(keng)，比較難(nan)的(de)(de)地方(fang)。還有很多(duo)沒(mei)有完(wan)成的(de)(de)功(gong)能，后續(xu)我會(hui)慢(man)慢(man)完(wan)善。對于小(xiao)程序(xu)這(zhe)方(fang)面，完(wan)全還是(shi)(shi)新手，給跟我一(yi)樣(yang)的(de)(de)新手的(de)(de)一(yi)個建議，除了看(kan)(kan)微(wei)信小(xiao)程序(xu)開發文檔之(zhi)外，也可以(yi)多(duo)看(kan)(kan)一(yi)看(kan)(kan)開源(yuan)的(de)(de)小(xiao)程序(xu)項目源(yuan)碼，遇到問題(ti)，可以(yi)看(kan)(kan)看(kan)(kan)別人是(shi)(shi)怎(zen)么解決的(de)(de)。各(ge)個社(she)區(qu)也是(shi)(shi)很好的(de)(de)平臺，可以(yi)將問題(ti)發布(bu)出來，大家一(yi)起解決。