1. 程式人生 > >微信小程式:如何建立一個小程式頁面?

微信小程式:如何建立一個小程式頁面?

要在微信小程式上開發一個功能模組,通常需要先建立一個新的頁面,方法很簡單,示例如下:

例如,需要新建一個名稱為one的頁面,只需要在專案的根目錄下的app.json檔案下的pages陣列中新建一行:"pages/one/one"。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/canvas/canvas",
    "pages/one/one"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

重新執行程式程式碼後,即可在pages目錄下發現一個名為one的資料夾,裡面會自動生成一個小程式頁面所需要的四個檔案。
檔案型別 必填 作用
js 頁面邏輯
wxml 頁面結構
wxss 頁面樣式表
json 頁面配置
注意:為了方便開發者減少配置項,官方規定描述頁面的這四個檔案必須具有相同的路徑與檔名。

把小程式頁面比作一個人的話,那麼組成它的各個檔案的作用可比喻如下:

one.js管的是這個頁面的“大腦”,它是用JavaScript編寫的,負責將資料進行處理後傳送給檢視層,同時接受檢視層的事件反饋。例如:獲取資料、更新資料、頁面的跳轉等;

one.wxml管的是這個頁面的“”長相“”,即使用者看到的是什麼樣子的頁面是由它決定的。例如:定義頁面的整體佈局以及頁面內容的顯示效果文字框、按鈕、檢視、照片等;

one.wxss管的是這個頁面的“化妝品”,它決定了小程式頁面平時如何見人?例如:頁面的長寬高、元件邊距、顏色邊框、滑鼠經過的效果等;

one.json管的是這個頁面“性格”,它負責對本頁面的視窗表現進行配置,例如:頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。

一個擁有網頁開發基礎的學者只要明白瞭如何定義一個小程式的頁面,再對其頁面組成的使用加以熟悉,很快就可以上手小程式的開發。

還在等什麼?趕緊試試吧!

後續我會陸續分享一些小程式的學習心得給大家,歡迎多多關注~~~