小程序入門(1)項目結構篇。

項目結構

(在看本文時你應該已經創建起一個項目了  PS:小程序入門講解(0)項目創建篇

找到加號!創建button目錄


創建內層文件 js,json , wxml , wxss . 名字與外層文件相同。


創建外層文件,分別在創建內層 jsjsonwxmlwxss。這樣就生成了一個僞頁面,說它是僞頁面到後面進行分析。

. jsjavascript 邏輯代碼區。

. json:頁面配置區。

. wxml:類類似HTML佈局區, 

. wxssCSS樣式區 ,

( json 與 wxss 並不是必須的,可按照產品風格做調整),要說的是json多數使用在API接口中,在控件中幾乎不使用,他的作用官方解釋 

子文件中的 .json只能設置window相關的配置項,以決定本頁面的窗口表現,所以無需寫window這個鍵

window :用於設置小程序的狀態欄、導航條、標題、窗口背景色。

所以在編寫控件時可以不用創建 .json 文件 

js 與 wxml就比較關鍵了“必須創建”。

前面的這些介紹大概心裏有個數,往後看更精彩。


你應該發現所創建的外層文件和內層文件,他們的名字都是相同的,這是也是微信框架下的一種查詢調用機制,因爲框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合,當然在一些情況下會有所出入,比如 navigator控件 實現 頁面內層跳轉 它的 文件名需要不相同,有一個大致的瞭解後面在深入,我們可以知道文件名不是必須相同的,只是如果不相同在APP.json中要多寫幾個路徑。



從這裏就能看出微信小程序的目錄結構,是一個排插分別已有四個插口,而這個插口可以根據需求進行靈活運用,

PS:看到這裏沒學過javascript HTML CSS的朋友會覺得必須要去學這些,其實不然,重點要學的是JavaScript,而後兩者可以邊看官方文檔邊學,當然基礎的內容還是要去過一邊大概兩小時就可以對HTML CSS有個大致的瞭解,這兩門還是挺簡單的。

在小程序開發中wxml與Html還是有點差別的,

Wxml中的控件由標籤決定 這點與HTML相同

View決定一個顯示區<view> 指定寬高...等等</view>等等

要說的是<view>是一個區塊,意味着我們可以更自由的使用它。 

Wxml它的關鍵字由微信框架提供,這就是不同之處,即使你對HTML學的很好,也只是多了對書寫格式的熟悉,在這裏還得重新學,wxml中只能使用官方所定製的組件也就是關鍵字。


現在說一下怎麼讓這僞頁面變成,半真頁面。

在 button.js 中輸入 page ,之後我相信你會懂的。只添加page函數對他的其他生命週期函數不做任何改動。



接下來在button.wxml中 添加


最後在最外層中找的app.json , 把文件路徑寫上。


而要讓此文件中的內容顯示出來,必須要在最外層的app.json中聲明配置,而最關鍵的是app.json中第一行就是主頁面 app.json 官方解

現在你去調試窗口重啓一下,你的第一個頁面就出來了。

官方同名機制就在這裏可以看到效果了,你不用去管button這文件裏的四個文件,它也可以給你調用起來,如果文件名不相同你就需要多寫幾行引用。


總結一下:

  1. 看完我們知道了,想要創建出一個頁面,控件,需要先創建一個外層文件,然後在文件創建四個關鍵文件,他們的名字必須與外層文件相同。
  2. 重點學習javascript ,將大部分時間留在學習JavaScript中,將HTML CSS基礎知識過一遍 以後真使用到在進行深入。
  3. 如果你有一定編程基礎,可看一下 寫給Android/Java開發者的JavaScript精解(1) ,如果沒有什麼基礎也過一遍,真看起來費力在去找基礎惡補。
  4. wxml與js的關係是互相獨立的,這與HTML與javascript的關係是一模一樣的,唯一的不同就是必須要在js中寫page方法(函數)才能將wxml中的佈局顯示出來並且不報錯。
  5. app.json 第一行的路徑就是首頁面,它尋找你所創建的頁面,只要創建了新內容想顯示出來的必須要在裏面寫上文件路徑。
  6. 淺析步驟:“一個”外層,四個內層,js中page入口,wxml中佈局,app.json 配置頁面路徑.
  • 我學習java做android喜歡使用 方法 這一詞,函數的話對於數學不好的人看着會頭疼吧,雖然程序中的函數與數學的函數沒什麼親近的關係。
  • WXML可以藉助官方文檔進行研究,而不用特別細緻的去研究HTML ,也可以在GitHub上找一些小程序demo 現在已經很多了,看看他們的wxml中的編寫思路。
  • 當然我也會每天更新一點關於微信小程序學習的理解。

----今天先講這麼多看一下時間不知不覺已經凌晨一點多了。----

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章