一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第26天，点击查看活动详情。

前言

最近做一个大创，要做一个类似商城的小程序，我会把做这个小程序的历程以及遇到的问题以及解决方案分享出来，希望大家感兴趣。项目本身的重点不是小程序，所以程序不会很复杂。

首页

设计给我的初稿就是弄一张图上去，图上有一些按钮似的东西可以点击。当时我的想法就是弄几个透明的按钮在图片上方，这样就可以点击图片的某个位置，跳转到指定页面。

图片铺满整个页面

首先要解决的问题便是让图片铺满整个页面，并且做到适应不同大小的屏幕。我采用了mode为scaleToFill的方式

缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

<view class="bgImg">
  <image src="cloud://cloud1-3gt2ek1d2a522e60.636c-cloud1-3gt2ek1d2a522e60-1311415292/images/bgImg.png" mode="scaleToFill"></image>
<view>

.bgImg {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.bgImg > image {
  display: block;
  width: 100%;
  height: 100%;
}

采用这种方式，可以让图片完全填充满整个页面，并且适应不同大小的屏幕。

修改button宽高

在弄button的时候，无论我怎么改变button的宽高，都不起效果。我的解决方案是采用！important的方式

button {
  height: 500rpx !important;
  width: 90rpx !important;
  z-index: 10;
  opacity: 0;
}

定位适应不同尺寸屏幕

透明的按钮需要与图片上的按钮重叠，但是换了设备后，尺寸会发生改变。这时使用不同的尺寸就很重要了。我使用的时rpx这个单位，可以解决适应的问题。

Uncaught ReferenceError: __wxConfig is not define?

如果大家遇到了这个问题，不要慌。大概率时app.json出现了一些错误，及时发现解决它！