微信小程序入门1--标签与样式设置

在wxml文件中插入一张图片

<image class="avatar" src="/images/1.png"></image>

rpx可实现自适应

• iphone6下屏幕标准宽度为375px,可换算成750rpx。其他机型比例不同。

使用wxss文件分离样式

• flex容器布局,对元素进行简单列向居中布局

  .container{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

• 设置小程序全页面背景色 首先在app.json中设置导航栏的背景色

"window":{
    "navigationBarBackgroundColor": "#b3d4db"
  }

然后在页面的wxss中设置page的背景色

page{
  background-color: #b3d4db;
}

最终效果图如下