微信小程序——常用功能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图标的方法,大家自行查询辨认一下。
3.将tabbar的图标图片放置在图片文件夹中,用于调用,分别是点击前和点击后的效果图片。
给大家看下我的代码和显示的效果
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;
}
界面样式基本设置完成,大家按照自己的想法试试吧。
如果提前做好产品图照着做,会发现更多问题,去开发文档里查询解决,可以有更大的提升!