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

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

一、实验目标

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

二、实验步骤

1、开发前准备工作

• 在微信公众平台上注册小程序：用浏览器打开微信公众平台，按照步骤注册即可。注册好后的小程序信息如下：
  

• 下载微信开发者工具

在浏览器搜索微信开发者工具，按照提示下载即可

2、自动生成小程序

• 项目创建：打开微信开发者工具，点击小程序选项创建即可

• 真机预览

3、手动创建小程序

• 首先创建一个空项目，操作步骤同上
• 创建页面文件：

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

（2）Ctrl+S保存修改

• 删除和修改文件

（1）删除utils文件夹及其内部所有内容

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

（3）删除Index.wxml和Index.wxss中的全部代码

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

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

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

这部分完成后，模版代码修改完毕

• 视图设计

（1）导航栏设计

可以通过在app.json中对window属性进行重新配置来自定义导航栏效果，更改后的文件代码及效果如下

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#663399",
    "navigationBarTitleText": "手动创建第一个小程序",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

（2）页面设计

主要包含三个内容：微信头像，微信昵称和“点击获取头像和昵称”按钮

相关WXML代码片段如下：

相关WXSS代码片段如下：

此时效果图如下：

然后，在项目中新建自定义文件夹images用于存放图片，右击此文件夹，选择硬盘打开，将本地图片复制粘贴进去等待使用；修改WXML页面的组件如下：

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

在WXSS页面追加和 组件的相关样式代码及最终效果图如下：

.container{
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
}
image{
  width: 300rpx;
  border-radius: 50%;
}
text{
  font-size:50rpx;
}

（3）逻辑实现

• 获取微信用户信息

​ 在WXML页面修改 button 组件的代码，为其追加获取用户信息事件

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

在JS页面的Page( )内部追加GetMyInfo函数

getMyInfo:function(e){
 
}

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

在WXML页面修改和 组件的代码，将图片来源和内容使用双花括号{{}}做成动态数据；

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

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

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

• 更新头像和昵称

修改js文件中getMyInfo函数的代码，使获取到的信息更新到动态数据上，代码片段及预览效果图如下：

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

点击按钮后效果图如下：

用户信息获取成功

实验完成

三、程序运行结果

1、自动生成小程序实验结果截图：

2、手动生成小程序实验结果截图：

四、问题总结与体会

实验整体进行都较为顺利，根据教程上的步骤一步步操作即可。但在获取用户信息时，getMyInfo函数出现了问题，在对函数进行修改和查阅相关官方文档后得到了解决。具体解决方法如下：1、使用函数wx.getUserProfile

2、修改button的绑定事件方法，用bindtap方法

通过这次实验，对微信小程序的开发有了一个初步的认识，了解到了一些基本的开发流程和相关的函数组件的知识，并且能够自己动手设计一个较为简单的界面。