最近一段時間在學習怎么寫小程序，然后自己利用課外時間，也擼了一個。一直都很喜歡網(wǎng)易蝸牛讀書這款App，對于喜愛的事物總是情不自禁的，于是就仿照網(wǎng)易蝸牛讀書的App簡單做了這款小程序。

項目預覽：

項目準備：

大家若是感興趣，可以跟著我一起來做喲^_^

? 藍體點擊就能跳轉(zhuǎn)到相應(yīng)頁面進行下載或者查看教程

1、微信開發(fā)者工具 他能幫助我們快速的進行小程序的開發(fā)。當然，在開發(fā)之前我們還需要擁有一個小程序賬號（注冊教程），通過賬號我們就能夠管理自己的小程序了。需要注意的是，只有滿了18歲的童鞋們才可以注冊。

2、vs code （密碼：g2g5） 64位系統(tǒng)的，其他版本就自己去搜一下安裝包啦。雖然在微信開發(fā)者工具里面就能夠直接寫，但還是喜歡在vs code里面進行coding。這個按大家喜好自由選擇哦。

3、Iconfont-阿里巴巴矢量圖標庫 一個阿里爸爸做的開源圖庫，它不僅有幾百個公司的開源圖標庫，還有各式各樣的小圖標。有了這個圖標庫真是大大提高了我們的效率，我們能夠根據(jù)需要進行圖標搜索，還能夠設(shè)置顏色、大小和圖片格式。你想要的基本都有哦~

4、EasyMock 簡單高效的偽造數(shù)據(jù) 用于后臺的數(shù)據(jù)模擬，得到JSON數(shù)據(jù)，方便開發(fā)。

5、微信小程序開發(fā)文檔 W3C的這個文檔真是超級詳細，我們能夠在這里查找到微信小程序的API、組件以及一些框架等。

另外還使用了一款MarkMan進行測量，但若是追求精準還原的話，還是用PS更細膩。

項目開發(fā)過程：

每一次的開發(fā)都是一個成長的過程。在開發(fā)過程中，我們會遇到各種問題，這就給了我們一個獨立思考的空間，能夠鍛煉我們解決問題和查詢文檔的能力。當然，在思考查詢之后還可以請教他人、進行探討，這樣往往能夠幫助我們快速的找到盲點，甚至能夠了解到更多我們忽視的點。和別人的交流也是學習中很重要的一環(huán)，所以在此分享了自己小小的一點經(jīng)驗，歡迎一起交流，一起學習。

1、開始項目

在項目開始時，我們首先在 app.json 文件中配置主體界面，設(shè)置好tabBar 。在這里我們對小程序設(shè)置確定了一個整體的基調(diào)。

"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "網(wǎng)易蝸牛讀書",
"navigationBarTextStyle":"black"
  },
  "tabBar":{
"color":"#999999",
"selectedColor":"#444444",
"backgroungColor":"#ffffff",
"borderStyle":"#e0e0e0",
"list": [
  {
    "pagePath":"pages/leader/leader",
    "iconPath": "assets/icons/lingdu.png",
    "selectedIconPath": "assets/icons/lingdu_sel.png",
    "text":"領(lǐng)讀"
  },
  {
    "pagePath":"pages/stack/stack",
    "iconPath": "assets/icons/stack.png",
    "selectedIconPath": "assets/icons/stack_sel.png",
    "text":"分類"
  },
  {
    "pagePath": "pages/bookdesk/bookdesk",
    "iconPath": "assets/icons/bookdesk.png",
    "selectedIconPath": "assets/icons/bookdesk_sel.png",
    "text":"書桌"
  },
  {
    "pagePath":"pages/mine/mine",
    "iconPath": "assets/icons/mine.png",
    "selectedIconPath": "assets/icons/mine_sel.png",
    "text":"我的"
  }
]
 }

對于 pages 頁面，在開發(fā)過程中進行過很多次調(diào)整。到現(xiàn)在為止覺得還算整潔和便于管理了。在起初，不管是一級頁面還是二級頁面，我都把它們放在了 pages 目錄下。這樣一開始還不覺得有什么，可是到后來頁面越來越多，要對之前寫過的頁面進行修改和調(diào)整的時候，恍然間發(fā)現(xiàn)一堆文件夾，查找起來就覺得眼花繚亂，還要和頁面進行配對，非常惱火。于是按照頁面不同的級別層次，進行了相應(yīng)的調(diào)整。按照不同的tabBar確定了主體的文件夾，然后各級頁面又分別在各自所屬層級的目錄下。另外對于頁面的命名盡量通俗易懂，這樣方便自己對各頁面進行查看和管理。

"pages":[
"pages/index/index", 
"pages/leader/leader",  // 領(lǐng)讀人  
"pages/leader/stories/stories", 
"pages/leader/authors/authors", 
"pages/stack/stack",  // 分類
"pages/stack/booklist/booklist", 
"pages/stack/booklist/bookdetail/bookdetail",
"pages/bookdesk/bookdesk",   // 書桌
"pages/mine/mine",   // 我的
"pages/mine/news/news",    
"pages/logs/logs" 
  ],

在分類頁面下具有多層級的一個頁面創(chuàng)建展示：

所以在項目開始時首先思考的就是文件的排版問題，一個合理的結(jié)構(gòu)，能夠增強項目的可讀性，以后操作和維護也更加方便，能夠節(jié)約一定的時間。

小技巧： 在創(chuàng)建pages頁面時，如果我們在微信開發(fā)者程序的app.json文件中創(chuàng)建，就會自動的生成相應(yīng)的文件夾，就不用我們一個一個去創(chuàng)建了。

2、頁面布局和樣式

小程序?qū)儆谳p量級的應(yīng)用，所以在忠于原App的基礎(chǔ)上，對某些頁面進行了一些調(diào)整。另外，在這里所有的頁面都是我切的，可能會有人說很多頁面都可以引用第三方框架，沒有必要寫原生代碼。其實都沒有錯，要看自己寫小程序是為了什么。我做這款小程序是為了學習小程序的開發(fā)，另外自己的前端之旅還是剛剛開啟，所以為了在 coding 中鍛煉自己對各種結(jié)構(gòu)的敏感性，加深自己對樣式屬性的理解，我選擇了自己寫原生代碼。

其實第三方框架是非常好的輪子，像微信團隊開發(fā)的 weui 框架就很好用，它提供了很多的組件，能夠讓你擺脫切頁面的繁瑣，減少開發(fā)時間。對于 weui 的使用我也不是很熟練，所以在后續(xù)的學習中，還會繼續(xù)修改這個小程序，用不同的方法實現(xiàn)頁面。 另外，在命名時，我使用了BEM規(guī)范，這樣便于對頁面結(jié)構(gòu)的理解，使代碼更易讀。BEM命名法則給我們提供了一個很好的模板，在命名中就能體現(xiàn)各個元素之間的關(guān)系，CSS的命名更加語義化，元素更易讀懂。而且獨一無二的命名方式，使得代碼能夠得到更好的復用。

stack.wxml

3、使用 easy-mock 造數(shù)據(jù)

寫完基本樣式之后，要思考的就是數(shù)據(jù)問題。我們開發(fā)的頁面很少有靜態(tài)的。我們把數(shù)據(jù)寫在頁面中沒有任何意義還平白增加了工作量。此時我們就需要模擬后臺數(shù)據(jù)，讓這些數(shù)據(jù)能夠通過請求渲染到頁面上。easy-mock 就給我們提供了一個很好的平臺來造假數(shù)據(jù)，然后生成URL 通過 wx.request() 方法來獲取數(shù)據(jù)，實現(xiàn)頁面加載數(shù)據(jù)。

另外還可以在本地寫假數(shù)據(jù)。今天在閱讀別人文章時有看到用require()方式來請求數(shù)據(jù)的。對于這個不是很懂，通過查詢之后才發(fā)現(xiàn)這是CommonJS 中的模塊實現(xiàn)。實現(xiàn)一項功能的方法有很多種，我覺得我們不能只滿足于一種方法，而應(yīng)該廣泛的涉獵，通過對不同方法的學習，讓自己的知識儲備更龐大。

項目基本功能：

1、小程序啟動頁面的實現(xiàn)

在這里我使用了setInterval（）和clearInterval（）方法來實現(xiàn)，然后通過switchTab來實現(xiàn)跳轉(zhuǎn)

Page({
  data: {
    time:3
  },
  onLoad: function () {
    var count = setInterval(()=>{   
      this.setData({
        time : this.data.time -1
      });
      if(this.data.time == 0) {  
        wx.switchTab({
          url:'../leader/leader',
          complete:function(res) {
          }
        })
        clearInterval(count);
      }
    },1000);
  }
})

2、跳轉(zhuǎn)頁面時獲取id, 獲取不同數(shù)據(jù)

一開始自己對數(shù)據(jù)獲取還不是很熟練，只能進行簡單的單頁面渲染。后來通過查文檔和摸索，逐漸的能夠進行復雜一些的數(shù)據(jù)獲取。另外，在setData時，如果不清楚結(jié)構(gòu)，可以使用console.log(); 方法及時的查看數(shù)據(jù)結(jié)構(gòu)，一層層的剝開找到我們需要的數(shù)據(jù)層。 為了更便于理解，附上兩張動圖展示，可以發(fā)現(xiàn)當我點擊不同文章之后，跳轉(zhuǎn)的頁面獲取的數(shù)據(jù)也不一樣。

領(lǐng)讀

分類

在這里分類頁面的數(shù)據(jù)更整齊一些，就以它為例來說一說我是如何通過id來動態(tài)選擇數(shù)據(jù)的。首先要清楚的是stack分類頁面和跳轉(zhuǎn)到的booklist詳情頁。在這里是通過navigator來跳轉(zhuǎn)的，我們在url中設(shè)置表達式來動態(tài)獲取id，url="booklist/booklist?id={{index}}"，然后在 booklist.js 中，通過獲取到的id，進行數(shù)據(jù)的選擇。

stack:

stack.wxml

stack.js

      Page({
	  data: {
	    stack:[],
	    id: ""
	  }, 
	  onLoad: function () {
	      var that = this;
		wx.request({
		  url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
		  success: function(res) {
		    console.log(res.data.data.stack);
		    console.log(res.data.data.List);              
		    that.setData({
		      stack: res.data.data.stack,
		      id: res.data.data.List
		    })
		  }
		})
	      },   
	})

booklist:

booklist.wxml  

	  
	      
		    
		      
			  
			      {{item.bookName}}
			  
			  
			      {{item.authorName}}
			  
			  
			      {{item.bookDes}}
			  
		      
		  
		              
	      
	  
      

booklist.js

        Page({
	  data: {
	      bookList:[],
	      stack:[]
	    },
	  onLoad: function (params) {
	    var that = this;
	      wx.request({
		url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
		success: function(res) {
		  that.setData({
		    bookList: res.data.data.stack[params.id].List.bookList,
		  })  
		}
	      })
	      },
	  })

3、對navigationBarTitleText的動態(tài)修改

在各個頁面的JSON文件中，我們能夠設(shè)置頁面的標題，但是當我們進入不同頁面需要獲取不同標題時，就需要動態(tài)的進行修改。其實實現(xiàn)起來很簡單，我們知道通過wx.setNavigationBarTitle() 方法就能夠修改頁面標題，然后跟第二點所述的方式一樣，通過id來達到動態(tài)獲取的效果。

另外要注意的是，我們要將JSON中的navigationBarTitleText設(shè)置為空，這樣在跳轉(zhuǎn)的過程中就不會有原始標題和修改標題之間跳轉(zhuǎn)的一個效果，而是直接顯示需要的標題。

     .json
	  {
	      "navigationBarBackgroundColor": "#fff",
	      "navigationBarTitleText": " ",
	      "navigationBarTextStyle": "black"
	  }
       .js
	onLoad: function (params) {
	  var that = this;
	    wx.request({
	      url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
	      success: function(res) {
		var bTypes = res.data.data.stack[params.id].bookTypes;
		wx.setNavigationBarTitle({ 
		  title: bTypes,
		},1);
	      }
	    })
	  },

4、兩種頁面跳轉(zhuǎn)方式

（1）使用 navigator 方式

navigator的跳轉(zhuǎn)能夠保留當前頁面，可返回

    
      //  點擊部位，觸發(fā)即可跳轉(zhuǎn)
      

      
		  
		      
		  
		  我的消息
		  
		  >
      

      tomyNews:function(e) {
	  wx.navigateTo({
	    url:'news/news'
	  })
	},

需要注意的是：程序中要求頁面的層級最多只能有五層，因為這種方式保留當前頁面，也就是說以這種方式跳轉(zhuǎn)頁面，最多只能打開5個頁面。

（2）使用 switchTab 方法

該方法能夠跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面。

    wx.switchTab({
              url:'../leader/leader',
              complete:function(res) {
              }
            })

5、swiper實現(xiàn)輪播

通過 swiper 和 swiper-item 實現(xiàn)了書桌頁面的輪播效果。

這里的相關(guān)屬性就直接使用了網(wǎng)上的圖片：

        
            
                
                   
                
                
                    
                    南風知我意
                    
                        1186人在讀
                        
                    
                
            
        
 

其中，swiper-item 可以通過 wx:for 來循環(huán)。

總結(jié)：

這一次的小程序開發(fā)，讓我學到了很多東西。我們是為了學習而開發(fā)項目。因此在coding的時候要沉住氣，不要急躁，遇到問題就及時的去查文檔或者請教別人，然后多想一想實現(xiàn)的方法，是不是還能夠通過其他辦法來實現(xiàn)。這樣在不斷的思考和解決問題中，在不斷的踩坑中才能讓自己快速的成長起來。

另外，其實還有很多功能和細節(jié)沒有處理好，這一次的分享并不代表著結(jié)束，通過不斷的學習，還將不斷的對項目功能進行完善和處理各種細節(jié)。