3.0 小程式開始開發及基本設定

• 微信開發文件：https://developers.weixin.qq.com/miniprogram/dev/
• 下載微信開發者工具
  
  • 下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
• 新建專案
  
  • 
  • 注：有APPID記得填寫上，沒有就點級小程式，記得勾上普通啟動模板；

• 基本配置

  • 配置說明文件：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
  • 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
    }

  • app.json 配置項列表

    • 屬性         型別    必填  描述
    • pages        String Array 是   設定頁面路徑
    • window      Object    否   設定預設頁面的視窗表現
    • tabBar       Object    否   設定底部 tab 的表現
    • networkTimeout  Object    否   設定網路超時時間
    • debug     Boolean     否   設定是否開啟 debug 模式

  • pages 設定頁面路徑

    • 接受一個數組，每一項都是字串，來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔名】資訊，陣列的第一項代表小程式的初始頁面。小程式中新增/減少頁面，都需要對 pages 陣列進行修改。
    • 例：

    {
      "pages":[
        //"pages/頁面資料夾名/頁面.wxml名",
        "pages/index/index",
        "pages/logs/logs"
      ]
    }

  • window 用於設定小程式的狀態列、導航條、標題、視窗背景色。

    • 例：

    "window":{
        "backgroundTextStyle":"light",//預設：dark ，下拉 loading 的樣式，僅支援 dark/light
        "navigationBarBackgroundColor": "#f1f1f1",//預設：#000000， 導航欄背景顏色，如"#000000"
        "navigationBarTitleText": "京東",//   導航欄標題文字內容
        "navigationBarTextStyle":"black",//預設：white 導航欄標題顏色，僅支援 black/white
        "backgroundColor":"#f1f1f1",//預設：#ffffff，   視窗的背景色
      },

  • tabBar

    • 如果小程式是一個多 tab 應用（客戶端視窗的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。
    • Tip：
      1.當設定 position 為 top 時，將不會顯示 icon
      2.tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按陣列的順序排序。
    • 例：
      
      -

    "tabBar": {
      "position":"bottom",//預設：bottom，  可選值 bottom、top
      "borderStyle":"white",//預設：black， tabbar上邊框的顏色， 僅支援 black/white
      "color":"#f10215",//tab 上的文字預設顏色
      "selectedColor": "#f10215",//tab 上的文字選中時的顏色
      "backgroundColor":"#ffffff",//tab 的背景色
      //tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab
      "list": [
        {
          "pagePath": "pages/index/index", //頁面路徑，必須在 pages 中先定義
          "text": "首頁", //tab 上按鈕文字
          "iconPath": "images/index.png", 
            //圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當 postion 為 top 時，此引數無效，不支援網路圖片
          "selectedIconPath": "images/index_b.png" 
            //選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當 postion 為 top 時，此引數無效
        },
        {
          "pagePath": "pages/category/category",
          "text": "分類",
          "iconPath": "images/category.png",
          "selectedIconPath": "images/category_b.png"
        },
        {
          "pagePath": "pages/cart/cart",
          "text": "購物車",
          "iconPath": "images/cart.png",
          "selectedIconPath": "images/cart_b.png"
        },
        {
          "pagePath": "pages/user/user",
          "text": "我的",
          "iconPath": "images/user.png",
          "selectedIconPath": "images/user_b.png"
        }
      ]
    }

  • 具體配置請看開發手冊：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html