摘要：話不多說，先來一張我科的圖坐鎮資訊小程序出來啦作為一個剛接觸小程序不久的前端小白菜，恰逢最近如火如荼的雙搶七大戰騎士與勇士又又又又又一次的巔峰對決實話真的看膩了決定寫一個資訊的小程序來玩玩。

話不多說，先來一張我科的圖坐鎮

作為一個剛接觸小程序不久的前端小白菜，恰逢最近NBA如火如荼的雙搶七大戰、騎士與勇士又又又又又一次的巔峰對決(實話：真的看膩了- -),決定寫一個NBA資訊的小程序來玩玩。下面講講小程序的開發

開發工具：vscode 微信開發者工具

開發技術：(Wxml)Html (Wxss)css javascript

開發流程：注冊一個appid就可以馬上進行開發了簡易教程

這里還要提一下兩個網站Easy Mock、Iconfont
前者是可以快速生成模擬數據的持久化服務這里展示下我的數據接口
后者是可以找到許多你想要的小圖標庫

下面就來講講我碰到的那些問題吧~

1.首頁日期比賽數據切換(就是那個能點能橫滑的部分)
當時看到這覺得無非就是左右button點擊事件進行切換數據 然后再跟滑動date綁定一起
想到就開始寫 左右點擊一下就寫完了

changeleft:function() {
    const index = this.data.index - this.data.num;//獲取改變后的那組數據下標
    this.setData({
      agenda: this.data.result[index],// 將球隊名 球隊分數傳入
      light: this.data.result[index].leftgrade > 
      this.data.result[index].rightgrade ? "1" : "2", //比較分數大小 將分數高的color改變
      index: index,
      current:index,
      showLeft: true,//改變圖標為淺色圖標
    })
  }

注意一個細節，當左右沒有更多數據切換時 圖標顏色會改變 變淺色 示意不能點了
所以要進行if判斷左右兩邊是否為臨界值 也就是數組的第一項和最后一項。

 turnleft: function (e) {
    const index = this.data.index -this.data.num;
      if (index <= -1) {
        return;
      } else if (index == 0) {
        this.changeleft();
      } else {
        this.changeleft();
        this.setData({
          showLeft: false,
          showRight: false,
        })
      }
  },

這里展示左邊的方法 右邊類似。于是開始著手寫滑動那部分，這里就吃了沒有經驗的大虧了，想到滑動立馬想到了scroll-view 噼里啪啦寫了一堆，可一點擊我傻了 這日期是瞬間變化 沒有滑動的那個效果啊，難道是這個不行？ 于是我又使用scroll-left 算距離 每一項設置好padding 寫了許久也算是完成了 一試還是沒有滑動效果...(一口老血吐出來)

最后還是用swiper搞定了這效果

 swiperchange:function(e) {
    const current = e.detail.current;//取當前swiper index
    const ind = this.data.index;//之前數組的index 
    const dex = current - ind;//判斷左滑右滑
      if(current-ind >0){
        this.setData({
          num:dex //滑動多少項
        })
      this.turnright() //左滑事件
      this.setData({
        num:1   //必須回1 因為點擊事件每次改變的數組項為1
      })
    }else if(current - ind <0){
      this.setData({
        num:-dex 
      })
     this.turnleft()
     this.setData({
       num:1
     })
    }

2.文章頁返回

這里可以設置navigator 或者直接bindtap 但是要注意返回為tabBar的話 open-type 和跳轉方法為switchTab

back: function (e) {
    wx.switchTab({
      url: "../../pages/index/index"
    });
  }

3.scroll-view滑動問題
很多人可能會碰到swiper不能滑動等問題要注意以下幾點

scroll-view 中的需要滑動的元素不可以用 float 浮動；

scroll-view 中的包裹需要滑動的元素的大盒子用 display:flex; 是沒有作用的；

scroll-view 中的需要滑動的元素要用 dislay:inline-block; 進行元素的橫向編排；

包裹 scroll-view 的大盒子有明確的寬和加上樣式--> overflow:hidden; white-space:nowrap;

4.上拉加載下拉刷新問題

下拉刷新需要在當前頁的json或者app.json設置

"enablePullDownRefresh": true,

下拉事件一定要加wx.hideLoading() 不然刷新小點一直出現

onPullDownRefresh() {
   // console.log("下拉了");
   wx.showLoading({
     title: "玩命加載中",
   })
   wx.request({
     url: API_BASE,
     success: (res) => {
       this.setData({
         news: res.data.data.new,
         currentPage: 1,
         hide:false
       })
       wx.hideLoading();//!!!一定要加
       wx.stopPullDownRefresh()
     }
   })
 },

上拉加載可以使用 onPullDownRefresh() 或者bindscrolltolower() 前者是頁面觸底 后者是scroll滾動條到底部，二者視情況使用。

 onReachBottom() {
   let { currentPage, totalPages } = this.data  //解構當前頁和共幾頁 es6語法
   if (currentPage >= totalPages) {
     this.setData({
       hide:true,
     })
     return;
   }
   wx.showLoading({
     title: "玩命加載中",
   })
   currentPage += 1; //頁數+1
   wx.request({
     url: API_BASE,
     success: (res) => {
       const news = [ //將請求的數據和原本的數據一起放入
         ...this.data.news,//擴展運算符（ spread ）是三個點（...）。它好比 rest 參數的逆運算，將一個數組轉為用逗號分隔的參數序列 es6語法
         ...res.data.data.new,
       ];
       this.setData({
         news,
         currentPage
       })
       wx.hideLoading();
     }
   })
 },

5.wx:if選擇渲染問題
在我的項目中 有很多需要多帶帶添加樣式 或者事件操作 可以使用wx:if 配合block進行選擇渲染

                
                {{item.title}} 
            
            
                    
                    {{item.title}} 
                

6.navigator跳轉問題

   var that = this;
   var id = that.data.new.id;//獲取文章id
   if (id === "n8") {//判斷是否為最后一篇
     wx.showModal({
       title: "提示",
       content: "沒有更多內容了",
       showCancel: false,
       success: function (res) {
       } })
       return; //為最后一篇則無需請求數據
   }
   wx.request({
     url: API_BASE,
     success: (res) => {
       for (let i = 0; i < res.data.data.new.length; i++) {
         if (id === res.data.data.new[i].contentId) { //判斷是否請求到對應數據
          // console.log("找到了");
           this.setData({
             news: res.data.data.new[i + 1],//將請求到數據的數據傳入
           })
           var it = this;
           wx.navigateTo({
             url: "news?id=" + this.data.news.contentId + "&title=" + this.data.news.title + "&from=" + this.data.news.from + "&image=" + this.data.news.image + "&content=" + this.data.news.content + ""
           })
         }
       }
     }
   })
 },

在寫項目中還有碰到許多問題,video黑邊 scroll-view文字換行等問題，大家百度或者查看官方文檔大都能解決。
由于是初學小程序不久，很多方面沒有考慮好 沒有對request等進行封裝，模塊組件化，寫了很多重復的代碼。不過這都不是事，誰不是先爬再跑的!
想了解更多可以查看我的項目
歡迎大家提供寶貴的建議和意見，社區重在分享，有啥好東西就別藏著啦