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

ultviolence

已于 2022-09-22 10:52:35 修改

阅读量279

点赞数

分类专栏：小程序开发小程序开发学习文章标签：前端 javascript 小程序

于 2022-08-17 13:32:47 首次发布

本文链接：https://blog.csdn.net/m0_51501882/article/details/126383963

版权

小程序开发同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

小程序开发学习

2 篇文章 0 订阅

订阅专栏

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)]