实验一 第一个微信小程序

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

一、实验目标

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

二、实验步骤

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

1.1 项目创建

填写名称、目录、选择AppID，选择不使用云服务，模板选择JS基础模板

1.2 页面配置

1.2.1 创建页面文件

（1）将app.json中pages属性中的“pages/logs/logs"删除

1.2.2 删除和修改文件

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

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

（3）删除index.wxml和index.wxss中的所有代码

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

（5）删除app.wxss中的所有代码

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

1.3 试图设计

（1）导航栏设计

更改app.json中windows属性设置背景（紫色）和字体（白色）

app.json:

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

（2）页面设计

页面上的主要内容为“微信头像”的图片、”微信昵称“的文字以及“点击获取头像和昵称”的按钮

• 微信头像：<image>（图像）组件；

• 微信昵称：<text>（文本）组件；

• 按钮：<button>（按钮）组件；

pages/index/index.wxml

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

pages/index/index.wxss

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

在主目录下创建文件夹images存放默认图片

先将本图片设置为显示的微信头像

pages/index/index.wxml 中修改<image>组件

  <image src='/images/皮卡丘.ico'></image>

pages/index/index.wxss 中追加内容

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

目录结构：                                                        效果图：                                                        

1.4 逻辑实现

1.4.1 获取微信用户信息

pages/index/index.wxml 中修改<button>组件的代码，为其追加获取用户信息事件

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

open-type='getUserInfo' ：激活获取微信用户信息功能

bindgetuserinfo属性：将获得的数据传递给自定义函数getMyInfo

在 pages/index/index.js 中定义getMyInfo方法

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

保存后调试，console控制台输出格式类似这一段数据，就说明获得成功

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

pages/index/index.wxml 中修改<image>和<text>组件的代码，将图片来源和文本内容使用双花括号"{{}}"作为动态数据

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

pages/index/index.js 中的data属性追加这两个动态数据的值，使其仍然可以显示原先的内容

    data: {
    src:'/images/皮卡丘.ico',
    name:'Hello World'
    },

1.4.3 更新头像和昵称

pages/index/index.js 中的 getMyInfo函数，使获取的信息更新到动态数据上

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

1.5 完整代码展示

app.json

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

pages/index/index.js

Page({
  getMyInfo: function(e) {
    let info = e.detail.userInfo;
    this.setData({
      src: info.avatarUrl,
      name: info.nickName
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    src:'/images/皮卡丘.ico',
    name:'Hello World'
  }
})

pages/index/index.wxml

<view class='container'>
  <image src='{{src}}'mode='widthFix'></image>
  <text>{{name}}</text>
  <button open-type='getUserInfo'bindgetuserinfo='getMyInfo'>
    点击获得头像和昵称
  </button>
</view>

pages/index/index.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;
}

三、程序运行结果

点击按钮即可获得信息

初始界面效果                                         点击按钮后的效果

四、问题总结与体会

问题总结

1. 开发环境配置问题 在开始实验前，配置开发环境时遇到了一些问题，特别是在安装和配置微信开发者工具时。由于缺乏相关经验，导致在初次运行时遇到了一些兼容性问题。通过查阅文档和在线社区，我了解到了如何正确配置环境，并成功解决了这些问题。

2. 手动创建小程序的困难 在手动从零开始创建小程序的过程中，遇到了代码结构不清晰、组件调用错误等问题。这些问题主要是由于对小程序框架的理解不够深入。为了解决这些问题，我仔细阅读了官方文档，并逐步调试代码，最终成功完成了实验任务。

3. 调试和测试阶段的困难 在调试和测试小程序的过程中，遇到了数据无法实时更新、UI显示错误等问题。通过使用微信开发者工具的调试功能，逐步排查问题，最终发现是由于数据绑定不正确导致的。修正代码后，这些问题得到了有效解决。

收获与体会

• 熟悉小程序开发流程 通过本次实验，我对微信小程序的开发流程有了全面的了解，尤其是手动创建小程序的过程，使我深入理解了小程序的基本结构和功能模块。

• 增强问题解决能力 在实验过程中遇到的各种问题，提升了我独立分析和解决问题的能力。通过不断尝试不同的方法，我学会了如何快速定位和修复问题，这对我今后的开发工作大有裨益。

• 加深对文档和社区资源的认识 实验过程中，文档和在线社区为我提供了大量的帮助。这让我认识到，在遇到问题时，查阅文档和积极利用社区资源是非常重要的，可以节省大量的时间和精力。

对课程安排的建议

• 增加实操案例 建议在课程中增加更多的实操案例，以便学生能够在实践中更好地理解和掌握所学知识。通过动手操作，可以帮助学生更好地掌握开发技巧，并提高实际操作能力。

• 加强开发工具的使用指导 在课程的初期，可以适当增加开发工具使用的指导内容，帮助学生更快熟悉开发环境的配置和使用方法。这将减少初学者在环境配置上的困扰，让他们能更专注于核心内容的学习。

通过本次实验，我不仅掌握了微信小程序的基础开发技能，还积累了丰富的实践经验。期待在后续课程中有更多机会进行类似的实践操作，以进一步提升我的开发能力。