1. 程式人生 > >微信小程式開發教程(六)配置——app.json、page.json詳解

微信小程式開發教程(六)配置——app.json、page.json詳解

全域性配置:app.json

  微信小程式的全域性配置儲存在app.json檔案中。開發者通過使用app.json來配置頁面檔案(pages)的路徑、視窗(window)表現、設定網路超時時間值(networkTimeout)以及配置多個切換頁(tarBar)等。

  首先看一個典型的全域性配置app.json檔案

複製程式碼
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    
"navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tarBar": { "list": [{ "pagePath":"pages/index/index", "text": "首頁" },{ "pagePath": "pages/logs/logs", "text": "日誌" },{ "pagePath": "pages/demo/demo", "text": "demo" }] },
"networkTimeout": { "request": 20000, "connectSocket": 20000, "uploadFile": 20000, "downloadFile": 20000 }, "debug":true }
複製程式碼

  全域性配置項及描述如下表:

  

  1.pages配置項

  接受一個數組,每一項都是字串,來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔名】資訊。

  pages配置項要注意三點:

  1)陣列的第一項用於設定小程式的初始頁面。

  2)小程式中新增/減少頁面,都需要對pages陣列進行修改。

  3)檔名不需要寫檔案字尾。小程式框架會自動去尋找路徑.json、.js、.wxml、.wxss這四類檔案進行整合。

   2.window配置項

  用於設定小程式的狀態列、導航條、標題、視窗等物件的顏色、背景色、內容屬性,非必填配置項。沒有配置時將使用預設值。window可配置的物件見下表。

  

  注:HexColor為十六進位制顏色值型別,如“#ff00ff”

  3.tarBar配置項

  小程式可以是多標籤頁切換的應用,需要通過tarBar配置項來指定標籤頁的表現,及標籤頁切換時所顯示的對應頁面。

  

  tarBar配置項接受多個物件的設定,其中的物件list是一個數組,用於配置標籤頁。最少配置2個、最多配置5個,標籤頁按陣列的順序排序。當設定 position 為 top 時,將不會顯示 icon。

  其中list接受陣列值,陣列中的每一項也都是一個物件,其屬性值如下:

  

  

  4.networkTimeout配置項

  networkTimeout配置項用於設定各種網路請求物件的超時時間,非必須配置項。可設定的網路請求超時的相關物件有request、connectSocket、uploadFile、downloadFile。超時的單位均為毫秒。這些超市若不設定,則預設使用作業系統核心或遵循伺服器WebServer的設定值。

  

  5.debug配置項

  debug配置項用於開啟開發者工具的除錯模式,他接受一個boolean值(預設是false)。開啟後,頁面(page)的註冊、頁面路由、資料更新、事件觸發等除錯資訊將以info的形式,輸出在“除錯”功能的console面板上。

  注意:正式釋出時應當關閉此配置項開關。

頁面配置:page.json

除了全域性的app.json配置外,還可以用.json檔案對小程式專案中的每一個頁面進行配置,但只能設定本頁面的window配置項的內容,頁面.json檔案中的window配置值將覆蓋app.json中的配置值。

  

相關推薦

程式開發教程配置——app.jsonpage.json

全域性配置:app.json  微信小程式的全域性配置儲存在app.json檔案中。開發者通過使用app.json來配置頁面檔案(pages)的路徑、視窗(window)表現、設定網路超時時間值(networkTimeout)以及配置多個切換頁(tarBar)等。  首先看一

程式學習筆記檔案上傳下載

(以上傳圖片為例) 後臺上傳介面Upload.php:(tp5) <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上傳

基於java的程式的實現使用者視訊上傳的前後端開發

1.使用者上傳視訊功能需求分析 使用者在登入之後可以在個人資訊頁面點選上傳視訊按鈕,會讓使用者在本地選擇一段視訊進行上傳,視訊不能過長,選擇好後,使用者會跳轉到選擇背景音樂的介面,可以選擇為該視訊加上一段背景音樂,並且可以對該視訊做相關描述,然後點選上傳視訊按鈕,完成視訊上傳。 2.

程式開發之大神之路最全程式開發教程視訊+精品文章

最新小程式商城類開發教程: 這兩天微信總是放大招,小編先把這兩天最新的教程放在最上面,方便大家預覽: 視訊教程 【新手入門】線上小程式開發這開

程序開發教程視圖層——.wxml

span hid 處理 路徑 strong 一般來說 emp 條件 頁面數據   框架的視圖層由WXMKL(WeiXin Markup language)與WXSS(WeiXin Style Sheet)編寫,由組件進行展示。   對於微信小程序而言,視圖層就是所有.wxm

程序開發教程視圖層——.wxss

hone mnt 而且 padding 移動 圖層 組成 特性 -1   WXSS是一套樣式語言,用於描述WXML的組件樣式。   官方文檔表示,WXSS的選擇器目前支持(“.class”、“#id”、“elemnt”、“element,element”、“::after”

【轉載】程式-開發入門

微信小程式已經火了一段時間了,之前一直也在關注,就這半年的發展來看,相對原生APP大部分公司還是不願意將主營業務放到微信平臺上,以免受制於騰訊,不過就小程式的應用場景(用完即走和二維碼分發等)還是很值得我們學習的,技術上面如果瞭解React的話,會發現他們在元件化上面有很多雷同之處。說白了,小程式就是基於微信

程式開發記錄位址列傳參之true和false的坑

先看看小程式位址列傳參的方法,如下 wxml: <view class="weui-cells weui-cells_after-title" wx:if="{{isNewUser}}"> <navigator url="../addres

程式學習筆記----實現簡單的文章列表圖文列表效果

寫這個之前我在網上搜了一下,想要先找一個合適的樣例對著寫一下,這樣還簡單一些,但是找了找沒有找到我心裡面比較合適的,所以乾脆就直接自己寫一下,沒有做什麼過多的修飾,實現起來還是很簡單的。 首先來上一下效果圖: 基本就是這樣的簡單的圖文效果,程式碼也非常簡單,如果有標題

程式-開發入門

微信小程式已經火了一段時間了,之前一直也在關注,就這半年的發展來看,相對原生APP大部分公司還是不願意將主營業務放到微信平臺上,以免受制於騰訊,不過就小程式的應用場景(用完即走和二維碼分發等)還是很值得我們學習的,技術上面如果瞭解React的話,會發現他們在元件化上面有很

程式開發入門

 小程式學習入門--(一) 最近自己學習微信小程式的過程當中自己總結出來的知識點,我會不斷地更新和完善! 小程式的開發工具 一臺電腦 熟悉HTML、CSS、JS基本語法

程式開發記錄頂部導航欄切換實現

微信小程式實現頂部導航切換效果可用swiper來實現,效果如下: 程式碼如下: WXML: <view class="page"> <!--頂部導航欄--> <view class="swiper-tab"> <vi

程式學習筆記tabBar

這是簡單的tabBar樣式 在app.json中配置下tabBar即可,注意tabBar至少需要兩個最多五個Item選項 "tabBar": { "bor

程式開發MAP地圖

     在建立MAP(地圖)前,請各位小夥伴們認真的去了解微信小程式開發的說明。https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 瞭解完MAP(地圖)裡的屬性之後,接下來我們就來建立一個

程式開發基礎配置」與「邏輯層」

微信小程式作為微信生態重要的一環,在實際生活、工作、商業中的應用越來越廣泛。想學習微信小程式開發的朋友也越來越多,本文將在小程式框架的基礎上就微信小程式專案開發所必需的基礎知識及語法特點進行了詳細總結和闡述,包括配置、函式、語法、事件及其處理、資料繫結、模組、樣式等。想開發小程式,這些內容是必須掌握的。 全

程式學習筆記表單提交PHP後臺資料互動

【form表單提交】 form.wxml: <form bindsubmit="formSubmit" bindreset="formReset"> <view> 暱稱:<input type="text" name="nic

基於java的程式的實現視訊首頁的前後端開發

1.效果演示 2.編寫分頁查詢全部視訊的介面開發 1.需求分析 該介面會查詢資料庫中全部的視訊內容,因為視訊內容過多,要採用分頁查詢,這裡我們使用Pageable對查詢結果進行分頁處理,另外,在前端顯示視訊的內容時候還需要額外的顯示使用者的頭像和暱稱資訊,所以在進行視訊列表

基於java的程式的實現使用者個人資訊程式開發

1.個人資訊頁面展示 2.顯示個人資訊功能 1.需求分析 在該頁面首先需要在載入完畢後去呼叫後端的查找個人資訊的介面,並將返回的值回顯到個人資訊頁面上 2.js程式碼的編寫 onLoad:function(params){ var me=this;

基於java的程式的實現使用者個人資訊相關介面開發

1.查詢使用者個人資訊介面開發 1.需求分析 需要通過前端傳來的使用者的userid去資料庫中進行查詢,並將查詢到的物件封裝為usersVo返回給前端 dao層程式碼 public interface UsersDao extends JpaRepository<Use

程式入門教程附原始碼

五分鐘上手-微信小程式 1:用沒有註冊過微信公眾平臺的郵箱註冊一個微信公眾號, 申請帳號 ,點選 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根據指引填寫資訊和提交相應的資料,就可以擁有自己的小程式帳號。註冊完成之後開始登入。