移动软件开发实验一的实验报告

使用模板创建小程序

打开微信开发这工具后选择新建小程序，选择JS模板创建小程序：

​

手动创建小程序

在原先创建出的模板基础上，根据文档要求删除对应的文件夹，并在index.js和app.js文件中利用自动补全完成基础设置:

视图设计

导航栏设计

修改app.json文件配置导航栏显示效果

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "navigationBarBackgroundColor": "#663399", //修改导航栏颜色
    "navigationBarTitleText": "手动创建第一个小程序" //修改导航栏标题文字
  }
}

修改后效果如下:

页面设计

修改index.wxml文件，为主页添加头像、昵称和按钮显示区域:

<view class='container'>//用于修改样式的标签
  <image></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 {  //修改image标签的样式
  width: 300rpx;
  border-radius: 50%;
}
text {   //修改text标签的样式
  font-size: 50rpx;
}

可在项目目录中新建一个images文件夹用于存放默认的头像图片并修改之前的image标签显示默认头像:

<image src='/images/logo.png' mode="widthFix"></image>

目录结构如下 ：

修改之后显示效果如下:

逻辑实现

获取微信用户信息

由于微信小程序版本更新的原因，无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息，将直接获取匿名数据，故使用getUserProfile方式获取用户信息

在index.wxml中修改button标签内容为：

<button bindtap="getUserProfile">点击获取头像和昵称</button>

用于调用getUserProfile

同时在index.js中添加 getUserProfile函数：

getUserProfile(e) {
    wx.getUserProfile({
      desc: '展示用户信息',
      success: (res) => {
        let info = res.userInfo;
        console.log(info);
      }
    })
  },

在用户确认授予个人信息后，控制台中即出现获取到的用户信息:

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

之前已经成功获取到了用户的个人信息，现在只需要将这些信息动态显示出来即可。
修改index.wxml代码，将固定值更改为动态数据:

<view class='container'>
  <image src='{{src}}' mode="widthFix"></image>
  <text>{{name}}</text>
  <button bindtap="getUserProfile">点击获取头像和昵称</button>
</view>

在index.js中data属性中添加动态数据的值:

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

更新头像和昵称

修改index.js中getUserProfile函数的代码，使其可以将获取到的用户信息更新到动态数据上:

getUserProfile(e) {
    wx.getUserProfile({
      desc: '展示用户信息',
      success: (res) => {
        let info = res.userInfo;
        this.setData({
          src: info.avatarUrl,
          name: info.nickName,  
        })
      }
    })
  },

三、程序运行结果

• 程序打开后默认界面：
  

• 点击按钮弹出授权框:
  

• 点击允许之后即可显示头像与昵称：

  

四、问题总结与体会

在实验过程中，实验文档讲解十分详细，但是由于微信小程序接口更新较快，导致一些内容过时。

本次实验中，获取用户信息时，文档中给出的getUserInfo方法只能获取到匿名的用户信息，无法达到实验要求。通过查阅微信小程序的官方文档，了解到可以使用getUserProfile接口获取用户信息，结合微信小程序初始模板中给出的获取用户信息的代码示例与老师的帮助，成功获取到了用户信息。