2022年夏季《移动软件开发》实验报告
姓名和学号 | 鱼小京,xxxxxxxxx |
---|---|
本实验属于哪门课程 | 中国海洋大学22夏《移动软件开发》 |
实验名称 | 实验1:第一个微信小程序 |
博客地址 | |
Github仓库地址 |
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
(实验关键步骤、代码解析、截图)
**准备工作:**注册开发者账号、下载编译器
**注册开发者账号:**搜索打开微信公众平台,点击注册小程序,进行注册(使用邮箱注册并激活)。之后会显示小程序管理界面:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tASaZGK8-1660725009248)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817130807872.png)]
**下载编译器:**在微信公众平台中,点击”小程序“并进入开发者工具界面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Z2UtZml-1660725009250)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817131120299.png)]
在下载中找到合适版本并进行下载,在这里我们使用的是稳定版:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hkWoYgQ4-1660725009250)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817131229886.png)]
安装后打开通过扫码进行登录,然后进入到小程序管理界面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38YDi7QM-1660725009250)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817131705810.png)]
可以开始进行小程序的创建过程。
**自动生成小程序:**点击管理界面中的加号可以进入到以下界面,App ID在注册时就已经生成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D5iTSyZv-1660725009250)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817131923128.png)]
App ID的获取,我们先回到微信公众平台首页,点击登陆后会进入到以下界面[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6CmrFp95-1660725009251)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817133146522.png)]
在开发中找到独有的App ID,可以复制到管理中的空格中。在开发时由于初次使用,一般不使用云开发功能。选择一个模板我们可以进入看到模拟效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gIRHM0zd-1660725009251)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817135042442.png)]
**手动创建小程序:**与自动创建过程相同,进入到开发界面。创建如图目录:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ziYNCi9b-1660725009251)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817161508434.png)]
其中images作用是放置图标,需要在文件夹中进行位置的移动使得图层保持正确。在过程中按照步骤修改相关内容,主要目的是为了实现视图的初步设计[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NjopPDvK-1660725009252)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817161924478.png)]
!(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817161810459.png)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BRnMJBpW-1660725009252)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817161743367.png)]
修改之后预览会得到一个简单的首页预览,之后进行图标更新的内容,修改函数代码得到以下界面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-exFNFlqQ-1660725009252)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817160617013.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WX236msL-1660725009252)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817160913912.png)]
三、程序运行结果
列出程序的最终运行结果及截图。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wz4ETGos-1660725009253)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220817160925850.png)]
四、问题总结与体会
描述实验过程中所遇到的问题,以及是如何解决的。有哪些收获和体会,对于课程的安排有哪些建议。
在实验中在创建images时,文件夹所处的位置是属于pages的,此时会显示图层覆盖出错,这是因为pages是首页,同时images是需要在首页上出现的图标,在硬盘文件夹中将images位置移动到与pages相同目录下即可。
在实验的过程中认识到了不同后缀的文件分别所对应的都是程序中的哪些内容,目录的包含关系中也隐藏着小程序页面的逻辑关系。
动到与pages相同目录下即可。
在实验的过程中认识到了不同后缀的文件分别所对应的都是程序中的哪些内容,目录的包含关系中也隐藏着小程序页面的逻辑关系。