入門微信小程序

簡介

• 它是什麼
  一套用來開發在微信中運行的手機app框架
• 組成結構
  視圖層wxml、樣式文件wxss、邏輯層js、配置文件json

全局配置

小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

• 示例

  {
      "pages": [
        "pages/index/index",
        "pages/logs/logs",
        "pages/klass/klass",
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#1aad16",
        "navigationBarTextStyle": "black"
      },
      "tabBar": {
        "color": "black",
        "selectedColor": "#129763",
        "list": [
          {
            "text": "首頁",
            "pagePath": "pages/index/index"
          },
          {
            "text": "修改班級",
            "pagePath": "pages/klass/klass"
          }
        ]
      }
      "debug": true
    }

  pages頁面路徑
  window 頁面的窗口表現
  tabBar 底部菜單欄
  debug 是否開啓debug模式，debug模式下控制檯會打印出詳細調試信息

• 效果

更多關於app.json，詳細見 官方文檔

路由

1. navigator

open-type的屬性值

navigate 跳轉到 (默認屬性)
   switchTab 以tab(菜單欄)方式切換頁面
   reLaunch 從新加載url頁面，頂部不會出現回退按鈕

• 示例

  <!-- open-type的默認值爲navigate -->
          <navigator url='/pages/personal/personal'>跳轉到修改我的信息界面</navigator>
          <!-- open-type設置屬性值爲reLaunch -->
          <navigator url='/pages/password/password' open-type='reLaunch' >跳轉到修改密碼界面</navigator>
          <!-- open-type的默認值爲switchTab -->
          <navigator url='/pages/klass/klass' open-type='switchTab'>跳轉到修改班級界面</navigator>

  open-type默認屬性，頂部會出現回退樣式：
  

  open-type設置屬性值爲reLaunch，頂部不會出現回退樣式：
  

  open-type設置屬性值爲switchTab(*要實現以tab方式切換頁面，在app.json中要配合寫上tab的配置項)：
  

2.使用API進行導航跳轉（實現按鈕點擊跳轉）

navigate對應wx.navigateTo(OBJECT) 跳轉到
switchTab對應 wx.switchTab(OBJECT) 跳轉到某個tab
reLaunch對應 wx.reLaunch(OBJECT) 從新加載

• 示例

  index.js

  index.wxml

關於 navigator 的更多屬性值可在 官方文檔查閱