最近(jin)一段時間(jian)在學習怎么寫小(xiao)程序(xu)，然后(hou)自(zi)己利用課外時間(jian)，也擼了(le)一個。一直都很喜歡(huan)網(wang)(wang)易蝸牛讀書這款(kuan)App，對(dui)于(yu)喜愛的(de)事物總是(shi)情不自(zi)禁的(de)，于(yu)是(shi)就仿照網(wang)(wang)易蝸牛讀書的(de)App簡單做了(le)這款(kuan)小(xiao)程序(xu)。

項目準備：

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

? 藍(lan)體點擊就(jiu)能跳轉到相應頁面(mian)進(jin)行下載或者(zhe)查(cha)看教程

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

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

3、Iconfont-阿里巴巴矢(shi)量(liang)圖(tu)標(biao)(biao)(biao)庫(ku) 一個阿里爸(ba)(ba)爸(ba)(ba)做的開源(yuan)(yuan)圖(tu)庫(ku)，它不僅有幾百個公(gong)司的開源(yuan)(yuan)圖(tu)標(biao)(biao)(biao)庫(ku)，還(huan)有各式各樣的小圖(tu)標(biao)(biao)(biao)。有了(le)這個圖(tu)標(biao)(biao)(biao)庫(ku)真是大(da)大(da)提高了(le)我(wo)們的效率，我(wo)們能夠根據(ju)需要進行圖(tu)標(biao)(biao)(biao)搜索，還(huan)能夠設置顏色、大(da)小和圖(tu)片(pian)格式。你想要的基本都有哦~

4、EasyMock 簡單高效的(de)偽造(zao)數(shu)據(ju) 用于后臺(tai)的(de)數(shu)據(ju)模擬(ni)，得到JSON數(shu)據(ju)，方便(bian)開(kai)發。

5、微信(xin)小程序(xu)開(kai)發文檔 W3C的這個文檔真是超級詳(xiang)細(xi)，我們能(neng)夠在這里查(cha)找到(dao)微信(xin)小程序(xu)的API、組件(jian)以及一些(xie)框架等(deng)。

另外還(huan)使用(yong)了(le)一款MarkMan進(jin)行測量(liang)，但若(ruo)是(shi)追求精準還(huan)原的話(hua)，還(huan)是(shi)用(yong)PS更細(xi)膩(ni)。

項目開發過程：

每(mei)一(yi)(yi)(yi)(yi)次的(de)(de)開發都是一(yi)(yi)(yi)(yi)個成長(chang)的(de)(de)過(guo)程(cheng)。在(zai)開發過(guo)程(cheng)中，我(wo)(wo)(wo)們會遇到(dao)(dao)各種問(wen)題(ti)，這就(jiu)給了(le)我(wo)(wo)(wo)們一(yi)(yi)(yi)(yi)個獨立思考的(de)(de)空間，能夠(gou)(gou)鍛煉我(wo)(wo)(wo)們解決(jue)問(wen)題(ti)和查詢文檔的(de)(de)能力(li)。當然，在(zai)思考查詢之(zhi)后(hou)還可以請教他人、進行探(tan)討，這樣往往能夠(gou)(gou)幫助我(wo)(wo)(wo)們快速的(de)(de)找到(dao)(dao)盲點(dian)，甚至(zhi)能夠(gou)(gou)了(le)解到(dao)(dao)更(geng)多(duo)我(wo)(wo)(wo)們忽視的(de)(de)點(dian)。和別人的(de)(de)交流也是學(xue)習(xi)中很重要的(de)(de)一(yi)(yi)(yi)(yi)環，所以在(zai)此(ci)分享了(le)自(zi)己小(xiao)小(xiao)的(de)(de)一(yi)(yi)(yi)(yi)點(dian)經驗(yan)，歡迎一(yi)(yi)(yi)(yi)起(qi)交流，一(yi)(yi)(yi)(yi)起(qi)學(xue)習(xi)。

1、開始項目

在項目開始時，我們(men)首先(xian)在 app.json 文件中配(pei)置主體界(jie)面(mian)，設置好tabBar 。在這里(li)我們(men)對小(xiao)程序(xu)設置確(que)定了一個整體的基調。

"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "網易蝸牛讀書",
"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":"領讀"
  },
  {
    "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":"我的"
  }
]
 }

對于(yu) pages 頁(ye)(ye)(ye)面(mian)(mian)(mian)，在開發過(guo)程中進(jin)行過(guo)很多(duo)次調(diao)整(zheng)。到現在為止覺(jue)(jue)得(de)還(huan)(huan)算整(zheng)潔(jie)和便于(yu)管(guan)(guan)理了(le)。在起(qi)初，不管(guan)(guan)是一級頁(ye)(ye)(ye)面(mian)(mian)(mian)還(huan)(huan)是二級頁(ye)(ye)(ye)面(mian)(mian)(mian)，我都把(ba)它們放(fang)在了(le) pages 目(mu)錄下。這樣(yang)一開始還(huan)(huan)不覺(jue)(jue)得(de)有什(shen)么，可是到后(hou)來頁(ye)(ye)(ye)面(mian)(mian)(mian)越來越多(duo)，要對之前寫過(guo)的頁(ye)(ye)(ye)面(mian)(mian)(mian)進(jin)行修改和調(diao)整(zheng)的時候，恍然間發現一堆文件(jian)夾(jia)，查(cha)找起(qi)來就覺(jue)(jue)得(de)眼花繚亂，還(huan)(huan)要和頁(ye)(ye)(ye)面(mian)(mian)(mian)進(jin)行配對，非常(chang)惱(nao)火。于(yu)是按照頁(ye)(ye)(ye)面(mian)(mian)(mian)不同的級別(bie)(bie)層次，進(jin)行了(le)相應的調(diao)整(zheng)。按照不同的tabBar確定了(le)主體的文件(jian)夾(jia)，然后(hou)各級頁(ye)(ye)(ye)面(mian)(mian)(mian)又分(fen)別(bie)(bie)在各自所屬層級的目(mu)錄下。另(ling)外對于(yu)頁(ye)(ye)(ye)面(mian)(mian)(mian)的命(ming)名盡(jin)量通俗(su)易懂(dong)，這樣(yang)方便自己對各頁(ye)(ye)(ye)面(mian)(mian)(mian)進(jin)行查(cha)看和管(guan)(guan)理。

"pages":[
"pages/index/index", 
"pages/leader/leader",  // 領讀人  
"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" 
  ],

在分類頁(ye)面下具有多層級(ji)的一個頁(ye)面創(chuang)建(jian)展示：

所(suo)以在項目開始時(shi)首先思考的(de)就(jiu)是文件的(de)排版問題，一(yi)個合理(li)的(de)結構，能夠增強(qiang)項目的(de)可(ke)讀性，以后操(cao)作和(he)維護也更加(jia)方(fang)便，能夠節(jie)約一(yi)定(ding)的(de)時(shi)間。

小技巧： 在創建pages頁(ye)面時，如(ru)果(guo)我們(men)在微(wei)信開發者程(cheng)序的app.json文(wen)件(jian)中(zhong)創建，就會(hui)自動的生成相應的文(wen)件(jian)夾，就不用(yong)我們(men)一個(ge)一個(ge)去創建了。

2、頁面布局和樣式

小程(cheng)序(xu)屬于輕(qing)量級(ji)的(de)(de)(de)應(ying)用，所以(yi)在忠于原(yuan)(yuan)App的(de)(de)(de)基礎上，對某些頁(ye)面(mian)進行了(le)一些調整。另(ling)(ling)外，在這(zhe)里所有(you)的(de)(de)(de)頁(ye)面(mian)都(dou)是我切的(de)(de)(de)，可(ke)能會有(you)人說很多(duo)頁(ye)面(mian)都(dou)可(ke)以(yi)引用第三方(fang)框架，沒(mei)有(you)必要(yao)寫(xie)(xie)原(yuan)(yuan)生(sheng)代碼。其實都(dou)沒(mei)有(you)錯，要(yao)看自己(ji)(ji)寫(xie)(xie)小程(cheng)序(xu)是為(wei)(wei)了(le)什么。我做這(zhe)款小程(cheng)序(xu)是為(wei)(wei)了(le)學習小程(cheng)序(xu)的(de)(de)(de)開(kai)發，另(ling)(ling)外自己(ji)(ji)的(de)(de)(de)前(qian)端(duan)之(zhi)旅還是剛剛開(kai)啟(qi)，所以(yi)為(wei)(wei)了(le)在 coding 中鍛煉自己(ji)(ji)對各種(zhong)結(jie)構的(de)(de)(de)敏感性，加深自己(ji)(ji)對樣(yang)式屬性的(de)(de)(de)理解，我選擇了(le)自己(ji)(ji)寫(xie)(xie)原(yuan)(yuan)生(sheng)代碼。

其實(shi)第三方(fang)框架是非常好的(de)(de)(de)輪子，像微信團隊開發的(de)(de)(de) weui 框架就很好用(yong)(yong)，它提供(gong)了很多的(de)(de)(de)組件，能夠(gou)讓你擺脫切頁(ye)面的(de)(de)(de)繁瑣，減少開發時間。對于 weui 的(de)(de)(de)使(shi)(shi)用(yong)(yong)我也不是很熟練，所以在(zai)后續的(de)(de)(de)學習中(zhong)，還會繼續修改這個小程序，用(yong)(yong)不同(tong)的(de)(de)(de)方(fang)法實(shi)現頁(ye)面。 另外，在(zai)命(ming)(ming)(ming)名(ming)(ming)時，我使(shi)(shi)用(yong)(yong)了BEM規范，這樣(yang)便(bian)于對頁(ye)面結(jie)構的(de)(de)(de)理解，使(shi)(shi)代碼更易讀。BEM命(ming)(ming)(ming)名(ming)(ming)法則給我們提供(gong)了一(yi)個很好的(de)(de)(de)模板，在(zai)命(ming)(ming)(ming)名(ming)(ming)中(zhong)就能體現各個元(yuan)素(su)之間的(de)(de)(de)關系(xi)，CSS的(de)(de)(de)命(ming)(ming)(ming)名(ming)(ming)更加語(yu)義化，元(yuan)素(su)更易讀懂。而且獨一(yi)無二的(de)(de)(de)命(ming)(ming)(ming)名(ming)(ming)方(fang)式，使(shi)(shi)得代碼能夠(gou)得到(dao)更好的(de)(de)(de)復(fu)用(yong)(yong)。

stack.wxml

3、使用 easy-mock 造數據

寫(xie)完基本樣式之(zhi)后，要思考(kao)的就是(shi)數(shu)(shu)據(ju)(ju)問(wen)題(ti)。我(wo)們(men)開發的頁(ye)(ye)(ye)面(mian)(mian)很少有(you)靜態的。我(wo)們(men)把數(shu)(shu)據(ju)(ju)寫(xie)在頁(ye)(ye)(ye)面(mian)(mian)中沒有(you)任(ren)何意義(yi)還(huan)平白(bai)增加了(le)工作量。此時我(wo)們(men)就需要模擬后臺數(shu)(shu)據(ju)(ju)，讓這些數(shu)(shu)據(ju)(ju)能夠通(tong)過(guo)請求渲染到頁(ye)(ye)(ye)面(mian)(mian)上。easy-mock 就給我(wo)們(men)提供了(le)一個很好的平臺來造假數(shu)(shu)據(ju)(ju)，然后生成URL 通(tong)過(guo) wx.request() 方法來獲取數(shu)(shu)據(ju)(ju)，實現頁(ye)(ye)(ye)面(mian)(mian)加載數(shu)(shu)據(ju)(ju)。

另外(wai)還可以在本地寫假數據。今天在閱(yue)讀別人(ren)文章時(shi)有看到用(yong)require()方(fang)式來請求數據的。對于這個不是(shi)很懂，通過查詢之(zhi)后才(cai)發現這是(shi)CommonJS 中的模(mo)塊實現。實現一項功能的方(fang)法(fa)有很多(duo)種(zhong)(zhong)，我覺得我們(men)不能只(zhi)滿足(zu)于一種(zhong)(zhong)方(fang)法(fa)，而應該廣泛的涉獵，通過對不同方(fang)法(fa)的學習，讓自己的知識儲(chu)備更龐大(da)。

項目基本功能：

1、小程序啟動頁面的實現

在這里我使用(yong)了setInterval（）和clearInterval（）方法來實(shi)現，然后(hou)通過switchTab來實(shi)現跳轉

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、跳轉頁面時獲取id, 獲取不同數據

一開始自(zi)己對數(shu)據(ju)獲(huo)取還不(bu)是很熟練，只能進行簡單的(de)(de)單頁(ye)(ye)面渲染。后(hou)來通過查文(wen)檔和摸索，逐漸的(de)(de)能夠(gou)進行復雜一些(xie)的(de)(de)數(shu)據(ju)獲(huo)取。另外，在setData時(shi)，如果不(bu)清楚(chu)結構，可以使用(yong)console.log(); 方法及時(shi)的(de)(de)查看數(shu)據(ju)結構，一層層的(de)(de)剝(bo)開找到我(wo)們需要的(de)(de)數(shu)據(ju)層。 為(wei)了更便于理解，附上兩張動圖展示，可以發現當我(wo)點擊不(bu)同文(wen)章之后(hou)，跳轉(zhuan)的(de)(de)頁(ye)(ye)面獲(huo)取的(de)(de)數(shu)據(ju)也(ye)不(bu)一樣。

領讀

分類

在(zai)這里(li)分(fen)類頁面的(de)(de)(de)數據(ju)更整齊(qi)一(yi)些，就以(yi)它為(wei)例來(lai)說一(yi)說我(wo)是如何通過(guo)id來(lai)動(dong)(dong)態選(xuan)擇(ze)數據(ju)的(de)(de)(de)。首先(xian)要(yao)清楚的(de)(de)(de)是stack分(fen)類頁面和跳(tiao)轉到的(de)(de)(de)booklist詳情頁。在(zai)這里(li)是通過(guo)navigator來(lai)跳(tiao)轉的(de)(de)(de)，我(wo)們在(zai)url中(zhong)設置表達式來(lai)動(dong)(dong)態獲取id，url="booklist/booklist?id={{index}}"，然(ran)后在(zai) booklist.js 中(zhong)，通過(guo)獲取到的(de)(de)(de)id，進行數據(ju)的(de)(de)(de)選(xuan)擇(ze)。

stack:

stack.wxml

stack.js

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

3、對navigationBarTitleText的動態修改

在各個頁面(mian)的(de)JSON文件(jian)中，我(wo)們(men)能夠(gou)設(she)置頁面(mian)的(de)標(biao)題，但是(shi)當我(wo)們(men)進(jin)入不同頁面(mian)需要獲(huo)取不同標(biao)題時，就需要動(dong)態的(de)進(jin)行修(xiu)改(gai)(gai)。其實(shi)實(shi)現(xian)起(qi)來很簡單，我(wo)們(men)知道通過wx.setNavigationBarTitle() 方法就能夠(gou)修(xiu)改(gai)(gai)頁面(mian)標(biao)題，然(ran)后跟第二點所述的(de)方式一(yi)樣，通過id來達到動(dong)態獲(huo)取的(de)效果。

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

     .json
	  {
	      "navigationBarBackgroundColor": "#fff",
	      "navigationBarTitleText": " ",
	      "navigationBarTextStyle": "black"
	  }
       .js
	onLoad: function (params) {
	  var that = this;
	    wx.request({
	      url:"//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、兩種頁面跳轉方式

（1）使用 navigator 方式

navigator的跳(tiao)轉能夠保留當前(qian)頁(ye)面，可返回(hui)

    
      //  點擊部位，觸發即可跳轉
      

      
		  
		      
		  
		  我的消息
		  
		  >
      

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

需要注意(yi)的是(shi)：程序中要求頁面(mian)的層(ceng)級最多(duo)只能有五層(ceng)，因為這(zhe)種方式保留當前(qian)頁面(mian)，也就是(shi)說以這(zhe)種方式跳轉頁面(mian)，最多(duo)只能打開(kai)5個(ge)頁面(mian)。

（2）使用 switchTab 方法

該方法能(neng)夠(gou)跳轉到 tabBar 頁面(mian)，并(bing)關閉其他所(suo)有(you)非 tabBar 頁面(mian)。

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

5、swiper實現輪播

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

這里的相關(guan)屬性就直(zhi)接使用(yong)了網上的圖片：

        
            
                
                   
                
                
                    
                    南風知我意
                    
                        1186人在讀
                        
                    
                
            
        
 

其中，swiper-item 可以(yi)通過(guo) wx:for 來循環。

總結：

這一(yi)次的(de)(de)小程序開發，讓我(wo)學到了(le)很多東西。我(wo)們(men)是(shi)(shi)為(wei)了(le)學習(xi)而開發項目。因此在(zai)coding的(de)(de)時候要(yao)沉住氣(qi)，不(bu)要(yao)急躁，遇(yu)到問題(ti)就及(ji)時的(de)(de)去查(cha)文檔(dang)或者(zhe)請教別人，然(ran)后多想一(yi)想實現(xian)的(de)(de)方法，是(shi)(shi)不(bu)是(shi)(shi)還能夠通過(guo)其(qi)他辦(ban)法來實現(xian)。這樣在(zai)不(bu)斷的(de)(de)思考和解決問題(ti)中，在(zai)不(bu)斷的(de)(de)踩坑中才能讓自己快(kuai)速的(de)(de)成長(chang)起來。

另(ling)外，其實(shi)還有(you)很多功能(neng)和細(xi)節沒有(you)處理好，這一次的分享并不(bu)(bu)代表著結束，通過(guo)不(bu)(bu)斷的學(xue)習，還將不(bu)(bu)斷的對項(xiang)目功能(neng)進行(xing)完(wan)善和處理各種細(xi)節。