怎樣編輯小程式頁面內容？-小程式開發-PHP中文網

怎樣編輯小程式頁面內容？

coldplay.xixi

發布： 2020-07-22 11:21:07

原創

8482 人瀏覽過

編輯小程式頁面內容的方法：先在編輯處右鍵點選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"
      }
    ]
  }
}

登入後複製

相關學習推薦：微信小程式開發教學

以上是怎樣編輯小程式頁面內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！