姓名：*** 学 ：***********
?
| 姓名和学 th> | ***，************** |
|---|---|
| 本实验属于哪门课程td> | 中国海洋大学22夏《移动软件开发》 |
| 实验名称td> | 实验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文件中的getMyInfo函数的代码，是获取到的信息更新到动态数据中。此时效果图如下：
2.5完整代码展示
app.json文件的完整代码如下：
WXML文件的完整代码如下：
WXSS文件的完整代码如下：
JS文件的完整代码如下：
三、程序运行结果
四、问题总结与体会
在进行页面配置过程中，在删除了index.js中的全部代码后，无法按照实验步骤找到page函数，经过对弹出的各个选项尝试之后发现，只是开发工具上的图标及显示与实验要求中的截图展示的不同，最后成功补全page函数。
在插入图片时发现插入的图片无法正常显示， 通过访问代码中的链接发现，代码指向的路径为index/images/logo.png，在改变了图片存放的位置后成功显示出图片
在进行逻辑实现时， 错如下：
检查发现是上一个系统补全的函数后无逗 ，添加后正常运行。
通过本次实验，初步了解了小程序制作的一些方法，以及一些代码的作用，通过对这些代码的实操，基本掌握了对小程序初始界面文本图片等页面布局的设计，以及实现了动态数据的获取。
文章知识点与官方知识档案匹配，可进一步学习相关知识小程序技能树首页概览3895 人正在系统学习中
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！