### [怎样编辑小程序页面内容？](https://www.prosaas.cn/article/16569)

**Published:** 2020-07-22T03:21:07

**Author:** 5201314

**Excerpt:** 编辑小程序页面内容的方法：首先在编辑处右击pages选择新建目录创建个文件夹；然后再右击该文件夹选择新建Com…

> 编辑小程序页面内容的方法：首先在编辑处右击pages选择新建目录创建个文件夹；然后再右击该文件夹选择新建Component，并输入文件名字；最后打开【app.json】文件，并操作导航栏的编辑即可。

![](https://img.php.cn/upload/article/000/000/052/5f17af9523fd6422.jpg)

**编辑小程序页面内容的方法：**

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

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

以上就是怎样编辑小程序页面内容？的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---