怎样编辑小程序页面内容？

编辑小程序页面内容的方法：首先在编辑处右击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：建议像我这样的小白呢还是看一下官方的小程序代码构成介绍比较好）：

iWebShop开源商城系统

iWebShop是一款基于PHP语言及MYSQL数据库开发的B2B2C多用户开源免费的商城系统，系统支持自营和多商家入驻、集成微信商城、手机商城、移动端APP商城、三级分销、视频电商直播、微信小程序等于一体，它可以承载大数据量且性能优良，还可以跨平台，界面美观功能丰富是电商建站首选源码。iWebShop开源商城系统 v5.14 更新日志：新增商品编辑页面规格图片上传优化商品详情页面规格图片与主图切

下载

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

相关学习推荐：微信小程序开发教程