移动软件开发实验1一、实验内容一安装开发工具二创建hello world小程序1.index.wxml2.index.wxss3.index.js三运行结果二、问题总结与体会一问题总结二实验体会一、实验内容一安装开发工具1.下载安装自己电脑对应系统的微信开发者工具2.新建小程序到对应的文件夹二创建hello world小程序1.index.wxml1view小程序容器标签等价于网页里的用来包裹文字、组件划分布局区块。class“title”给这个 view 设置样式类名 title 可以给它设置字体颜色、大小等样式。{{wording}}绑定 js 文件里 data中定义的数据。2image小程序图片标签。mode“widefix”保持图片宽高比使图片宽度铺满容器。3src“…/…/img/apple.jpg”src图片资源地址…/ 代表向上返回一级文件夹…/…/ 向上返回两级目录4button小程序按钮组件。tap小程序里的点击触摸事件等价网页bind事件绑定关键字“onClick”绑定的事件函数名需要在 index.js 的 Page 中定义 onClick(){} 方法点击按钮后就会执行这个 js 函数。2.index.wxss1page: 小程序内置根选择器代表整个页面可视区域。2display: flex;开启弹性布局flex-direction: column;设置内部元素垂直从上往下排列column上下排你现在需要的文字 → 图片 → 按钮依次垂直摆放row横向左右并排3justify-content: center;控制主轴方向居中因为上面设置了 column主轴是垂直方向所以这条实现垂直居中上下居中4align-items: center;控制交叉轴居中5width: 100%;page 容器宽度占满手机屏幕全部宽度6margin: 0;清除 page 默认自带外边距防止四周出现空白留白3.index.js1data: { wording:‘girl’ }定义变量 wording初始值是 girl2onClick:function():onClick自定义点击事件函数名对应 wxml 按钮 bind:tap“onClick”function()代表这是一个可执行函数点击按钮后大括号内代码运行3if(this.data.wording ‘girl’)this.data.wording读取 data 里当前wording的值严格相等判断值和类型完全一样才成立4this.setData({ wording: ‘boy’ })修改 data 中的变量并且自动更新 wxml 页面视图三运行结果初始状态点击按钮后二、问题总结与体会一问题总结数据更新误区直接通过 this.data.wording ‘boy’ 赋值修改数据页面不会自动刷新必须使用 this.setData() 方法修改数据才能同步更新页面视图。Flex 布局居中失效使用 flex 实现页面垂直居中时若遗漏height:100vhpage 容器无法占满屏幕高度justify‑content: center垂直居中效果会失效只能实现水平居中。代码语法漏洞编写 js 逻辑时容易漏写引号、大括号、分号例如字符串引号写反、少写闭合大括号会直接导致小程序编译报错页面无法运行。二实验体会 通过本次实验我初步熟悉了微信开发者工具的使用理解小程序wxml、wxss、js三类文件各自的分工wxml 负责页面结构搭建wxss 完成页面样式布局js 处理业务逻辑与数据交互。掌握了 flex 弹性布局实现页面元素水平、垂直居中的方法理解插值语法{{}}如何实现页面与 JS 的数据绑定学会使用bind:tap绑定点击事件利用setData()完成数据双向更新实现点击按钮切换文本的交互效果。 本次实验为后续移动软件开发的学习打下基础也体会到前端开发结构、样式、逻辑三者相互配合的开发思想。