如何编辑小程序页面内容

这篇文章给大家分享的是有关如何编辑小程序页面内容的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

编辑小程序页面内容的方法：首先在编辑处右击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"
      }
    ]
  }
}

感谢各位的阅读！关于如何编辑小程序页面内容就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！