android 小 程序图标 手机小程序界面

文章目录

• 主界面设计

• 一、主界面样式
• 二、app.json
• 三、app.wxss
• 四、跳转页面

• （1）wxml文件
• （2）js文件

• 总结

主界面设计

一、主界面样式

这里指的是一点进小程序的界面，应该在

这些里面设计，设计如下图所示界面

二、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显示的地址去。

总结

有了这些至少页面是搭起来了，剩下的就是要你自己进行具体设计了，格式啥的同上，欢迎留言。