189 8069 5689

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

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

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


分享名称：怎样编辑小程序页面内容？
文章分享：http://jkwzsj.com/article/cgccci.html

其他资讯