《移动软件开发》实验报告

一、实验目标

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

二、实验步骤

a）使用快速启动模板创建小程序

此处点击模板就可以创建一个小程序，这里我创建了一个电商的小程序

b）不使用模板创建小程序

调整导航栏
- 此处先调整app.jason文件当中对象windows的navigationBarBackgroundColor属性，这个属性是用于调整导航栏的颜色，其取值为一组代表颜色编码的16进制数。
- 之后调整navigationBarTextStyle属性，将其设置为white，将文字设置为白色，加强可读性，结果如下

调整页面设计

首先现在index.wxss当中设置一个容器container,代码如下，同时调整image和text组件的样式

.container{
 height: 100vh;  
 display: flex;
 flex-direction: column; /*垂直分布*/
 align-items: center;    /*水平居中*/
 justify-content: center space-around;/*垂直方向分布布局*/

}

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

text{
 font-size: 50rpx;
}

* 在index.wxml当中调用自己写的容器，并且为重写index.wxml，在index目录下新建一个子目录images，并且为子目录导入一张图片logo.png分别添加图像组件，文字组件和按钮控件，代码如下：

```xml
<view class="container">
  <image src="images/logo.png"></image> 
  <text>hello world</text>
  <button>点击获取微信昵称</button>
</view>

结果如下

编写交互逻辑
- 修改index.ts文件，为其加上一段代码，用来向终端输出输出用户信息
```
  getMyInfo(e:any){
    console.log(e.detail.userInfo);
  }
```
- 修改index.wxml，调用getUserProfile获取用户的基本信息，此处如果用getUserProfile则不会触发登入事件，会直接返回匿名用户的资料，无法满足本次开发需求。代码如下
```
<view class="container">
  <image src="{{src}}"mode='widthFix' > </image>
  <text>{{name}}</text>
  <button bindtap="getMyInfo" >点击获取微信昵称</button>
</view>
```

修改index.ts，将getMyInfo函数进行修改，使用getUserProfile来获取用户信息,代码如下

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

三、实验允运行结果

初始画面

点击按钮之后

四、问题总结与体会

在本次实验当中我遇到的最大问题是不熟悉微信的一些接口，由于我是第一次接触微信小程序开发，所以不太了解微信小程序为开发者提供了什么结构，同时微信的接口更新迭代速度很快，老师给的指引上的一些接口所获得的数据出现了变化比如getUserInfo函数现在只会自动返回匿名用户信息，这一部分的困难我主要是通过阅读微信开发者文档解决的。此外，在进行代码编写的时候，我也发现项目的结构也出现了一些变化，比如部分js文档已经变成ts文档，部分目录层级出现了调整，不过这一部分的问题主要可以通过先快速阅览一遍项目，通过注释了解项目结构来确定每一个文件的作用。然后再进行编写。

微信小程序开发-实验1