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

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

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

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

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

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

微信小程序的java中怎么解析encryptedData_css

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

微信小程序的java中怎么解析encryptedData_javascript_02


我把下边的页面配置直接放到“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"
  ]
}

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

微信小程序的java中怎么解析encryptedData_html_03

现在开始配置我的页面

其中

1.设置窗口颜色并不是设置全局page的页面颜色,所以需要在app.css的page{}中设置全局页面颜色和字体颜色。

2.我还从微信开放文档中通过搜索tabbar,找到了设置tabbar样式的方法和在其中加入icon图标的方法,大家自行查询辨认一下。

3.将tabbar的图标图片放置在图片文件夹中,用于调用,分别是点击前和点击后的效果图片。

微信小程序的java中怎么解析encryptedData_css_04

给大家看下我的代码和显示的效果
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;
}

微信小程序的java中怎么解析encryptedData_javascript_05

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