與你一起寫小程式

無騖發表於2019-03-03

最近一段時間在學習怎麼寫小程式,然後自己利用課外時間,也擼了一個。一直都很喜歡網易蝸牛讀書這款App,對於喜愛的事物總是情不自禁的,於是就仿照網易蝸牛讀書的App簡單做了這款小程式。

專案地址:杳杳飛花/Reading

專案預覽:

img

專案準備:

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

☟ 藍體點選就能跳轉到相應頁面進行下載或者檢視教程

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

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

3、Iconfont-阿里巴巴向量圖示庫 一個阿里爸爸做的開源相簿,它不僅有幾百個公司的開源圖示庫,還有各式各樣的小圖示。有了這個圖示庫真是大大提高了我們的效率,我們能夠根據需要進行圖示搜尋,還能夠設定顏色、大小和圖片格式。你想要的基本都有哦~

4、EasyMock 簡單高效的偽造資料 用於後臺的資料模擬,得到JSON資料,方便開發。

5、微信小程式開發文件 W3C的這個文件真是超級詳細,我們能夠在這裡查詢到微信小程式的API、元件以及一些框架等。

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

專案開發過程:

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

1、開始專案

在專案開始時,我們首先在 app.json 檔案中配置主體介面,設定好tabBar 。在這裡我們對小程式設定確定了一個整體的基調。

"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":"我的"
  }
]
 }
複製程式碼

對於 pages 頁面,在開發過程中進行過很多次調整。到現在為止覺得還算整潔和便於管理了。在起初,不管是一級頁面還是二級頁面,我都把它們放在了 pages 目錄下。這樣一開始還不覺得有什麼,可是到後來頁面越來越多,要對之前寫過的頁面進行修改和調整的時候,恍然間發現一堆資料夾,查詢起來就覺得眼花繚亂,還要和頁面進行配對,非常惱火。於是按照頁面不同的級別層次,進行了相應的調整。按照不同的tabBar確定了主體的資料夾,然後各級頁面又分別在各自所屬層級的目錄下。另外對於頁面的命名儘量通俗易懂,這樣方便自己對各頁面進行檢視和管理。

"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" 
  ],
複製程式碼
img

在分類頁面下具有多層級的一個頁面建立展示:

img

所以在專案開始時首先思考的就是檔案的排版問題,一個合理的結構,能夠增強專案的可讀性,以後操作和維護也更加方便,能夠節約一定的時間。

小技巧: 在建立pages頁面時,如果我們在微信開發者程式的app.json檔案中建立,就會自動的生成相應的資料夾,就不用我們一個一個去建立了。

2、頁面佈局和樣式

小程式屬於輕量級的應用,所以在忠於原App的基礎上,對某些頁面進行了一些調整。另外,在這裡所有的頁面都是我切的,可能會有人說很多頁面都可以引用第三方框架,沒有必要寫原生程式碼。其實都沒有錯,要看自己寫小程式是為了什麼。我做這款小程式是為了學習小程式的開發,另外自己的前端之旅還是剛剛開啟,所以為了在 coding 中鍛鍊自己對各種結構的敏感性,加深自己對樣式屬性的理解,我選擇了自己寫原生程式碼。

其實第三方框架是非常好的輪子,像微信團隊開發的 weui 框架就很好用,它提供了很多的元件,能夠讓你擺脫切頁面的繁瑣,減少開發時間。對於 weui 的使用我也不是很熟練,所以在後續的學習中,還會繼續修改這個小程式,用不同的方法實現頁面。
另外,在命名時,我使用了BEM規範,這樣便於對頁面結構的理解,使程式碼更易讀。BEM命名法則給我們提供了一個很好的模板,在命名中就能體現各個元素之間的關係,CSS的命名更加語義化,元素更易讀懂。而且獨一無二的命名方式,使得程式碼能夠得到更好的複用。

stack.wxml

img

3、使用 easy-mock 造資料

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

另外還可以在本地寫假資料。今天在閱讀別人文章時有看到用require()方式來請求資料的。對於這個不是很懂,通過查詢之後才發現這是CommonJS 中的模組實現。實現一項功能的方法有很多種,我覺得我們不能只滿足於一種方法,而應該廣泛的涉獵,通過對不同方法的學習,讓自己的知識儲備更龐大。

專案基本功能:

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

在這裡我使用了setInterval()和clearInterval()方法來實現,然後通過switchTab來實現跳轉

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, 獲取不同資料

一開始自己對資料獲取還不是很熟練,只能進行簡單的單頁面渲染。後來通過查文件和摸索,逐漸的能夠進行復雜一些的資料獲取。另外,在setData時,如果不清楚結構,可以使用console.log(); 方法及時的檢視資料結構,一層層的剝開找到我們需要的資料層。
為了更便於理解,附上兩張動圖展示,可以發現當我點選不同文章之後,跳轉的頁面獲取的資料也不一樣。

領讀

img

分類

img

在這裡分類頁面的資料更整齊一些,就以它為例來說一說我是如何通過id來動態選擇資料的。首先要清楚的是stack分類頁面和跳轉到的booklist詳情頁。在這裡是通過navigator來跳轉的,我們在url中設定表示式來動態獲取id,url=”booklist/booklist?id={{index}}”,然後在 booklist.js 中,通過獲取到的id,進行資料的選擇。

stack:

stack.wxml

          <view>
              <view class="page-search"></view>
              <scroll-view wx:for="{{stack}}" wx:key="{{index}}" scroll-y="true">
                  <navigator class="stack-view " url="booklist/booklist?id={{index}}">
                      <image src="{{item.typeCover}}" class="stack-image"></image>
                      <text class="stack-name">{{item.bookTypes}}</text>
                      <text class="stack-numb">{{item.bookNumb}} ></text>
                  </navigator>
                  <view class="line"></view>
              </scroll-view>
          </view>
      </view>
複製程式碼

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

<view>
	  <view>
	      <view wx:for="{{bookList}}" wx:key="{{index}}">
		  <view class="book-list-root" bindtap="bindViewTap">  
		      <view class="book-list-child">
			  <view>
			      <text class="book-list-name">{{item.bookName}}</text>
			  </view>
			  <view>
			      <text class="book-list-autor">{{item.authorName}}</text>
			  </view>
			  <view class="book-list-des">
			      <text>{{item.bookDes}}</text>
			  </view>
		      </view>
		  </view>
		  <view class="line"></view>            
	      </view>
	  </view>
      </view>
複製程式碼

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的動態修改

img

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

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

     .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、兩種頁面跳轉方式

(1)使用 navigator 方式

navigator的跳轉能夠保留當前頁面,可返回

    <navigator class="stack-view " url="booklist/booklist?id={{index}}">
      //  點選部位,觸發即可跳轉
      </navigator>

      <view class="page__bd-items page-flex" bindtap="tomyNews">
		  <view class="page-items-lt">
		      <image src="../../assets/images/mines/news.png" />
		  </view>
		  <view class="page-items-md">我的訊息</view>
		  <view class="page-items-others"></view>
		  <view class="page-items-ft">></view>
      </view>

      tomyNews:function(e) {
	  wx.navigateTo({
	    url:`news/news`
	  })
	},
複製程式碼

需要注意的是:程式中要求頁面的層級最多隻能有五層,因為這種方式保留當前頁面,也就是說以這種方式跳轉頁面,最多隻能開啟5個頁面。

(2)使用 switchTab 方法

該方法能夠跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面。

    wx.switchTab({
              url:`../leader/leader`,
              complete:function(res) {
              }
            })
複製程式碼

5、swiper實現輪播

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

img

這裡的相關屬性就直接使用了網上的圖片:

img
<swiper class="swiper" indicator-dots="true" 
interval="5000" duration="1000">
        <swiper-item>
            <view class="page__bd">
                <view class="page__bd-books center">
                   <image
                    src="../../assets/images/book1.png" />
                </view>
                <view class="page__bt">
                    <view class="page__bt-readings">
                    南風知我意</view>
                    <view class="page__bt-items center">
                        <view>1186人在讀</view>
                        <image 
                        src="../../assets/images/rg.png" />
                    </view>
                </view>
            </view>
        </swiper-item>
 </swiper>
複製程式碼

其中,swiper-item 可以通過 wx:for 來迴圈。

總結:

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

另外,其實還有很多功能和細節沒有處理好,這一次的分享並不代表著結束,通過不斷的學習,還將不斷的對專案功能進行完善和處理各種細節。

Github:杳杳飛花/Reading

        ☝想要一個star哦☺
複製程式碼

歡迎一起交流學習喲 ☞ ChestNutsJun@163.com

Blog: 杳杳飛花的部落格

相關文章