移动软件开发实验一

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

一、实验目标

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

二、实验步骤

1. 手动创建小程序

2. 页面配置

删除原有的wxml和和wxss中的html和css文件。删除原page的js文件，修改后的项目结构如下

3.视图设计

3.1导航栏设计

3.2页面设计

4.逻辑设计

给Button绑定方法并使用该方法修改html文件中命名为src和name的资源

   <button open-type='getUserInfo' bindtap='getUserProfile'>点击获取头像和昵称button>

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

getUserProfile(e) {
        // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
        wx.getUserProfile({
          desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            console.log(res)
            this.setData({
              name: res.userInfo.nickName,
              hasUserInfo: true,
              src:res.userInfo.avatarUrl,
            })
          }
        })
      }

在控制台收到用户信息

修改成功

三、程序运行结果

四、问题总结与体会

实验中遇到了不理解项目文件之间联系的问题，通过类比之前学过的安卓开发的xml和activity文件了解了page的生命周期和前端界面wxml和app:json配置文件等信息，通过锻炼使得我进一步了解了html，css，js文件之间的关系和操作