與你一塊兒寫小程序

時間  2019-11-25
標籤 與你 一塊兒 程序 简体版
原文   原文鏈接

最近一段時間在學習怎麼寫小程序，而後本身利用課外時間，也擼了一個。一直都很喜歡網易蝸牛讀書這款App，對於喜好的事物老是不由自主的，因而就仿照網易蝸牛讀書的App簡單作了這款小程序。html

項目地址：杳杳飛花/Reading

項目預覽：

img

項目準備：

你們如果感興趣，能夠跟着我一塊兒來作喲^_^前端

☟ 藍體點擊就能跳轉到相應頁面進行下載或者查看教程git

一、微信開發者工具 他能幫助咱們快速的進行小程序的開發。固然，在開發以前咱們還須要擁有一個小程序帳號（註冊教程），經過帳號咱們就可以管理本身的小程序了。須要注意的是，只有滿了18歲的童鞋們才能夠註冊。github

二、vs code （密碼：g2g5） 64位系統的，其餘版本就本身去搜一下安裝包啦。雖然在微信開發者工具裏面就可以直接寫，但仍是喜歡在vs code裏面進行coding。這個按你們喜愛自由選擇哦。json

三、Iconfont-阿里巴巴矢量圖標庫 一個阿里爸爸作的開源圖庫，它不只有幾百個公司的開源圖標庫，還有各式各樣的小圖標。有了這個圖標庫真是大大提升了咱們的效率，咱們可以根據須要進行圖標搜索，還可以設置顏色、大小和圖片格式。你想要的基本都有哦~小程序

四、EasyMock 簡單高效的僞造數據 用於後臺的數據模擬，獲得JSON數據，方便開發。微信小程序

五、微信小程序開發文檔 W3C的這個文檔真是超級詳細，咱們可以在這裏查找到微信小程序的API、組件以及一些框架等。微信

另外還使用了一款MarkMan進行測量，但如果追求精準還原的話，仍是用PS更細膩。數據結構

項目開發過程：

每一次的開發都是一個成長的過程。在開發過程當中，咱們會遇到各類問題，這就給了咱們一個獨立思考的空間，可以鍛鍊咱們解決問題和查詢文檔的能力。固然，在思考查詢以後還能夠請教他人、進行探討，這樣每每可以幫助咱們快速的找到盲點，甚至可以瞭解到更多咱們忽視的點。和別人的交流也是學習中很重要的一環，因此在此分享了本身小小的一點經驗，歡迎一塊兒交流，一塊兒學習。微信開發

一、開始項目

在項目開始時，咱們首先在 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文件中建立，就會自動的生成相應的文件夾，就不用咱們一個一個去建立了。

二、頁面佈局和樣式

小程序屬於輕量級的應用，因此在忠於原App的基礎上，對某些頁面進行了一些調整。另外，在這裏全部的頁面都是我切的，可能會有人說不少頁面均可以引用第三方框架，沒有必要寫原生代碼。其實都沒有錯，要看本身寫小程序是爲了什麼。我作這款小程序是爲了學習小程序的開發，另外本身的前端之旅仍是剛剛開啓，因此爲了在 coding 中鍛鍊本身對各類結構的敏感性，加深本身對樣式屬性的理解，我選擇了本身寫原生代碼。

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

stack.wxml

img

三、使用 easy-mock 造數據

寫完基本樣式以後，要思考的就是數據問題。咱們開發的頁面不多有靜態的。咱們把數據寫在頁面中沒有任何意義還平白增長了工做量。此時咱們就須要模擬後臺數據，讓這些數據可以經過請求渲染到頁面上。easy-mock 就給咱們提供了一個很好的平臺來造假數據，而後生成URL 經過 wx.request() 方法來獲取數據，實現頁面加載數據。

另外還能夠在本地寫假數據。今天在閱讀別人文章時有看到用require()方式來請求數據的。對於這個不是很懂，經過查詢以後才發現這是CommonJS 中的模塊實現。實現一項功能的方法有不少種，我以爲咱們不能只知足於一種方法，而應該普遍的涉獵，經過對不一樣方法的學習，讓本身的知識儲備更龐大。

項目基本功能：

一、小程序啓動頁面的實現

在這裏我使用了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);
  }
})
複製代碼

二、跳轉頁面時獲取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,
		  })  
		}
	      })
	      },
	  })
複製代碼

三、對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);
	      }
	    })
	  },
複製代碼

四、兩種頁面跳轉方式

（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) {
              }
            })
複製代碼

五、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: 杳杳飛花的博客

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程