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

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

一、实验目标

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

二、实验步骤

1. 实验准备：在微信公众平台上注册好开发者账号，并下载微信开发者工具，开始实验。
2. 创建项目：在微信公众平台上获取自己的appID，选择不使用云开发，选择Javascript开发语言，初始化项目。
3. 删除和修改文件：

• 将 app.json 文件内 pages 属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号
• 删除 utils 文件夹及其内部所有内容
• 删除 pages 文件夹下的 logs 目录及其内部所有内容
• 删除 index.wxml和 index.wxss 中的全部代码
• 删除 index.js 中的全部代码,并且输人关键词“page”找到第二个选项按回车键让其自动补全函数
• 删除 app.wxss 中的全部代码
• 删除 app.js 中的全部代码,并且输入关键词“app”找到第一个选项按回车键让其自动补全函数
• 按 Ctrl+S 保存当前修改

4. 导航栏设计：在app.json中对window属性重新配置，实现自定义的导航栏效果

• 修改代码如下：

"window": {
    "navigationBarTitleText": "手动创建第一个小程序",
    "navigationBarBackgroundColor": "#663399"
  },

• 实现效果如下：

5. 页面设计：

• index.wxml管理页面内容有什么，在这部分使用image组件显示微信头像；text组件显示微信昵称；button组件实现按钮。此外，为了使用动态数据显示头像和昵称，使用双花括号’{{}}'形式，实现动态获取。修改代码如下：

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

• index.js负责页面逻辑的实现，为了用动态数据显示头像和昵称，需要在index.js中的data属性中，写入这两个动态数据的值。其中images为自己创建的用来存放图片的文件夹，weixin.jpg是自己找的微信logo。补充后的data代码如下：

data: {
    src:'/images/weixin.jpg',
    name:'Hello World'
  },

• index.wxss用于修改页面样式，通过类选择器，实现index页面的整体flex布局；通过标签选择器，修改image和text的样式。代码如下：

/* 样式 */
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
image{
  width: 400rpx;
  border-radius: 50%;
}
text{
  font-size: 50rpx;
  color: red;
}

• 整体实现效果如下：

6. 逻辑实现–获取微信用户信息：

• 对button修改如下：

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

• 在index.js中添加函数：

getMyInfo:function(){
    wx.getUserProfile({
      desc: '用于展示用户信息',
      success: (res) => {
        console.log(res.userInfo);
      },
      fail: (err) => {
        console.log("获取失败", err);
      }
    })
  },

• 在app.json中添加配置：

"permission": {
    "scope.userInfo":{
      "desc": "你的信息将用于展示头像和昵称"
    }
  },

• 控制台打印结果如下，可知成功获取到了用户信息。
  

• 更新头像和昵称：修改index.js中getMyInfo函数，通过调用setData方法，将res.userInfo中的内容更新到data中相应的字段，使页面显示用户的头像和昵称。修改后的代码如下：

getMyInfo:function(){
    wx.getUserProfile({
      desc: '用于展示用户信息',
      success: (res) => {
        console.log(res.userInfo);
        //更新页面数据
        this.setData({
          src:res.userInfo.avatarUrl,
          name:res.userInfo.nickName
        });
      },
      fail: (err) => {
        console.log("获取失败", err);
      }
    })
  },

三、程序运行结果

• 点击页面下方按钮获取头像和昵称后，弹出获取申请
  

• 选择允许后成功展示用户的头像和昵称
  

四、问题总结与体会

• 遇到问题：在获取微信用户信息时，实验文档所给的open-type=getUserInfo方法会获取失败。
• 解决方法：改用wx.getUserProfile方法实现，在app.json中添加permission配置，并将基础库的版本改为2.18.1，成功获取用户信息。
• 收获：初步熟悉微信小程序的开发，了解了项目中各个文件的作用，能够编写代码实现简单的小程序功能，为后续小程序开发打下基础。