如何編輯小程序頁面內(nèi)容

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

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

編輯小程序頁面內(nèi)容的方法：

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

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

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

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

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

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

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

{
  "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": "資產(chǎn)",
        "iconPath": "images/asset1.png",
        "selectedIconPath": "images/asset2.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "我的",
        "iconPath": "images/my1.png",
        "selectedIconPath": "images/my2.png"
      }
    ]
  }
}

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