主界面设计
一、主界面样式
这里指的是一点进小程序的界面，应该在
这些里面设计，设计如下图所示界面
二、app.json
“app.json”是当前小程序的全局变量，我们使用“app.json”文件对微信小程序进行全局配置，还可以决定页面文件的路径、窗口表现、设置网络的超时时间、设置tab等。
具体介绍、解释等代码里有不少，我就不过多赘述了，具体我的页面展示所需的代码如下。
{
"pages": [
"pages/index/index",//刚点开小程序时的界面
"pages/logs/logs",//加页面
"pages/details/details",
"pages/skipe/skipe",
"pages/chats/chats",
"pages/release/release"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#61E6D7",
"navigationBarTitleText": "心语菌",//最上面的字
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#81ADA4",
"selectedColor": "#13b11c",
"backgroundColor": "#61E6D7",//下方背景颜色
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "image/主界面.jpg",
"selectedIconPath": "image/主界面.jpg",
"text": "主界面"
},
{
"pagePath": "pages/details/details",
"iconPath": "image/个人.jpg",
"selectedIconPath": "image/个人.jpg",//想要加图片就这么干，注意你图片的地址
"text": "个人中心"
}
]
},
"sitemapLocation": "sitemap.json"
}
window是窗口（比如那个小程序最上面那地方，你仔细对照一下代码就知道了）
要始终记得这是这是对整个小程序进行管理的地方，想整体进行改变那就是这里了。
如果想加页面就在最上面的那个板块加上，比如说"pages/logs/logs",加上之后刷新（编译），你就能在目录中找到相应的文件，再进行操作。
可以看到，我在这个界面上做了一个下面的主界面和个人中心界面，使用tabBar实现，用list列出，具体实现过程如上代码。
三、app.wxss
/**app.wxss**/
.container {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
button {
background: initial;
}
button:focus{
outline: 0;
}
button::after{
border: none;
}
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
这个文件里是你在前面的文件里用到的class啥的，也就是用到的一些样式，你在这里进行设计，具体和HTML的CSS差不多。
四、跳转页面
我们再来看看如何跳转页面。
我们利用按钮来跳转。
（1）wxml文件
<button style="width:32vw" class="btn2" bindtap="goTorelease">最新动态</button><!--红色样式-->
利用bindtap来确认函数，这里我们确认函数用的是goTorelease，那我们就会触发js文件里的这个函数。
（2）js文件
将这个函数加在js里的专门放函数的地方（就是找规律，注意大括号啥的）
goTorelease: function () {
wx.navigateTo({
url:'../release/release',
})
},
注意：url那里一定是两个点，不能是pages（至于为什么我也不清楚，pages跳转不了）
按了按钮之后进行跳转，跳到URL显示的地址去。
总结
有了这些至少页面是搭起来了，剩下的就是要你自己进行具体设计了，格式啥的同上，欢迎留言。