小程序配置詳解

小程序新生成時的目錄

有4中不一樣的文件類型

1. .json 後綴的 JSON 配置文件
2. .wxml 後綴的 WXML 模板文件
3. .wxss 後綴的 WXSS 樣式文件
4. .js 後綴的 JS 腳本邏輯文件

 

json

app.json 是對當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等

下面是一個包含全部配置選項的app.json：

{
  "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首頁" }, { "pagePath": "pages/logs/logs", "text": "日誌" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }

　　

1. pages字段 —— 用於描述當前小程序全部頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄。
2. window字段 —— 小程序全部頁面的頂部背景顏色，文字顏色定義在這裏的。
3. tabBar字段——若是小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄能夠切換頁面），能夠經過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。
4. networkTimeout字段——能夠設置各類網絡請求超時時間
5. debug字段——能夠在開發者工具中開啓 debug 模式，在開發者工具的控制檯面板，調試信息以 info 的形式給出，其信息有Page的註冊，頁面路由，數據更新，事件觸發 。 能夠幫助開發者快速定位一些常見的問題。

WXML

網頁編程採用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 一般是用來處理這個頁面和用戶的交互

WXML 相似於 HTML

 

WXSS樣式

WXSS 具備 CSS 大部分的特性，小程序在 WXSS 也作了一些擴充和修改。

1. 新增了尺寸單位。在寫 CSS 樣式時，開發者須要考慮到手機設備的屏幕會有不一樣的寬度和設備像素比，採用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發者能夠免去換算的煩惱，只要交給小程序底層來換算便可，因爲換算採用的浮點數運算，因此運算結果會和預期結果有一點點誤差。
2. 提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你能夠寫一個 app.wxss 做爲全局樣式，會做用於當前小程序的全部頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。
3. 此外 WXSS 僅支持部分 CSS 選擇器

JS 交互邏輯

在小程序裏邊，咱們就經過編寫 JS 腳本文件來處理用戶的操做。

<view>{{ msg }}</view>
<button bindtap="clickMe">點擊我</button>

　　點擊 button 按鈕的時候，咱們但願把界面上 msg 顯示成 "Hello World"，因而咱們在 button 上聲明一個屬性: bindtap ，在 JS 文件裏邊聲明瞭 clickMe 方法來響應此次點擊操做：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})