How to edit the content of the mini program page?

How to edit the content of the mini program page: First, right-click pages in the editing area and select New Directory to create a folder; then right-click the folder, select New Component, and enter the file name; finally open [app. json] file and edit the navigation bar.

How to edit the content of the mini program page:

1. First of all, you You need to consider how many large pages your home page will have. Here, let’s use my small Demo as a sample reference. My home page is divided into three large pages, so I will create two more pages, including those after the project is successful. There is an index interface, with a total of three interfaces

(PS (operation process): Right-click pages and select New Directory to create a folder, then right-click the folder and select New Component, and enter the file name. , of course, there are four files in the new Component here---js, json, wxml, wxss. In addition to this direct creation, you can also manually create the files one by one. However, in the js file there is const app = getApp(); and page({}), otherwise an error will be reported or some methods in app.js cannot be called.)

2. At this point, it’s time to edit the homepage, here I am The home page has a bottom navigation bar, so look down:

Open the app.json file (PS: It is recommended that a novice like me should read the official introduction to the code structure of the mini program. ):

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

After opening it, start editing the navigation bar. Look at the code:

(Note: Remember to delete all the comments below when using it. They cannot be used in app.json. There are comments, otherwise an error will be reported. My comments are just for everyone's convenience to understand. The reason for the error is quite unexpected. It took me several attempts to find out.)

{
  "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"
      }
    ]
  }
}

Related learning recommendations ：

WeChat Mini Program Development Tutorial

The above is the detailed content of How to edit the content of the mini program page?. For more information, please follow other related articles on the PHP Chinese website!