微信小程序开发常用技巧（1）——修改page背景色

很多初学者都有一个需求：我们想要修改一个page的背景颜色。

在这里就利用开发者工具创建的这个小Demo来说吧。

页面如下：



代码如下：

<!--index.wxml-->
<view class="container">
<view  bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

当我们想要修改page背景颜色时，首先可能会想到最外层veiw的class属性userinfo，但是我们对其进行背景颜色设置后，代码在这里不再展示，发现界面变成了这个样子，这时页面如下：



这并不是我们想要的效果。那么应该怎么设置呢？其实很简单，在对应的wxss文件中对page进行设置就可以达到我们想要的效果。

代码如下：

/**index.wxss**/
page{
background-color: lightcyan;
}

这时页面效果如下，达到了我们想要的效果：



代码很简单，快去亲自试试效果吧。