與你一起寫(xiě)小程序--仿網(wǎng)易蝸牛讀書(shū)小程序
|
最近一段時(shí)間在學(xué)習(xí)怎么寫(xiě)小程序，然后自己利用課外時(shí)間，也擼了一個(gè)。一直都很喜歡網(wǎng)易蝸牛讀書(shū)這款A(yù)pp，對(duì)于喜愛(ài)的事物總是情不自禁的，于是就仿照網(wǎng)易蝸牛讀書(shū)的App簡(jiǎn)單做了這款小程序。 項(xiàng)目預(yù)覽：項(xiàng)目準(zhǔn)備：大家若是感興趣，可以跟著我一起來(lái)做喲^_^ ? 藍(lán)體點(diǎn)擊就能跳轉(zhuǎn)到相應(yīng)頁(yè)面進(jìn)行下載或者查看教程 1、微信開(kāi)發(fā)者工具 他能幫助我們快速的進(jìn)行小程序的開(kāi)發(fā)。當(dāng)然，在開(kāi)發(fā)之前我們還需要擁有一個(gè)小程序賬號(hào)（注冊(cè)教程），通過(guò)賬號(hào)我們就能夠管理自己的小程序了。需要注意的是，只有滿了18歲的童鞋們才可以注冊(cè)。 2、vs code （密碼：g2g5） 64位系統(tǒng)的，其他版本就自己去搜一下安裝包啦。雖然在微信開(kāi)發(fā)者工具里面就能夠直接寫(xiě)，但還是喜歡在vs code里面進(jìn)行coding。這個(gè)按大家喜好自由選擇哦。 3、Iconfont-阿里巴巴矢量圖標(biāo)庫(kù) 一個(gè)阿里爸爸做的開(kāi)源圖庫(kù)，它不僅有幾百個(gè)公司的開(kāi)源圖標(biāo)庫(kù)，還有各式各樣的小圖標(biāo)。有了這個(gè)圖標(biāo)庫(kù)真是大大提高了我們的效率，我們能夠根據(jù)需要進(jìn)行圖標(biāo)搜索，還能夠設(shè)置顏色、大小和圖片格式。你想要的基本都有哦~ 4、EasyMock 簡(jiǎn)單高效的偽造數(shù)據(jù) 用于后臺(tái)的數(shù)據(jù)模擬，得到JSON數(shù)據(jù)，方便開(kāi)發(fā)。 5、微信小程序開(kāi)發(fā)文檔 W3C的這個(gè)文檔真是超級(jí)詳細(xì)，我們能夠在這里查找到微信小程序的API、組件以及一些框架等。 另外還使用了一款MarkMan進(jìn)行測(cè)量，但若是追求精準(zhǔn)還原的話，還是用PS更細(xì)膩。 項(xiàng)目開(kāi)發(fā)過(guò)程：每一次的開(kāi)發(fā)都是一個(gè)成長(zhǎng)的過(guò)程。在開(kāi)發(fā)過(guò)程中，我們會(huì)遇到各種問(wèn)題，這就給了我們一個(gè)獨(dú)立思考的空間，能夠鍛煉我們解決問(wèn)題和查詢文檔的能力。當(dāng)然，在思考查詢之后還可以請(qǐng)教他人、進(jìn)行探討，這樣往往能夠幫助我們快速的找到盲點(diǎn)，甚至能夠了解到更多我們忽視的點(diǎn)。和別人的交流也是學(xué)習(xí)中很重要的一環(huán)，所以在此分享了自己小小的一點(diǎn)經(jīng)驗(yàn)，歡迎一起交流，一起學(xué)習(xí)。 1、開(kāi)始項(xiàng)目在項(xiàng)目開(kāi)始時(shí)，我們首先在 app.json 文件中配置主體界面，設(shè)置好tabBar 。在這里我們對(duì)小程序設(shè)置確定了一個(gè)整體的基調(diào)。
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "網(wǎng)易蝸牛讀書(shū)",
"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":"分類(lèi)"
},
{
"pagePath": "pages/bookdesk/bookdesk",
"iconPath": "assets/icons/bookdesk.png",
"selectedIconPath": "assets/icons/bookdesk_sel.png",
"text":"書(shū)桌"
},
{
"pagePath":"pages/mine/mine",
"iconPath": "assets/icons/mine.png",
"selectedIconPath": "assets/icons/mine_sel.png",
"text":"我的"
}
]
}
對(duì)于 pages 頁(yè)面，在開(kāi)發(fā)過(guò)程中進(jìn)行過(guò)很多次調(diào)整。到現(xiàn)在為止覺(jué)得還算整潔和便于管理了。在起初，不管是一級(jí)頁(yè)面還是二級(jí)頁(yè)面，我都把它們放在了 pages 目錄下。這樣一開(kāi)始還不覺(jué)得有什么，可是到后來(lái)頁(yè)面越來(lái)越多，要對(duì)之前寫(xiě)過(guò)的頁(yè)面進(jìn)行修改和調(diào)整的時(shí)候，恍然間發(fā)現(xiàn)一堆文件夾，查找起來(lái)就覺(jué)得眼花繚亂，還要和頁(yè)面進(jìn)行配對(duì)，非常惱火。于是按照頁(yè)面不同的級(jí)別層次，進(jìn)行了相應(yīng)的調(diào)整。按照不同的tabBar確定了主體的文件夾，然后各級(jí)頁(yè)面又分別在各自所屬層級(jí)的目錄下。另外對(duì)于頁(yè)面的命名盡量通俗易懂，這樣方便自己對(duì)各頁(yè)面進(jìn)行查看和管理。 "pages":[ "pages/index/index", "pages/leader/leader", // 領(lǐng)讀人 "pages/leader/stories/stories", "pages/leader/authors/authors", "pages/stack/stack", // 分類(lèi) "pages/stack/booklist/booklist", "pages/stack/booklist/bookdetail/bookdetail", "pages/bookdesk/bookdesk", // 書(shū)桌 "pages/mine/mine", // 我的 "pages/mine/news/news", "pages/logs/logs" ],
在分類(lèi)頁(yè)面下具有多層級(jí)的一個(gè)頁(yè)面創(chuàng)建展示：
所以在項(xiàng)目開(kāi)始時(shí)首先思考的就是文件的排版問(wèn)題，一個(gè)合理的結(jié)構(gòu)，能夠增強(qiáng)項(xiàng)目的可讀性，以后操作和維護(hù)也更加方便，能夠節(jié)約一定的時(shí)間。 小技巧： 在創(chuàng)建pages頁(yè)面時(shí)，如果我們?cè)谖⑿砰_(kāi)發(fā)者程序的app.json文件中創(chuàng)建，就會(huì)自動(dòng)的生成相應(yīng)的文件夾，就不用我們一個(gè)一個(gè)去創(chuàng)建了。 2、頁(yè)面布局和樣式小程序?qū)儆谳p量級(jí)的應(yīng)用，所以在忠于原App的基礎(chǔ)上，對(duì)某些頁(yè)面進(jìn)行了一些調(diào)整。另外，在這里所有的頁(yè)面都是我切的，可能會(huì)有人說(shuō)很多頁(yè)面都可以引用第三方框架，沒(méi)有必要寫(xiě)原生代碼。其實(shí)都沒(méi)有錯(cuò)，要看自己寫(xiě)小程序是為了什么。我做這款小程序是為了學(xué)習(xí)小程序的開(kāi)發(fā)，另外自己的前端之旅還是剛剛開(kāi)啟，所以為了在 coding 中鍛煉自己對(duì)各種結(jié)構(gòu)的敏感性，加深自己對(duì)樣式屬性的理解，我選擇了自己寫(xiě)原生代碼。 其實(shí)第三方框架是非常好的輪子，像微信團(tuán)隊(duì)開(kāi)發(fā)的 weui 框架就很好用，它提供了很多的組件，能夠讓你擺脫切頁(yè)面的繁瑣，減少開(kāi)發(fā)時(shí)間。對(duì)于 weui 的使用我也不是很熟練，所以在后續(xù)的學(xué)習(xí)中，還會(huì)繼續(xù)修改這個(gè)小程序，用不同的方法實(shí)現(xiàn)頁(yè)面。 另外，在命名時(shí)，我使用了BEM規(guī)范，這樣便于對(duì)頁(yè)面結(jié)構(gòu)的理解，使代碼更易讀。BEM命名法則給我們提供了一個(gè)很好的模板，在命名中就能體現(xiàn)各個(gè)元素之間的關(guān)系，CSS的命名更加語(yǔ)義化，元素更易讀懂。而且獨(dú)一無(wú)二的命名方式，使得代碼能夠得到更好的復(fù)用。 stack.wxml
3、使用 easy-mock 造數(shù)據(jù)寫(xiě)完基本樣式之后，要思考的就是數(shù)據(jù)問(wèn)題。我們開(kāi)發(fā)的頁(yè)面很少有靜態(tài)的。我們把數(shù)據(jù)寫(xiě)在頁(yè)面中沒(méi)有任何意義還平白增加了工作量。此時(shí)我們就需要模擬后臺(tái)數(shù)據(jù)，讓這些數(shù)據(jù)能夠通過(guò)請(qǐng)求渲染到頁(yè)面上。easy-mock 就給我們提供了一個(gè)很好的平臺(tái)來(lái)造假數(shù)據(jù)，然后生成URL 通過(guò) wx.request() 方法來(lái)獲取數(shù)據(jù)，實(shí)現(xiàn)頁(yè)面加載數(shù)據(jù)。 另外還可以在本地寫(xiě)假數(shù)據(jù)。今天在閱讀別人文章時(shí)有看到用require()方式來(lái)請(qǐng)求數(shù)據(jù)的。對(duì)于這個(gè)不是很懂，通過(guò)查詢之后才發(fā)現(xiàn)這是CommonJS 中的模塊實(shí)現(xiàn)。實(shí)現(xiàn)一項(xiàng)功能的方法有很多種，我覺(jué)得我們不能只滿足于一種方法，而應(yīng)該廣泛的涉獵，通過(guò)對(duì)不同方法的學(xué)習(xí)，讓自己的知識(shí)儲(chǔ)備更龐大。 項(xiàng)目基本功能：1、小程序啟動(dòng)頁(yè)面的實(shí)現(xiàn)在這里我使用了setInterval（）和clearInterval（）方法來(lái)實(shí)現(xiàn)，然后通過(guò)switchTab來(lái)實(shí)現(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)頁(yè)面時(shí)獲取id, 獲取不同數(shù)據(jù)一開(kāi)始自己對(duì)數(shù)據(jù)獲取還不是很熟練，只能進(jìn)行簡(jiǎn)單的單頁(yè)面渲染。后來(lái)通過(guò)查文檔和摸索，逐漸的能夠進(jìn)行復(fù)雜一些的數(shù)據(jù)獲取。另外，在setData時(shí)，如果不清楚結(jié)構(gòu)，可以使用console.log(); 方法及時(shí)的查看數(shù)據(jù)結(jié)構(gòu)，一層層的剝開(kāi)找到我們需要的數(shù)據(jù)層。 為了更便于理解，附上兩張動(dòng)圖展示，可以發(fā)現(xiàn)當(dāng)我點(diǎn)擊不同文章之后，跳轉(zhuǎn)的頁(yè)面獲取的數(shù)據(jù)也不一樣。 領(lǐng)讀
分類(lèi)
在這里分類(lèi)頁(yè)面的數(shù)據(jù)更整齊一些，就以它為例來(lái)說(shuō)一說(shuō)我是如何通過(guò)id來(lái)動(dòng)態(tài)選擇數(shù)據(jù)的。首先要清楚的是stack分類(lèi)頁(yè)面和跳轉(zhuǎn)到的booklist詳情頁(yè)。在這里是通過(guò)navigator來(lái)跳轉(zhuǎn)的，我們?cè)趗rl中設(shè)置表達(dá)式來(lái)動(dòng)態(tài)獲取id，url="booklist/booklist?id={{index}}"，然后在 booklist.js 中，通過(guò)獲取到的id，進(jìn)行數(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
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、對(duì)navigationBarTitleText的動(dòng)態(tài)修改
在各個(gè)頁(yè)面的JSON文件中，我們能夠設(shè)置頁(yè)面的標(biāo)題，但是當(dāng)我們進(jìn)入不同頁(yè)面需要獲取不同標(biāo)題時(shí)，就需要?jiǎng)討B(tài)的進(jìn)行修改。其實(shí)實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，我們知道通過(guò)wx.setNavigationBarTitle() 方法就能夠修改頁(yè)面標(biāo)題，然后跟第二點(diǎn)所述的方式一樣，通過(guò)id來(lái)達(dá)到動(dòng)態(tài)獲取的效果。 另外要注意的是，我們要將JSON中的navigationBarTitleText設(shè)置為空，這樣在跳轉(zhuǎn)的過(guò)程中就不會(huì)有原始標(biāo)題和修改標(biāo)題之間跳轉(zhuǎn)的一個(gè)效果，而是直接顯示需要的標(biāo)題。
.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、兩種頁(yè)面跳轉(zhuǎn)方式（1）使用 navigator 方式navigator的跳轉(zhuǎn)能夠保留當(dāng)前頁(yè)面，可返回
需要注意的是：程序中要求頁(yè)面的層級(jí)最多只能有五層，因?yàn)檫@種方式保留當(dāng)前頁(yè)面，也就是說(shuō)以這種方式跳轉(zhuǎn)頁(yè)面，最多只能打開(kāi)5個(gè)頁(yè)面。 （2）使用 switchTab 方法該方法能夠跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面。
wx.switchTab({
url:'../leader/leader',
complete:function(res) {
}
})
5、swiper實(shí)現(xiàn)輪播通過(guò) swiper 和 swiper-item 實(shí)現(xiàn)了書(shū)桌頁(yè)面的輪播效果。
這里的相關(guān)屬性就直接使用了網(wǎng)上的圖片：
其中，swiper-item 可以通過(guò) wx:for 來(lái)循環(huán)。 總結(jié)：這一次的小程序開(kāi)發(fā)，讓我學(xué)到了很多東西。我們是為了學(xué)習(xí)而開(kāi)發(fā)項(xiàng)目。因此在coding的時(shí)候要沉住氣，不要急躁，遇到問(wèn)題就及時(shí)的去查文檔或者請(qǐng)教別人，然后多想一想實(shí)現(xiàn)的方法，是不是還能夠通過(guò)其他辦法來(lái)實(shí)現(xiàn)。這樣在不斷的思考和解決問(wèn)題中，在不斷的踩坑中才能讓自己快速的成長(zhǎng)起來(lái)。 另外，其實(shí)還有很多功能和細(xì)節(jié)沒(méi)有處理好，這一次的分享并不代表著結(jié)束，通過(guò)不斷的學(xué)習(xí)，還將不斷的對(duì)項(xiàng)目功能進(jìn)行完善和處理各種細(xì)節(jié)。 |
