微信小程序-界面相关问题

新手想做一个时钟的小程序，在排版布局时遇到的一些问题如下：

1.背景问题：

• 用纯色背景

Page {
  background-color: rgb(0, 0, 0);
}

把上面的代码放入wxss里即可。

• 用图片背景

Page {
  background-image: url(图片的base64码):
}

在这里附一个转换链接：https://base64.us/

2.微信界面问题：

• 上标签

  "window":{
    "navigationStyle":"custom"
  },

在app.json里添加"navigationStyle":"custom"

“custom”为隐藏上标签界面

“default”为显示上标签界面

• 右上胶囊导航

  "window":{
    "navigationBarTextStyle":"white",
  },

此代码可以设置右上胶囊导航的颜色，目前只支持“white”和“black”。

3.屏幕旋转

{
  "pageOrientation":"auto"
}

在.json文件中以上代码设置


 

“auto”为自动

“landscape”为锁定横屏

“portrait”为锁定竖屏

4.布局问题

• 居中显示

.imagesize{
  display:flex;
  justify-content: center;
 }

 布局中的问题大多都可以用css解决。

 

 

接下来要去学习css来实现更加丰富的界面布局了。