小程序模板網(wǎng)

“小紅書(shū)”——給你安利幾個(gè)小程序的“坑”

發(fā)布時(shí)間:2018-06-20 14:35 所屬欄目:小程序開(kāi)發(fā)教程

寫(xiě)在前面

小程序發(fā)布至今已有一年多時(shí)間,很多人都已經(jīng)在小程序道路上狂奔。最近我也開(kāi)始了學(xué)習(xí)小程序,學(xué)了一段時(shí)間后,想看看這段時(shí)間的學(xué)習(xí)效果,于是邊學(xué)習(xí)邊開(kāi)始了我的第一個(gè)小程序。相信很多人都用過(guò)小紅書(shū)吧,我可是被它安利了很多好東西呢,所以想著就仿寫(xiě)一個(gè)小紅書(shū)的微信小程序吧。下面我就給大家“安利”幾個(gè)我在寫(xiě)的過(guò)程中的“坑”。

因?yàn)榛ǖ臅r(shí)間不多,功能有很多沒(méi)有完善,頁(yè)面寫(xiě)的不是很好看,請(qǐng)各位將就著看啦。╮(╯▽╰)╭

準(zhǔn)備工作

  1. 開(kāi)發(fā)環(huán)境:WXML(HTML),WXSS(CSS),Javascript
  2. 開(kāi)發(fā)工具:vscode, 微信開(kāi)發(fā)者工具
  3. 輔助工具:
  • Markman:圖標(biāo)標(biāo)注工具,可用于取色、測(cè)量。
  • Easy-Mock:可以偽造假數(shù)據(jù),在js中引用就好了。點(diǎn)這里可以查看我的項(xiàng)目數(shù)據(jù)。
  • Markdown:在線編輯器
  • GifCam:Gif錄制工具
  • 微信小程序開(kāi)發(fā)文檔
  • Iconfont-阿里巴巴矢量圖標(biāo)庫(kù) :各種需要的小圖標(biāo)都有哦

遇到的幾個(gè)問(wèn)題

1、首頁(yè)導(dǎo)航欄左右滑動(dòng)

效果圖:

這部分,是通過(guò)微信小程序的 scroll-view

組件來(lái)完成的。代碼如下:

<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"是設(shè)置其水平方向滑動(dòng),如果要設(shè)置垂直方向滑動(dòng),則使用scroll-y="true"。這里要注意的是,使用橫向滾動(dòng)時(shí),需要給一個(gè)固定寬度,同理,豎向滾動(dòng)則要設(shè)置固定高度。導(dǎo)航列表的每一項(xiàng)一定要設(shè)置寬度,其所有項(xiàng)的總寬度要小于scroll-view的寬度,否則列表項(xiàng)會(huì)垂直排列。因?yàn)閷?dǎo)航列表項(xiàng)的個(gè)數(shù)比較多,這里使用了 wx:for 循環(huán)將列表項(xiàng)循環(huán)出來(lái)。這樣減少了很多代碼量,真是個(gè)好東西φ(゜▽゜*)?

一些使用scroll-view的注意事項(xiàng):

  • 請(qǐng)勿在 scroll-view 中使用 textarea、map、canvas、video 組件
  • scroll-into-view 的優(yōu)先級(jí)高于 scroll-top
  • 在滾動(dòng) scroll-view 時(shí)會(huì)阻止頁(yè)面回彈,所以在 scroll-view 中滾動(dòng),是無(wú)法觸發(fā) onPullDownRefresh
  • 若要使用下拉刷新,請(qǐng)使用頁(yè)面的滾動(dòng),而不是 scroll-view ,這樣也能通過(guò)點(diǎn)擊頂部狀態(tài)欄回到頁(yè)面頂部

2、首頁(yè)文章列表隨著點(diǎn)擊導(dǎo)航欄列表改變

效果圖:

這部分,是通過(guò)微信小程序的 swiper

組件來(lái)完成的。代碼如下:

<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>
     <-- 文章列表內(nèi)容 -->
      <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組件,將所有文章列表包起來(lái),每個(gè)swiper-item表示不同的列表模塊。之前在導(dǎo)航欄各列表項(xiàng)綁定了不同的值,在點(diǎn)擊導(dǎo)航時(shí)觸發(fā) switchCategory 事件,swiper-item根據(jù)導(dǎo)航點(diǎn)擊的不同值,展示相對(duì)應(yīng)的item文章列表。在這里我使用了Easy-Mock將頁(yè)面的數(shù)據(jù)放在里面,然后用 wx:request 請(qǐng)求數(shù)據(jù)就行了。

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

通過(guò) wx:for 循環(huán),將每個(gè)文章頁(yè)內(nèi)容獲取過(guò)來(lái)。在swiper-item里面使用scroll-view,使得頁(yè)面可以滾動(dòng)。

內(nèi)容超出一屏的時(shí)候,文章列表右邊就會(huì)出現(xiàn)滾動(dòng)條,這樣也太丑了吧。那如何能讓這個(gè)滾動(dòng)條不出現(xiàn)呢,那就是讓它隱藏掉。通過(guò)在全局樣式中設(shè)置scroll隱藏,這樣就好看多了。

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

 

3、搜索頁(yè)面的歷史記錄

在搜索框中輸入要搜索的內(nèi)容后,輸入的內(nèi)容會(huì)增加到歷史記錄里面。這里我用 wx:for

循環(huán)historyRecord,index值區(qū)分不同的搜索內(nèi)容,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>

因?yàn)槲恼碌脑斍轫?yè)還沒(méi)有寫(xiě),所以輸入搜索內(nèi)容后彈出的相似內(nèi)容后,按enter鍵觸發(fā)bindconfirm事件,使用 wx.navigateTo 直接跳回了搜索頁(yè)面,之前輸入的搜索內(nèi)容就會(huì)增加到歷史記錄里面。

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

 

4、收貨地址的添加

使用微信小程序提供的表單組件,很快就將添加地址的頁(yè)面做好了。值得一提的就是picker。

picker :從底部彈起的滾動(dòng)選擇器,現(xiàn)支持五種選擇器,通過(guò)mode來(lái)區(qū)分,分別是普通選擇器,多列選擇器,時(shí)間選擇器,日期選擇器,省市區(qū)選擇器,默認(rèn)是普通選擇器。它的一些屬性,可點(diǎn)擊查看 picker

<!-- wxml -->
<picker bindchange="bindaddressChange" value="{{addressValue}}" range="{{addressRange}}">
    <view class="weui-select weui-select_in-select-after" name="adress">{{addressRange[addressValue]}}</view>
//  js 設(shè)置初始值
 data: {
    addressValue: 0,   //地址下標(biāo)
    addressRange: ["北京市","江西省", "湖南省", "上海市","湖北省","浙江省", "福建省", "重慶市"],
  },
</picker>

但是這塊地方,表單驗(yàn)證及添加地址信息提交到地址列表中,有讓我一陣子頭疼。

首先就是表單驗(yàn)證,當(dāng)你提交表單時(shí)觸發(fā) formSubmit 事件,對(duì)表單進(jìn)行驗(yàn)證。如果未輸入內(nèi)容或者輸入內(nèi)容格式有誤,通過(guò) wx.showModal() 給用戶提示。代碼如下:

formSubmit: function(e){
    var warn = "";
    var that = this;
    var flag = false;
    if(!e.detail.value.name){       //判斷輸入內(nèi)容
      warn = "請(qǐng)?zhí)顚?xiě)收件人!";
    } else if(!e.detail.value.tel){
      warn = "請(qǐng)?zhí)顚?xiě)手機(jī)號(hào)碼!";
    } else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel))){
      warn = "手機(jī)號(hào)碼格式不正確!";
    } else if(!e.detail.value.adress){
      warn = "請(qǐng)選擇地區(qū)!";
    } else if(!e.detail.value.doorAdress){
      warn = "請(qǐng)?zhí)顚?xiě)詳細(xì)地址!";
    } else if(!e.detail.value.IDcard){
      warn = "請(qǐng)?zhí)顚?xiě)身份證號(hào)碼";
    } else if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(e.detail.value.IDcard)){
      warn = "身份證號(hào)碼格式不正確"
    } else{
      flag=true;
        // 存儲(chǔ)到全局變量adressInfo
        app.globalData.adressInfo.push(e.detail.value);
        wx.navigateTo({
          url: '/pages/my/adress/adress'
        })
    }
    if(flag==false){     
        wx.showModal({
        title: '提示',
        content:warn
      })
    } 
  },

添加地址信息提交到地址列表中,這部分要怎么解決呢?我一開(kāi)始的思路是,將添加的地址信息存在本地,然后在地址列表那獲取添加的地址信息。這樣就不得不提下wx.setStorage( )和wx.getStorage( )這兩個(gè)方法了。

wx.setStorage() :將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的 key 中,會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容,這是一個(gè)異步接口。

wx.getStorage() :從本地緩存中異步獲取指定 key 對(duì)應(yīng)的內(nèi)容。

wx:getStorage是從本地緩存中異步獲取指定 key 對(duì)應(yīng)的內(nèi)容。Key指定了,所以再添加的地址就會(huì)覆蓋原來(lái)的key對(duì)應(yīng)的內(nèi)容,從而得不到保存地址的效果,只有一條數(shù)據(jù)。

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

于是呢,就去請(qǐng)教了幾位大佬,看有什么方法可以解決這個(gè)問(wèn)題。經(jīng)過(guò)討論,得出了解決辦法:將添加的地址信息push到全局上去,然后再?gòu)娜掷锩娅@取,這樣就不會(huì)將之前的數(shù)據(jù)覆蓋。而且這樣處理,代碼量大大的減少了。 代碼如下:

// 定義globalData對(duì)應(yīng)的全局變量   app.js
globalData: {
    userInfo: null,
    adressInfo:[]
}
// 提交地址信息,調(diào)用定義的變量  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);
},
//獲取地址信息,調(diào)用定義的變量   adress.js
var that=this;     
that.setData({
  adressInfo:app.globalData.adressInfo
})

注意:需要在調(diào)用全局變量的文件里,開(kāi)始的時(shí)候初始化 app 這個(gè)對(duì)象

const app = getApp();

5、Easy-Mock數(shù)據(jù)接口的引入問(wèn)題

使用Easy-Mock偽造數(shù)據(jù)時(shí),一定要書(shū)寫(xiě)規(guī)范,我在這里踩的"坑"就是:數(shù)據(jù)屬性名,不能包含“-”(比如:note-image)。這樣雖然數(shù)據(jù)接口能夠創(chuàng)建,但是引入的時(shí)候就會(huì)報(bào)錯(cuò),引入的數(shù)據(jù)為空。數(shù)據(jù)屬性名可以用“_”(比如:note_image)。

總結(jié)

以上便是我覺(jué)得比較容易掉坑,比較難的地方。還有很多沒(méi)有完成的功能,后續(xù)我會(huì)慢慢完善。對(duì)于小程序這方面,完全還是新手,給跟我一樣的新手的一個(gè)建議,除了看微信小程序開(kāi)發(fā)文檔之外,也可以多看一看開(kāi)源的小程序項(xiàng)目源碼,遇到問(wèn)題,可以看看別人是怎么解決的。各個(gè)社區(qū)也是很好的平臺(tái),可以將問(wèn)題發(fā)布出來(lái),大家一起解決。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24565.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢