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

Posted 2023-01-26

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

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

需求描述

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

自定义调试模式

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

此时小程序默认都会加载 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;

添加本地图片

范例中的图片是放在项目中的，按以下步骤操作即可：

1. 清空 assets 文件夹（创建项目时遗留有模板图片）
2. 在 assets 文件夹中新建文件夹 images
3. 将图片 ​​2023.jpg​​ 放入到 images 文件夹中