微信小程序開發--頁面結構

一、微信小程序開發--頁面文件組成

• [page.name].js
  • • 頁面邏輯文件，用於創建頁面對象，以及處理頁面生命周期控制和數據處理　　
• [page.name].wxml
  • • wxml指的是Wei Xin Markup Language
    • 用於定義頁面元素結構的.  語法遵循XML語法，不是HTML語法
• [page.name].json  （可選）
  • • 設置當前頁面的Window的配置，此處會覆蓋app.json中的window設置，也就是說，只可以設置window中設置的屬性。
• [page.name].wxss  （可選）
  • • wxml指的是 Wei Xin Style Sheet
    • 用於定義頁面樣式的語法，語法遵循Css語法，擴展了css的基本用法和長度單位 （主要是rpx 響應式像素）

二、微信小程序開發--應用程序設置(app.json)

注：如果需要用代碼，請把注釋刪除或換行
{
"pages": [           　　　　　　　　　　　　　　　　　　　　　　//pages:用來配置頁面路徑的
"pages/index/index",
"pages/logs/logs"
],
"window": {　　　　　　　　　　　　　　　　　　　　　　　　
"backgroundTextStyle": "light",　　　　　　　　　　　　　　　　//下拉 loading 的樣式，僅支持 dark / light
"navigationBarBackgroundColor": "#219bf9",　　　　　　　　　　//導航條的背景顏色
"navigationBarTitleText": "WeChat",　　　　　　　　　　　　　　//導航欄標題文字內容
"navigationBarTextStyle": "black"　　　　　　　　　　　　　　　//導航欄標題顏色，僅支持 black / white
"enablePullDownRefresh":true,　　　　　　　　　　　　　　　　//是否全局開啟下拉菜單刷新
"backgroundColor":"#eee"　　　　　　　　　　　　　　　　　　//頁面背景顏色
},
"debug":true,　　　　　　　　　　　　　　　　　　　　　　　　//可以在開發者工具中開啟 debug 模式，在開發者工具的控制台面板，調試信息以 info 的形式給出，其信息有 Page 的注冊，頁面路由，數據更新，事件觸發等。可以幫助開發者快速定位一些常見的問題。
"sitemapLocation": "sitemap.json",

"tabBar":{
"selectedColor":"#e3eeeo",　　　　　　　　　　　　　　　　　　//tab 上的文字選中時的顏色，僅支持十六進制顏色
"backgroundColor": "#666",　　　　　　　　　　　　　　　　　　//tab 的背景色，僅支持十六進制顏色
"color": "#333",　　　　　　　　　　　　　　　　　　　　　　　//tab 上的文字默認顏色，僅支持十六進制顏色
"borderStyle": "black",　　　　　　　　　　　　　　　　　　　　//tabbar 上邊框的顏色， 僅支持 black / white

"list":[　　　　　　　　　　　　　　　　　　　　　　　　　　　//tab 的列表，詳見 list 屬性說明，最少 2 個、最多 5 個 tab
{
"text": "index",　　　　　　　　　　　　　　　　　　　　　　　//tab 上按鈕文字
"pagePath":"pages/index/index",　　　　　　　　　　　　　　　//頁面路徑，必須在 pages 中先定義
"iconPath":"pages/images/1.jpg",　　　　　　　　　　　　　　　//圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片。當 position 為 top 時，不顯示 icon。
"selectedIconPath":"pages/images/1.jpg"　　　　　　　　　　　//選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片。當 position 為 top 時，不顯示 icon。
},
{
"text": "logs",
"pagePath":"pages/logs/logs",
"iconPath": "pages/images/2.jpg",
"selectedIconPath":"pages/images/2.jpg"
}
]
}
}

　　

 

三、微信小程序開發--頁面應用程序設置(page.json)

每個單獨的頁面下都有一個.json文件，這里面的內容只可以覆蓋app.json文件中的window里面的內容。

四、微信小程序邏輯層的JavaScript和平時用的JavaScript的區別。

1. 小程序不是運行在瀏覽器上的，所以沒有BOM和DOM對象。
2. 小程序的JS有一些額外的成員

• • • App   方法      用於定義應用程序實例對象
    • Page 方法   　用於定義頁面對象
    • getApp 方法　用於獲取全局應用程序對象
    • getCurrentPages  方法   用於獲取當前頁面的調用棧（數組，最后一個元素就是當前頁面）　　
    • wx對象　　 用來提供核心API

　　3.小程序的JS支持CommonJS規范的

• • • exprot   導出

    • function say(){
        console.log("我是Say方法")
      }
      //導出
      module.exports = {
        say:say
      }　

    • import　導入
    • require  引用

    • const util = require('../../utils/util.js')