标签：index 微信 app 程序 文档 导航 pages 页面

微信小程序——常用功能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;
}

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

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

标签：index,微信,app,程序,文档,导航,pages,页面
来源： https://blog.csdn.net/m0_51592186/article/details/110184191

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。