移动软件开发-实验1

一、实验内容

1. 实验目的

本实验利用微信开发者工具完成了一个简单的小程序首页。通过实验熟悉微信小程序项目的基本目录结构，掌握 WXML 页面结构、WXSS 页面样式、JavaScript 页面逻辑以及数据绑定和事件处理等基础知识。

2. 项目结构

本项目的主要文件和作用如下：

miniprogram-2/
├── app.js                 
├── app.json              
├── app.wxss              
├── pages/index/
│   ├── index.js           
│   ├── index.json         
│   ├── index.wxml         
│   └── index.wxss         
├── image/                 
├── project.config.json    
└── sitemap.json

3. 实验过程

（1）编写首页结构

在 pages/index/index.wxml 中使用 view、image 和 button 组件，依次显示问候文字、本地图片和交互按钮。文字部分通过双花括号语法绑定页面数据：

<view class="title">hello {{world}}</view>
<image class="img"
       src="/image/ChatGPTImage20250825-01_56_50.jpg"
       mode="aspectFit">
</image>
<button type="primary" bindtap="onTap">点击</button>

（2）实现数据绑定和按钮交互

在 pages/index/index.js 中，将 world 的初始值设置为 girl。用户点击按钮时，程序判断当前值，并使用 this.setData() 在 girl 和 boy 之间切换：

Page({
  data: {
    world: 'girl'
  },
  onTap() {
    if (this.data.world === 'girl') {
      this.setData({
        world: 'boy'
      })
    } else {
      this.setData({
        world: 'girl'
      })
    }
  }
})

由于 WXML 中的 {{world}} 与页面数据建立了绑定，调用 setData() 后，界面会自动更新，不需要手动操作页面节点。页面初始显示 hello girl，第一次点击按钮后显示 hello boy，再次点击则恢复为 hello girl，可以反复切换。

（3）设置页面样式

在 pages/index/index.wxss 中设置标题和图片的样式。标题采用红色、20 像素字号并居中显示；标题和图片下方均设置间距。图片使用 rpx 作为尺寸单位，以适应不同宽度的移动设备屏幕。

.title {
  color: red;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30rpx;
}

.img {
  width: 800rpx;
  height: 300rpx;
  margin-bottom: 30rpx;
}

二、问题总结与体会

1. 遇到的问题及解决方法

页面数据修改后如何同步到界面。 最初容易按照普通 JavaScript 的思路直接修改变量，但微信小程序的视图层与逻辑层相互分离，直接赋值不能保证视图立即更新。实验中通过 this.setData({ world: ... }) 修改页面数据，使绑定了 {{world}} 的文字自动重新渲染。
按钮点击事件如何与逻辑函数关联。 在 WXML 中使用 bindtap="onTap" 绑定事件，并在页面的 Page 对象中定义同名的 onTap() 方法，解决了用户操作与页面逻辑之间的连接问题。

2. 收获与体会

通过本次实验，我对微信小程序“配置、结构、样式、逻辑”四部分之间的关系有了直观认识：`

详见仓库 https://github.com/xkiana/miniprogram1