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

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

姓名：林佳欣 学号：22020007054

姓名和学号？	林佳欣，22020007054
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验1：第一个微信小程序
博客地址？	LinJason.OUC-CSDN博客
Github仓库地址？	WechatMiniProgram: 2024年中国海洋大学移动软件开发作业 (gitee.com)

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

一、实验目标

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

二、实验步骤

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

1、快速启动模板创建小程序的方法

（1）项目创建

①编写项目名称和选择项目的地址，然后填充AppID；后端服务选择不使用云服务；在模板选择方面使用JS的基础模板。

②创建成功后即自动生成一个填充头像和输入昵称的小程序

2、手动创建小程序

（1）创建页面文件

①新建项目后将app.json中的pages/logs/logs和上一行的逗号删除

②删除utils文件夹、pages文件夹下logs的目录及其全部内容，删除index.wxml、index.wxss和index.js中的全部代码

③在index.js中输入page后自动补全代码

④删除app.wxss和app.js中的全部代码，在app.js中输入app自动补全代码

（2）视图设计

①导航栏设计

在app.json中输入代码

{
  // 定义小程序首页
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "手动创建第一个小程序", // 设置小程序导航栏标题的文本
    "navigationBarBackgroundColor": "#663399",// 设置导航栏的背景颜色为深紫色
    "navigationBarTextStyle":"white"// 设置导航栏标题的字体颜色为白色
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

②页面设计

在index.wxml中输入代码

<view class = 'container'>
  <image src='{{src}}'mode='widthFix'></image><!--数据绑定的src变量提供，图片宽度自适应，高度等比例缩放-->
  <text>{{name}}</text><!--数据绑定的name变量提供-->
  <button bind:tap="getUserProfile">
    点击获取头像和昵称
  </button><!--当用户点击时调用getUserProfile方法-->
</view>

在index.wxss中输入代码

.container{
  height: 100vh;/* 设置容器的高度为视口高度的100%*/
  display: flex;
  flex-direction:column;/* 设置flex容器的方向为纵向排列 */
  align-items: center;/* 设置子元素在主轴上垂直居中*/
  justify-content: space-around;/* 设置子元素之间间隔均匀分布 */
}

image{
  width: 300rpx;  /* 设置图片宽度为300rpx */
  border-radius: 50%;/* 设置图片边框圆角为50% */
}

text{
  font-size: 50rpx;/*设置文本的字体大小为50rpx*/
}

（3）逻辑实现

①在index.js中追加函数getUserProfile

getUserProfile:function(e){
  wx.getUserProfile({
    desc: 'desc',
    success: (result) => {
      // setData方法用于更新页面的数据
      // 更新src数据属性为用户头像的URL
      // 更新name数据属性为用户的昵称
      this.setData({
        src:result.userInfo.avatarUrl,
        name:result.userInfo.nickName
      })
    },
  })
}

三、程序运行结果

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

结果：成功获取微信头像和昵称

四、问题总结与体会

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

问题：在实验中，由于微信小程序的工具中的库函数会一直做变动，导致早期的代码失效，无法读取微信头像和昵称

解决方法：通过将getUserInfo改成getUserProfile来解决

问题：在实验中的基础库不支持wx.getUserProfile

解决方法：在右上角详细中->本地设置->调试基础库，把基础库的版本改成2.10.4~2.27.0之间

收获与体会：通过这个实验，我初次的体会到小程序编写的大致框架及其流程，了解了相应的html和css语言的编写语法，例如image图像形状大小、text文本排版、button按钮的实现等等。此外，在遇到问题时能够学会查找相关资料并一步步调试，来解决无法读取的问题。