微信小程序——常用功能3：根据微信开放文档在app.json设计底部导航、小程序背景等基础内容

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序——常用功能3：根据微信开放文档在app.json设计底部导航、小程序背景等基础内容，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3721字，纯文字阅读大概需要6分钟。

内容图文

微信小程序——常用功能3：根据微信开放文档在app.json设计头部导航、标题、底部导航、全局背景颜色、字体颜色等基础内容

小程序的基本设置有点让人头疼，如果前期的设计模型图没有做而直接开整，看着白白的初始页面，基本没有开整的热情了。
今天在这里整合一下初始页面的设置顺序，今后从头开发小程序时候就能更快捷，并且更有头绪了。
同时可以让新手朋友更快捷地入门（我当时疫情期间就弄这个了，搞了半年才了解的差不多），顺便带新手朋友学会看微信开放文档进行开发。

微信开放文档：微信开放文档链接跳转

首先 在开发者工具新建页面

如何新建小程序页面，我的第一篇文章有：微信小程序云开发——常用功能1：使用云函数获取用户openid，并使用1.setData加载到视图层 和2.setStorage缓存到本地

我给这一页命名为set，现在里边啥都没有。

打开微信开放文档，配置小程序>全局配置

我把下边的页面配置直接放到“window”里，给大家注释一下每一个功能的作用。不要直接复制，注释内容在json文件中会报错，大家可以待会去下边我配置好的代码中复制查看效果。
app.json:

{
  "pages": [ //往里边放page页面，第一个页面默认为展示页面，两个页面之间必须有','分隔，末尾不能有‘,’
    "pages/index/index", //在pages文件夹下新建index文件夹，同时放置命名为index的文件
    "pages/logs/index" //在pages文件夹下新建logs文件夹，同时放置命名为index的文件
  ],
  "window": {
    "navigationBarTitleText": "Demo" //全局页面的标题，也就是小程序的名字，如果不喜欢可以删掉
    "navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色
	"navigationBarTextStyle": "black", //导航栏标题颜色，仅支持 black / white
	"backgroundColor": "#eeeeee", //窗口的背景色
	"backgroundTextStyle": "light" //下拉 loading 的样式，仅支持 dark / light，大家后期加入下拉等功能时可以根据自己背景颜色选择这两个样式
  },
  "tabBar": { //注意，这里就是底部导航
    "list": [{ //第一个导航
      "pagePath": "pages/index/index", //第一个导航页面展示的页面
      "text": "首页" //第一个导航页面的名字
    }, {
      "pagePath": "pages/logs/index", //第二个导航展示的页面
      "text": "日志" //第二个导航页面的名字
    }]
  },
  "networkTimeout": { //各类网络的超时时间，想要了解自行在文档中查询，我删了你们随意
    "request": 10000, 
    "downloadFile": 10000
  },
  "debug": true, //开启后可以在调试界面给我们报错，当我们代码中有常见问题时给我们提示，不开的话报错信息我们很多时候看不懂
  "navigateToMiniProgramAppIdList": [ //打开另外一个小程序，下边放另一个小程序的APPID，需要的可以在文档查询
    "wxe5f52902cf4de896"
  ]
}

大家可以在开发文档查看更多相关功能来优化自己页面，非常详细。我就不直接给大家链接了，开放文档里页面总会丢失。

现在开始配置我的页面

其中
1.设置窗口颜色并不是设置全局page的页面颜色，所以需要在app.css的page{}中设置全局页面颜色和字体颜色。
2.我还从微信开放文档中通过搜索tabbar，找到了设置tabbar样式的方法和在其中加入icon图标的方法，大家自行查询辨认一下。

给大家看下我的代码和显示的效果
app.json:

{
  "pages": [
    "pages/set/set",
    "pages/index/index",
    "pages/first/first",
    "pages/first/shouquan"
  ],
  "window": {
    "navigationBarTitleText": "八方设计",
    "navigationBarBackgroundColor": "#000000",
	"navigationBarTextStyle": "white",
	"backgroundColor": "#000000",
	"backgroundTextStyle": "dark"
  },
  "tabBar": {
    "color": "#ffffff",
    "selectedColor": "#f2f0bf",
    "borderStyle": "black",
    "backgroundColor": "#000000",
    "list": [
      {
        "selectedIconPath": "images/index_select.png",
        "iconPath": "images/index.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/set_select.png",
        "iconPath": "images/set.png",
        "pagePath": "pages/set/set",
        "text": "日志"
      }]
  },
  "debug": true
}

app.css:

page {
  /* 背景颜色 */
  background: black; 

  /* 小程序自带的默认设置 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  
  /* 字体颜色 */
  color: white;
}

界面样式基本设置完成，大家按照自己的想法试试吧。
如果提前做好产品图照着做，会发现更多问题，去开发文档里查询解决，可以有更大的提升！

我不是专业程序工作者，在这里是把我的小程序设计经验分享给大家。
如果其中有用词不当的地方，请大家留言指正，我们共同学习。
更多设计、功能的学习经验，大家也可以去我的公众号查看！
————

内容总结

以上是互联网集市为您收集整理的微信小程序——常用功能3：根据微信开放文档在app.json设计底部导航、小程序背景等基础内容全部内容，希望文章能够帮你解决微信小程序——常用功能3：根据微信开放文档在app.json设计底部导航、小程序背景等基础内容所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---