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

姓名：陈李焘 学号：20020007003

Untitled

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

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

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

二、实验步骤

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

1.1 在微信公众平台注册小程序，获取 appid

1.2 用微信开发者工具创建小程序文件

2.1 配置页面

操作如下：

删除 logs 页面
删除utils页面
初始化 index 页面和 app 页面

2.2 视图设计

（1）导航栏设计

修改app.json → window 结点的配置如下：

"window":{"navigationBarBackgroundColor": "#663399","navigationBarTitleText": "手动创建第一个小程序"},

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-grZdBcTq-1660712993105)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%203.png)]

效果如右图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ORdHExEN-1660712993106)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%204.png)]

（2）页面设计

页面代码

<!-- index.wxml -->
<view class="container"><image src="../../image/nameless-King.jpg" mode="aspectFill"></image><text>Hello World</text><button>点击获取头像和昵称</button>
</view>

/* index.wxss */
.container {height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
}
image {width: 300rpx;height: 300rpx;border-radius: 50%;
}
text {font-size: 50rpx;
}

效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GJv67gH0-1660712993107)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%205.png)]

小小修改：辅导书中给出的示例代码将 image 组件的伸缩模式设置为 widthFix 事实上，对于这类要用圆形展示的图片，用 aspectFill 更合理。

对比如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nd2q1JBs-1660712993107)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%206.png)]

（3）逻辑实现 — 实现动态展示用户头像昵称

辅导书中所写的 getUserInfo 接口已经被微信官方废弃。即

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWJvu5r7-1660712993107)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%207.png)]

该方法已经无法获取用户的个人信息，微信官方推出的 wx.getUserProfile 接口取而代之。

实现获取用户微信信息的代码如下：

<!-- index.wxml -->
<view class="container"><!-- 显示默认图片 --><image src="{{userInfo.avatarUrl == null ? '../../image/nameless-King.jpg' : userInfo.avatarUrl}}" mode="aspectFill"></image><!-- 显示默认昵称 --><text>{{ userInfo.nickName == null ? '你好' : userInfo.nickName }}</text><!-- 按钮绑定点击事件 --><button bindtap="getUserProfile">点击获取头像和昵称</button>
</view>

getUserProfile() {//   调用微信获取个人信息的接口wx.getUserProfile({desc: '用于显示个人信息',success: (res) => {this.setData({userInfo: res.userInfo})},fail: () => {wx.showToast({title: '您取消了授权',})}})},

实现效果如图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BODsQ4by-1660712993108)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%208.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EciIt3sh-1660712993108)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%209.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H7IRKYrh-1660712993109)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%2010.png)]

三、程序运行结果

列出程序的最终运行结果及截图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jaFi3gdn-1660712993110)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%208.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgIopQ0x-1660712993111)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%209.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZBPnZm3L-1660712993111)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%2010.png)]

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

问题和解决方案

在使用辅导书中提供的 getUserInfo 接口时，发现无法获取到微信头像和微信昵称，后来查阅微信官方文帝，发现getUserInfo 这个接口已经被被官方废弃了（wx.getUserInfo(Object object) | 微信开放文档 (qq.com)），取而代之的是另一个 getUserProfile 的接口。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cqM1DZOc-1660712993112)(2022%E5%B9%B4%E5%A4%8F%E5%AD%A3%E3%80%8A%E7%A7%BB%E5%8A%A8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E3%80%8B%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A%20f9790dd54d334f4088ffb6b10495f922/Untitled%2011.png)]

收获和体会

之前接触过小程序开发，也正在和同学一起开发一款小程序作为 SRDP 的项目。这次的实验比较基础，但我也有收获，例如我第一次尝试做出了当没有获取到用户的头像时，显示默认头像的功能，这个功能可以用在我的项目中；再比如我第一次初始化了 app 页面和index 页面。

建议

老师上课说，计算机压力大的原因来源于技术更新很快。我深以为然，我在入门小程序的时候，自学B站上的黑马程序员视频，这个视频是 19 年的，其中的有些技术在现在已经被淘汰了，甚至有一次，我学习他的方法写代码，改了一下午的bug才发现，这个方法已经被淘汰了。

这次的辅导书中，出现了getUserInfo 这个已经被废弃了的接口。我提议老师您可以更新一下教辅书。

OUC-移动软件开发-实验1相关推荐

OUC-移动软件开发-实验5
移动软件开发-实验5 一.实验目标模仿微信"发现"页创建列表布局学习使用Textview imageview.LinearLayout 二.实验步骤 1. 搭建 Java 环境 ...
移动软件开发实验3
移动软件开发实验3 一. 实验目标 1.掌握视频列表的切换方法: 2.掌握视频自动播放方法: 3.掌握视频随机颜色弹幕效果. 二.实验步骤 1.创建项目 ·创建页面文件 ·删除和修改文件 ·创建其他 ...
ouc 2022 移动软件开发实验五：第一个 Android 应用小程序
一.实验目标 1.安卓移动端开发环境搭建 2.编写第一个 Android 应用小程序二.实验步骤 1.安卓移动端开发环境搭建 1.1 电脑安装 jdk 创建一个英文名称的文件夹(尽量别用中文),将下 ...
OUC软件开发实验4
实验4:高校新闻网本实验来自于周文洁老师的<微信小程序开发实战>第十五章.在学习了小程序的基础知识和各类API以后,尝试独立动手创建一个小程序前端综合设计实例.我们将从零开始详解如何模仿 ...
OUC软件开发实验1
实验1:第一个微信小程序 2.1自动生成小程序 2.2手动创建小程序 2.2.1 项目创建 2.2.2 页面配置 2.2.3 视图设计 2.2.4 逻辑实现本实验来自于周文洁老师的<微信小程序 ...
OUC软件开发实验3
实验3:视频播放小程序本实验来自于周文洁老师的<微信小程序开发实战>第六章.主要内容是使用小程序媒体API制作一个视频播放小程序,视频素材来自于某高校档案馆的<口述校史>栏目 ...
OUC软件开发实验5
实验5:第一个Android应用小程序一.实验目标 1.Textview imageview使用:2.LinearLayout使用二.实验步骤基础知识 TextView match_parent ...
OUC软件开发实验6
实验6:做一个APP首页一.实验目标 1.ScrollView使用:2.RelativeLayout使用:3.插件之间的穿插使用. 二.实验步骤基础知识 ScrollView了解 layout_w ...
ouc2022移动软件开发实验二：天气查询小程序
一.实验目标 1.掌握服务器域名配置和临时服务器部署:2.掌握 wx.request 接口的用法. 二.实验步骤 1."和风天气"密钥申请 "和风天气"有着可以 ...

OUC-移动软件开发-实验1