如何編輯小程序頁面內容

這篇文章給大家分享的是有關如何編輯小程序頁面內容的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

編輯小程序頁面內容的方法：首先在編輯處右擊pages選擇新建目錄創建個文件夾；然后再右擊該文件夾選擇新建Component，并輸入文件名字；最后打開【app.json】文件，并操作導航欄的編輯即可。

編輯小程序頁面內容的方法：

1.首先呢，你要考慮好自己的首頁是幾個大頁面，在此呢，以我的小小的Demo做樣板參照吧，我的首頁是三大塊，所以呢我要再創建兩個頁面，包含項目成功之后就有index界面，共三個界面

（PS（操作過程）：右擊pages選擇新建目錄創建個文件夾，然后呢再右擊該文件夾選擇新建Component，輸入文件名字即可，當然這里的新建Component里面有四個文件---js、json、wxml、wxss，除了這種直接創建呢你也可以一個一個手動創建文件不過在js文件里的有const app = getApp();和page({}),否則會提示報錯或者調用不了app.js中的一些方法。）

2.到此呢，就要編輯首頁了，我這里的首頁呢是有底部導航欄的的，所以往下看吧：

打開app.json文件（PS：建議像我這樣的小白呢還是看一下官方的小程序代碼構成介紹比較好）：

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-配置

打開之后就開始操作導航欄的編輯了，看代碼：

（注意：用的時候記得把下面的注釋全都刪了，在app.json中不能有注釋，否則會報錯，我的注釋只是為了大家方便理解而已，報錯原因還挺讓你出乎意料，我也是試了幾次才發現。）

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/asset/asset",
    "pages/personal/personal"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",　　　　"navigationStyle": "custom"　　　　　　// 自定義頭部導航時添加
  },
  "sitemapLocation": "sitemap.json",
  "tabBar": {　　//這里的tabBar就是導航欄的編輯了
    "color": "red",　　　　//tab 上的文字默認顏色
    "selectedColor": "#1469bc",　　//tab 上的文字被選中時的顏色
    "backgroundColor": "#fff",　　//背景顏色(背景顏色的值用#的寫法來寫即16進制，普通rgb、rgba寫法不會生效，)
    "positon": "bottom",　　　　　　//導航欄放在的位置，可以不寫但默認會顯示在底部，我這里是方便大家了解。放在上遍就改成top，至于左右么，我就沒試過了，就交給各位大哥大了。
    "list": [
      {
        "pagePath": "pages/index/index",　　　　　　//頁面路徑
        "text": "首頁",　　　　　　　　　　　　　　　　 //導航欄顯示的文字
        "iconPath": "images/home1.png",　　　　　　 //默認展示的圖片
        "selectedIconPath": "images/home2.png"　　 //被選中時展示的圖片(我這里是為了有一個顏色差)
      },
      {
        "pagePath": "pages/asset/asset",
        "text": "資產",
        "iconPath": "images/asset1.png",
        "selectedIconPath": "images/asset2.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "我的",
        "iconPath": "images/my1.png",
        "selectedIconPath": "images/my2.png"
      }
    ]
  }
}

感謝各位的閱讀！關于如何編輯小程序頁面內容就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！