【微信小程序-原生开发】实用教程05-首页（含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片）

news2024/11/14 20:47:53

开始前，请先完成启动/欢迎/首屏广告页的开发，详见

【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页（含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)
https://blog.csdn.net/weixin_41192489/article/details/128728652

需求描述

微信小程序的首页根据业务的需求，多种多样，此处为了顺应学习内容，暂选用最简单的图文方案，后续再进阶开发更复杂的首页。

在这里插入图片描述

自定义调试模式

默认情况下，微信开发者工具使用的是调试模式为普通编译

在这里插入图片描述
此时小程序默认都会加载 app.json 的 pages 配置中的第一行路径对应的页面（当前代码对应的是教程04开发的倒计时启动页）

为了后续调试其他页面的方便，我们可以自定义新的调试模式，来指定默认加载的页面
在这里插入图片描述

之后便可将编译模式切换为调试首页

代码实现

pages\index\index.wxml

<image src="../../assets/images/2023.jpg" mode="widthFix" />
<view class="title">
  新年贺词
</view>
<view class="content">
  <view class="paragraph">
    2022年对谁来说都不容易，还好摸爬滚打，今天我们还能欢聚于此。大家都在各自的路上走着，有的随心创业了，有的机缘涨薪了，有的心态平和了，大多数呢，是收获爱情了。
  </view>
  <view class="paragraph">
    再次站上新年起点，又将邂逅新的机遇和挑战，无论你怎样看待明天，我都希望大家能继续百尺竿头，更进一步！，爱情更进一步、事业更进一步，生活也更进一步，总有更好的活法等着大家，总有更棒的聚会等着我们，2023年祝大家大展宏“兔”，前“兔”似锦，“兔”然暴富，不要错过下次的聚会哟！
  </view>
</view>
<view class="blankBar"> 
</view>

image

多了属性 mode，完整的属性值，可参考官网
https://developers.weixin.qq.com/miniprogram/dev/component/image.html

在这里插入图片描述

图文结构

封面图片
标题
内容
- 段落1
- 段落2
底部留白

底部之所以有留白区域，是为了撑开页面，避免文末的内容被底部的导航 tabBar 遮挡。

pages\index\index.wxss

样式部分比较简单，需要留意的地方见注释

image {
  /* 图片撑满屏幕宽度 */
  width: 100%;
}

.title {
  text-align: center;
  font-size: 60rpx;
  font-weight: bold;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.content {
  padding-left: 30rpx;
  padding-right: 30rpx;
  line-height: 2;
  font-size: 40rpx;
}

.paragraph{
  margin-bottom: 20rpx;
  /* 文本分散对齐 */
  text-align: justify;
}

.blankBar {
  /* 底部留白的高度需与底部导航的高度相同 */
  height: 100rpx;
}