一、实验内容1. 实验环境github链接https://github.com/qiqiqisi/ouc-mobile-software-development本次实验在 Windows 系统下完成使用微信开发者工具 Stable 2.01.2510260 进行小程序的创建、编写和调试。登录开发者工具后先熟悉了小程序项目的创建入口和基本界面。2. 使用快速启动模板创建小程序首先创建第一个项目first_test。创建时使用测试号后端服务选择“不使用云服务”并选择官方的JS-基础模板。项目创建成功后开发者工具自动生成了pages、app.js、app.json、app.wxss等文件并能够直接在模拟器中运行。接着对模板项目进行简单修改。先在index.wxml中重新组织页面内容并使用{{motto}}将 JavaScript 中的数据绑定到页面上。然后在index.js的data中修改motto的内容并增加count变量用来记录按钮的点击次数。之后编写addCount()方法。每点击一次按钮就通过setData()将count加 1页面中的点击次数也会同步变化。最后在index.wxss中设置标题、正文和点击次数的字号、间距等样式使页面显示更加清楚。修改完成后页面可以正常显示标题、点击次数、按钮和文字并且点击按钮后数字会不断增加。通过这一部分我初步理解了WXML、WXSS和JavaScript的基本作用WXML用来描述页面结构WXSS用来设置页面样式JavaScript用来保存数据和处理交互。3. 不使用模板创建小程序第二部分重新创建项目second_test。这次同样使用测试号并选择“不使用云服务”但模板选择改为“不使用模板”。在index.wxml中添加一段文本和一个按钮。文本通过{{message}}读取 JavaScript 中的数据按钮通过bindtapchangeText绑定点击事件。最开始在index.js中将message设置为Hello World。点击按钮后changeText()使用setData()将文字修改为Hello WeChat。为了让按钮再次点击时能够恢复为Hello World又增加了一个flag变量。flag0时显示Hello World点击后将flag改为 1 并显示Hello WeChat再次点击时把flag改回 0从而实现两种文字之间的反复切换。在index.wxss中设置页面排列方式、文字大小、间距和按钮宽度使文字和按钮的布局更加清楚。至此不使用模板创建的小程序可以正常运行并且按钮能够在Hello World和Hello WeChat两种文字之间反复切换。二、问题总结与体会实验中主要遇到的问题是最开始按钮只能把Hello World修改成Hello WeChat再次点击时文字不会恢复。后来增加了flag变量用 0 和 1 记录当前状态再通过if...else判断当前状态实现了两种文字的反复切换。通过本次实验我对微信小程序的基本结构有了初步认识。WXML主要负责页面内容WXSS负责页面样式JavaScript负责数据和点击事件使用setData()修改数据后页面内容也会同步更新。相比直接使用模板从“不使用模板”开始编写第二个小程序让我更清楚地理解了这些文件之间的关系。