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

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

一、实验目标

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

二、实验步骤

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

1.自动生成小程序

1.1项目创建

双击微信开发者工具图标，使用管理员微信扫码二维码后进入菜单画面，选择菜单中的“小程序”选项进入小程序项目管理页面。依次填写项目名称（开发者自定义的名称，小程序用户用户不可见) 、目录（用于存放小程序项目）、AppID(管理员在微信公众平台上注册的小程序ID)。

效果如图

2.手动创建小程序

2.1项目创建

2.2页面配置

2.2.1创建页面文件

(1）将 app.json 文件内 pages 属性中的“ pages / logs / logs ”删除，并删除上一行末尾的逗号。

(2）按快捷键 Cirl + S 保存当前修改。

2.2.2删除和修改文件

(1) 删除utils文件夹及其内部所有内容。

(2）删除 pages 文件夹下的 logs 目录及其内部所有内容。

(3）删除 index.wxml 和 index.wxss 中的全部代码。

(4）删除 index.js 中的全部代码，并且输入关键词"page"找到第二个选项按回车键让其自动补全函数。

(5）删除 app.wxss中的全部代码。

(6）删除app.js中的全部代码，并且输入关键词"app"找到第一个选项按回车键让其自动补全函数。

2.3视图设计

2.3.1导航栏设置

小程序默认导航栏是黑底白字的效果，可通过在app.json中对window属性进行重新配置来自定义导航栏效果。更改后的app.json文件代码及效果图如下所示：

2.3.2页面设计

页面设计包括3个内容:微信头像、微信昵称、和“点击获取头像和昵称”按钮。

相关WXML代码片段如下：

<view class='container'>
  <image></image>
  <text>Hello World</text>
  <button>点击获取头像和昵称</button>
</view>

相关WXSS代码片段如下：

.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

在wxss页面追加组件的相关代码如下：

image{
  width: 300rpx;
  border-radius: 50%;
}
text{
  font-size: 50rpx;
}

2.4逻辑实现

2.4.1获取微信用户信息

在 WXML 页面修改＜ button ＞组件的代码，为其追加获取用户信息事件，代码片段如下

<button open-type='getUserInfo'bindgetuserinfo='getMyInfo'>
	点击获取头像和昵称
</button>

在 JS页面的 Page( )内部追加 getMyInfo函数，代码片段如下：

getMyInfo:function(e){
	console.log(e.detail.userInfo)
}

2.4.2使用动态数据显示头像和昵称

在 WXML 页面修改＜ image ＞和＜ text >组件的代码，将图片来源和文本内容使用双花括号（{{}}）做成动态数据，代码片段如下：

  <image src='{{src}}'mode='widthFix'></image>
  <text>{{name}}</text>

同时修改 JS 文件，在现有的 data 属性中追加这两个动态数据的值，使其仍然可以显示原先的内容。代码片段如下：

  data: {
    src:'/images/logo.png',
    name:'Hello World'
  },

2.4.3更新头像和昵称

更改 JS 文件中 getMyInfo 函数的代码．使获取到的信息更新到动态数据上。代码片段如下：

getMyInfo:function(e){
      let info=e.detail.userInfo;
      this.setData({
        src:info.avatarUrl,
        name:info.nickName
      })
  }

三、程序运行结果

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

四、问题总结与体会

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

获取微信用户信息时出现了报错，通过询问同学和上网查找资料得以解决。之前从没接触过微信小程序的开发，通过第一次实验有了初步的了解。