2022夏季《移动软件开发》实验一实验报告

姓名：***  学号：***********

​

姓名和学号？	***，**************
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验1：第一个微信小程序

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.自动生成小程序

1.1项目创建

小程序项目填写效果如上图

 

小程序项目开发页面如上图

2.手动创建小程序

2.1项目创建

小程序项目填写效果如上图

2.2页面配置

具体操作如下：

（1）将app.json文件内 pages属性中的“pages/logs/logs”删除﹐并删除上一行末尾的逗号。

（2）保存当前修改。

（3）删除utils文件夹及其内部所有内容。

（4）删除pages文件夹下的 logs目录及其内部所有内容。

（5）删除index. wxml 和 index. wxss 中的全部代码。

（6）删除index.js中的全部代码,并且输人关键词“page”找到第二个选项按回车键让其自动补全函数(如图2-9所示)。

（7）删除app. wxss 中的全部代码。

（8）删除 app.js中的全部代码,并且输入关键词“app"找到第一个选项按回车键让其自动补全函数.

此时模板代码修改完毕。

2.3视图设计

通过对app.json中代码的修改，实现了对导航栏界面的自定义，修改后的代码及效果图如下：

通过对index.wxss和index.wxml中代码的修改实现了对页面的基本设计，相关代码和效果图如下：

 

 

通过创建images文件夹并向其中存储png图片，并在wxml和wxss页面修改代码，实现了对图片的插入，此时小程序页面效果如下：

 

2.4逻辑实现

在WXML页面修改组件的代码，并在JS页面追加函数，实现在单击按钮后Console控制台能输出一段数据。

 

在WXML页面修改和组件的代码，将图片来源和文本数据做成动态数据，同时修改JS文件，追加动态数据的值，使其仍然显示原先的内容，修改后小程序效果图如下：

修改JS文件中的getMyInfo函数的代码，是获取到的信息更新到动态数据中。此时效果图如下：

 

2.5完整代码展示

app.json文件的完整代码如下：

WXML文件的完整代码如下：

WXSS文件的完整代码如下：

JS文件的完整代码如下：

三、程序运行结果

四、问题总结与体会

在进行页面配置过程中，在删除了index.js中的全部代码后，无法按照实验步骤找到page函数，经过对弹出的各个选项尝试之后发现，只是开发工具上的图标及显示与实验要求中的截图展示的不同，最后成功补全page函数。

在插入图片时发现插入的图片无法正常显示， 通过访问代码中的链接发现，代码指向的路径为index/images/logo.png，在改变了图片存放的位置后成功显示出图片

在进行逻辑实现时，报错如下：

检查发现是上一个系统补全的函数后无逗号，添加后正常运行。

通过本次实验，初步了解了小程序制作的一些方法，以及一些代码的作用，通过对这些代码的实操，基本掌握了对小程序初始界面文本图片等页面布局的设计，以及实现了动态数据的获取。