第二章:小程序中級實戰(zhàn)教程之預(yù)備篇 ? 項目結(jié)構(gòu)設(shè)計iKcamp官網(wǎng):http://www.ikcamp.com
訪問官網(wǎng)更快閱讀全部免費分享課程:《iKcamp出品|全網(wǎng)最新|微信小程序|基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享》。
包含:文章、視頻、源代碼
教學(xué)視頻地址:https://v.qq.com/x/page/q0554...
開始前請把 ch2-1 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具 ?
前面的章節(jié)中,我們完成了小程序的準備工作,熟悉了小程序的基本配置。接下來的章節(jié),我們就要著手開始一個真正的項目。有沒有很激動?其實不難發(fā)現(xiàn),小程序的門檻還是相對比較低的,基本掌握前端開發(fā)基礎(chǔ)的同學(xué),完成一個簡單的小程序不費吹灰之力。 ?
Step 1. 基本結(jié)構(gòu)經(jīng)過前面幾章的學(xué)習(xí),我們已經(jīng)基本知道了小程序的基本配置,不啰嗦,先把基礎(chǔ)的項目結(jié)構(gòu)建立起來,先搭架子,在豐富細節(jié)。在 /codes/ch2-1 的基礎(chǔ)上,我們創(chuàng)建以下文件:
├── lib/ ├── styles/ │ ├── base.wxss ├── pages/ ├── app.js ├── app.json ├── app.wxss
現(xiàn)在呢,最最基本的框架就已經(jīng)搭建好了。app.js 是小程序的主邏輯文件,app.json 是小程序全局配置文件,app.wxss 當然就是小程序的全局樣式文件了。pages 后面會用來存放小程序的頁面。
app.js
let handler = { //小程序初始化 onLaunch () { console.log("app init..."); }, //小程序全局數(shù)據(jù) globalData: { user: { name: "", avator: "" } } }; App(handler);
app.js 包含了小程序的一些生命周期函數(shù),項目剛開始,我們先從簡單的開始,只用到了 onLaunch 生命周期函數(shù)。當小程序初始化完成時,會觸發(fā) onLaunch(全局只觸發(fā)一次)。globalData 可以用來存放小程序的全局數(shù)據(jù),我們可以在頁面中通過 getApp() 方法獲取到小程序的實例,通過小程序?qū)嵗涂梢栽L問到這個全局對象,后面會詳細講解。
app.json
{ "pages": [], "window": { "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black", "navigationBarTitleText": "Demo", "backgroundColor": "#f8f8f8", "backgroundTextStyle": "light", "enablePullDownRefresh": false }, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "debug": true }
小程序的主配置文件的基本結(jié)構(gòu)就已經(jīng)寫好了。當然不是全部的配置文件,可以參考小程序配置API。官方文檔已經(jīng)給出了很詳細的解釋,這里就不贅述了。
Tip:debug 為 true,可以在調(diào)試的時候會有些許幫助,但是提審的時候建議改為 false。
app.wxss
.green{ color: #26b961; } page{ height: 100%; background-color: #f8f8f8; }
定義在 app.wxss 中的樣式為全局樣式,作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式,只作用在對應(yīng)的頁面,并會覆蓋 app.wxss 中相同的選擇器。
Step 2. 增加頁面接下來我們要為小程序增加頁面了,小程序的頁面存放在 pages 文件夾下面。我們繼續(xù)完善目錄結(jié)構(gòu)
├── lib/ ├── styles/ │ ├── base.wxss ├── pages/ │ ├── detail/ │ ├── index/ ├── app.js ├── app.json ├── app.wxss
首先我們在 pages 目錄下增加兩個文件夾,detail 和 index,其中 detail 代表小程序的文章詳情頁面,index 則代表小程序的首頁。
光有文件夾不行,在小程序中,每個頁面都有四個文件
[name].js 頁面的主邏輯文件
[name].json 頁面的配置文件
[name].wxml 頁面內(nèi)容,類似于之前的html文件
[name].wxss 頁面的樣式文件,類似之前的css文件
Tip: 值得注意的是,每個頁面中的這四個文件必須保持同名。
繼續(xù)完善文件目錄
├── lib/ ├── styles/ │ ├── base.wxss ├── pages/ │ ├── detail/ │ │ ├── detail.js │ │ ├── detail.json │ │ ├── detail.wxml │ │ ├── detail.wxss │ ├── index/ │ ├── index.js │ ├── index.json │ ├── index.wxml │ ├── index.wxss ├── app.js ├── app.json ├── app.wxss
index.js
和之前的 app.js 類似,小程序的頁面也有對應(yīng)的邏輯文件,比如 index.js 就代表該項目中的首頁的邏輯(小程序的首頁不一定非要是 index,可以用其他名字)。
Page({ data: { text: "This is page data." }, onLoad: function(options) { console.log("小程序加載了") // 生命周期函數(shù)--監(jiān)聽頁面加載 }, onReady: function() { // 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 }, onShow: function() { // 生命周期函數(shù)--監(jiān)聽頁面顯示 }, onReachBottom: function() { // 頁面上拉觸底事件的處理函數(shù) }, // 其他一些業(yè)務(wù)函數(shù) hello: function() { this.setData({ text: "hello world" }) } })
Page() 函數(shù)用來注冊一個頁面。接受一個 object 參數(shù),其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
index.json
每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現(xiàn)進行配置。頁面的配置比 app.json 全局配置簡單得多,只是設(shè)置 app.json 中的 window 配置項的內(nèi)容,頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
頁面的 .json 只能設(shè)置 window 相關(guān)的配置項,以決定本頁面的窗口表現(xiàn),所以無需寫 window 這個鍵。因為本項目比較簡單,可以先使用全局的配置。暫時可以放一個空的 json 對象
{ }
index.wxml
.wxml 就是小程序的頁面文件了,WXML(WeiXin Markup Language)是框架設(shè)計的一套標簽語言,結(jié)合基礎(chǔ)組件、事件系統(tǒng),可以構(gòu)建出頁面的結(jié)構(gòu)。
this is home page
index.wxss
WXSS(WeiXin Style Sheets)是一套樣式語言,用于描述 WXML 的組件樣式。這里的樣式基本和之前 css 的語法一致,可以覆蓋 app.wxss 中定義的樣式。
.home { color: red; font-size: 28rpx; }
同樣的 detail 頁面也會擁有類似的結(jié)構(gòu)和代碼。
完成了上面的基本的頁面,仔細的同學(xué)可能還發(fā)現(xiàn),上面的 app.json 配置中,pages 還是空的,接下來補充配置。
"pages": [ "pages/index/index", "pages/detail/detail" ]
pages 就是小程序的路由配置,這里可以看到,小程序擁有兩個路由,一個首頁,一個詳情頁面。
至此我們就完成了最簡單的頁面的配置,到現(xiàn)在為止,我們就能很容易的跑出一個簡單的微信小程序了,雖然還只是最基本的骨架,后面會繼續(xù)完善。
Step 3. 一些非必要目錄上面介紹了小程序的必要的項目結(jié)構(gòu),其實在實際的項目中,為了開發(fā)方便,我們一般還會增加一些額外的目錄,比如:
├── lib/ ├── styles/ │ ├── base.wxss ├── pages/ │ ├── detail/ │ │ ├── detail.js │ │ ├── detail.json │ │ ├── detail.wxml │ │ ├── detail.wxss │ ├── index/ │ ├── index.js │ ├── index.json │ ├── index.wxml │ ├── index.wxss ├── app.js ├── app.json ├── app.wxss
lib 文件夾和 styles 文件夾。文件夾不是小程序的必要配置,前者用來存放項目中用到的其他庫,后者可以存放一些基礎(chǔ)樣式文件。當然,你也可以根據(jù)自己的需要來增加一些別的文件夾來便利開發(fā)。
這里我們放置了一些文件,lib 中放置了實現(xiàn) Promise 的庫和解析 html 為小程序 WXML 的庫。styles 中放置了公用的重置樣式。
下一節(jié)中,我們講一下這個實戰(zhàn)項目中用到的一些公用方法,比如打印日志功能、網(wǎng)絡(luò)請求環(huán)境等
上一篇-iKcamp出品|微信小程序|小試牛刀(視頻)+發(fā)布流程|基于最新版1.0開發(fā)者工具初中級教程分享
下期更新內(nèi)容:小程序初級入門教程-第二章:小程序中級實戰(zhàn)教程:預(yù)備篇-提取 util 公用方法
iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實戰(zhàn)》已在亞馬遜、京東、當當開售。
iKcamp最新活動相關(guān)文章:
聽說 2017 你想寫前端?
前端開發(fā)者指南(2017)
翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級函數(shù)式編程
翻譯 | 關(guān)鍵CSS和Webpack: 減少阻塞渲染的CSS的自動化解決方案
報名地址:http://www.huodongxing.com/ev...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51388.html
iKcamp官網(wǎng):http://www.ikcamp.com 訪問官網(wǎng)更快閱讀全部免費分享課程:《iKcamp出品|全網(wǎng)最新|微信小程序|基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享》。包含:文章、視頻、源代碼 showImg(https://segmentfault.com/img/remote/1460000011522427?w=1626&h=1242); 第二章:小程序中級實戰(zhàn)教程之預(yù)...
iKcamp官網(wǎng):http://www.ikcamp.com 訪問官網(wǎng)更快閱讀全部免費分享課程:《iKcamp出品|全網(wǎng)最新|微信小程序|基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享》。包含:文章、視頻、源代碼 showImg(https://segmentfault.com/img/remote/1460000011522427?w=1626&h=1242); 第二章:小程序中級實戰(zhàn)教程之預(yù)...
摘要:調(diào)用方法如下微信熱門官網(wǎng)訪問官網(wǎng)更快閱讀全部免費分享課程出品全網(wǎng)最新微信小程序基于最新版開發(fā)者工具之初中級培訓(xùn)教程分享。 § 封裝網(wǎng)絡(luò)請求及 mock 數(shù)據(jù) 本文配套視頻地址:https://v.qq.com/x/page/i0554... 開始前請把 ch2-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具 上一節(jié)中,我們對 index.js 文件中增加了 util 對象,并在對象...
摘要:調(diào)用方法如下微信熱門官網(wǎng)訪問官網(wǎng)更快閱讀全部免費分享課程出品全網(wǎng)最新微信小程序基于最新版開發(fā)者工具之初中級培訓(xùn)教程分享。 § 封裝網(wǎng)絡(luò)請求及 mock 數(shù)據(jù) 本文配套視頻地址:https://v.qq.com/x/page/i0554... 開始前請把 ch2-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具 上一節(jié)中,我們對 index.js 文件中增加了 util 對象,并在對象...
摘要:調(diào)用方法如下微信熱門官網(wǎng)訪問官網(wǎng)更快閱讀全部免費分享課程出品全網(wǎng)最新微信小程序基于最新版開發(fā)者工具之初中級培訓(xùn)教程分享。 § 封裝網(wǎng)絡(luò)請求及 mock 數(shù)據(jù) 本文配套視頻地址:https://v.qq.com/x/page/i0554... 開始前請把 ch2-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具 上一節(jié)中,我們對 index.js 文件中增加了 util 對象,并在對象...
閱讀 3639·2021-11-24 09:38
閱讀 3142·2021-11-15 11:37
閱讀 781·2021-11-12 10:36
閱讀 3547·2021-10-21 09:38
閱讀 3220·2021-09-28 09:36
閱讀 2420·2021-09-22 16:01
閱讀 4984·2021-09-22 15:09
閱讀 1210·2019-08-30 15:55