2023年夏季《移动软件开发》实验一 | 第一个微信小程序

Xxxlz777

已于 2023-08-29 16:05:03 修改

阅读量193

点赞数

分类专栏：移动软件开发文章标签：微信小程序小程序 json

于 2023-08-22 18:54:26 首次发布

本文链接：https://blog.csdn.net/m0_62460077/article/details/132433811

版权

移动软件开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

姓名：学号：

姓名和学号？
本实验属于哪门课程？	中国海洋大学23夏《移动软件开发》
实验名称？	实验1：第一个微信小程序
博客地址？	XXXXXXX
Github仓库地址？	XXXXXXX

一、实验目标

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

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

二、实验步骤

1. 进行微信小程序注册

https://mp.weixin.qq.com/

2. 获取AppID

在设置→基本设置→账号信息下获取AppID

在这里插入图片描述

3. 下载开发者工具

下载开发者工具，去稳定版 Stable Build | 微信开放文档小程序下载页面，选择适合的版本下载开发者工具；
我下载的是稳定版Windows64的，下载后进行安装；

4. 开发

1. 创建新项目

安装完成后，微信登录进入并创建一个小程序新项目，输入AppID，选择模板（选择不适用云服务，语言选择JavaScript)，进入开发者界面

在这里插入图片描述

2. 进入页面编辑

进入得如图所示页面：

在这里插入图片描述

3. 手动编辑小程序

1.相关信息介绍

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index，表示小程序运行的第一个页面，本项目只需要保留首页（index），则需要将相关的logs的内容进行删除。

2.页面配置（相关删除）

将app.json文件内pages属性中的“pages/logs/Iogs”删除，并删除上一行末尾的逗号。（按快捷键Ctrl十S保存当前修改）

可得删除前及删除后的图为：
- 删除前：
- 删除后：
删除和修改文件
1. 删除utils文件夹及其内部所有内容。
  
  可得删除前及删除后的图为：
  - 删除前：
  - 删除后：
2. 删除pages文件夹下的logs目录及其内部所有内容。
  
  可得删除前及删除后的图为：
  - 删除前：

在这里插入图片描述
- 删除后：

删除index.wxml和index.wxss中的全部代码。

可得删除前及删除后的图为：
- 删除前：
- 删除后：
删除index.js中的全部代码，并且输入关键词“page”找到第二个选项按回车键让其自动补全函数。
删除app.wxss中的全部代码。
- 删除前：
- 删除后：
删除app.js中的全部代码，并且输入关键词“app”找到第一个选项按回车键让其自动补全函数。

3.视图设计

1. 导航栏设计

小程序默认导航栏是黑底白字的效果，可通过在app.json中对window属性进行重新配置来自定义导航栏效果。
更改后的app.json文件代码及效果图如下所示：

2. 页面设计

页面上主要包含3个内容，即微信头像、微信昵称和“点击获取头像和昵称”按钮。页面设计图如图2-12所示。
计划使用如下组件。
- 微信头像：(图像)组件；
- 微信昵称： (文本)组件：
- 按钮：(按钮)组件。
  - 相关wxml代码与wxss代码调整如图：
使用本地图片获取头像。
- 由图可见，此时可以显示文本和按钮。由于尚未获得头像图片，所以无法显示内容。可以临时使用本地图片代替，在点击按钮获取微信头像后再更改。
  1. 在项目中新建自定义文件夹images用于存放图片，右击此文件夹，选择“硬盘打开”，将本地图片猫猫.png复制、粘贴进去等待使用。
  2. 修改WXML页面的组件如下：
```
image src ='/images/logo.png'mode 'widthFix'></image>
```
  （src属性用于指定图片来源为根目录下images文件夹中的猫猫.png图片，mode属性表示图片随着指定的宽度自动拉伸高度以显示原图的正确比例。）
- 在WXSS页面追加和组件的相关样式代码如下：
```
image{
  width:300rpx;
  border-radius:50%;
}
text{
  font-size:50rpx;
}
```

4.逻辑设计

1.获取微信用户信息

在WXML页面修改button组件的代码，为其追加获取用户信息事件;
代码片段如下：
```
<button open-type ='getUserInfo'bindgetuserinfo='getMyInfo'>
点击获取头像和昵称
</button>
```
(其中open-type=getUserInfo’表示激活获取微信用户信息功能，然后使用bindgetuserinfo属性表示获得的数据将传递给自定义函数getMyInfo)
在JS页面的Page()内部追加getMyInfo函数，保存后预览项目，如果点击按钮后Console控制台能够成功输出一段数据，就说明获取成功。

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

在WXML页面修改和组件的代码，将图片来源和文本内容使用双花括号({{}})做成动态数据，代码片段如下：
```
1.image src ='{(src)]'mode ='widthFix'></image>
2.<text >{{name}}</text>
```
同时修改JS文件，在现有的data属性中追加这两个动态数据的值，使其仍然可以显示原先的内容。代码如下：
```
  data: {
    src:'/images/猫猫.png',
    name:'Hello World'
  },
```

3.更新头像和昵称

修改JS文件中getMyInfo函数的代码，使获取到的信息更新到动态数据上，代码片段如下：

getMyInfo:function(e){

let info e.detail.userInfo;

this.setData({

src:info.avatarUrl,/更新图片来源

name:info.nickName/更新呢称

})},

此时就已全部完成，保存后重新预览项目，最终效果图如图所示。

在这里插入图片描述

后发现出现问题，无法成功获取用户信息，进行更改，改为：

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

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

三、程序运行结果

列出程序的最终运行结果及截图。

在这里插入图片描述

四、问题总结与体会

1.遇到的问题

问题一：使用getUserInfo获取用户信息和头像失败

使用getUserInfo获取用户信息和头像失败的原因在于因为微信最新的版本已经不再推荐使用getUserInfo这个接口来获取用户信息。版本的更新会导致所需使用的函数需要更改。

微信开发工具推荐使用wx.getUserProfile来获取用户信息。代码如下：

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

这个接口会在每次使用时都需要用户确认，同时也需要开发者妥善保管用户的个人信息，以避免重复弹窗。

问题二：使用bindgetuserinfo无法完成的问题

bindtap和bindgetuserinfo是微信小程序中的两种事件绑定方式，它们有以下区别：

bindtap：用于绑定点击的事件。当用户点击对应的元素时，会触发绑定的事件。比如在小程序中，可以给按钮绑定bindtap事件，当用户点击按钮时，会执行对应的操作。
bindgetuserinfo：用于获取用户的基本信息。当用户点击授权按钮并同意授权后，会触发绑定的事件，并且可以通过event.detail.userInfo获取到用户的基本信息，例如昵称、头像等。