2024ouc《移动软件开发》Lab1

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

一、实验目标

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

二、实验步骤

1、先创建app.json、app.js、app.wxss三个文件和pages文件夹，其中前面三个文件名称是固定的，pages文件夹的作用是存放各个页面。
2、再在pages文件夹中新建一个文件夹作为页面，接着右键该文件夹，选择“新建Page”并输入文件名后自动创建四个文件，分别为xx.js、xx.json、xx.wxml、xx.wxss
这四个文件的作用分别为：
xx.js:页面逻辑实现、xx.json:负责标题栏和一些状态栏、xx.wxml:管理页面显示内容、xx.wxss:管理页面排布。

3、编写xx.wxml文件：
主体内容如下所示，<view></view>中间是该界面的所有内容，<image></image>是图片<text></text>是文本，<button></button>是按钮。

<view class = "container">
  <image src='文件路径'></image>
  <text>直接输入文本</text>
  <button>直接输入文本</button>
</view>

4、编写xx.wxss文件：
.container中是对<view class = "container">...</view>的整体设计，image和text中对图片、文本样式的修改是对xx.wxss所在文件夹对应的xx.wxml中的所有image、text生效

.container{
  height: 100vh; //高100视窗
  display: flex; //flex布局
  flex-direction: column; //垂直布局
  align-items: center; //水平方向居中
  justify-content: space-around; //垂直方向分散布局
}
image{
  width: 450rpx; //图片宽度
  border-radius: 50%; //图片变为圆角
}
text{
  font-size: 50rpx; //文字大小
  color: red; //文字颜色
}

5、编写xx.js文件：
5.1 先将<button>内容</button>修改为<button open-type='getUserInfo' bindgetuserinfo="getMyInfo">内容</button>，其中open-type='getUserInfo'用来激活获取微信用户信息功能，bindgetuserinfo="getMyInfo"用来将获得的数据传递给自定义函数getMyInfo。

5.2 在xx.js的Page()内加入自定义函数getMyInfo函数：

getMyInfo:function(e){
    console.log(e.detail.userInfo)
} //现版本微信无法直接获取用户信息，因此这里获取到的信息都是默认信息

运行后获取到的为默认信息：

5.3 将xx.wxml中的<image src='/...'><image> <text>内容<text>改为<image src='{{src}}'><image> <text>{{name}}<text>，并在xx.js的data函数中写入以下内容，这样使得图片和文字都变为动态数据的同时初始化为最开始的内容。

name:'东洋雪莲，国产雪莲',
src:'/images/dyxl.png'

5.4 再次修改getMyInfo函数，将头像和昵称更改为获取到的头像和昵称，函数内容如下：

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

运行后结果如下（因为前面获取到的是默认信息，所以这里更新后的头像和昵称为默认）：

6、修改导航栏
在xx.json中加入如下代码：

  "window": {
    "navigationBarBackgroundColor": "#66ccff", //修改导航栏背景颜色
    "navigationBarTextStyle": "white", //修改导航栏标题、状态栏颜色
    "navigationBarTitleText": "Lab1", //修改导航栏标题文字内容
    "backgroundColor": "#eeeeee", //修改窗口的背景色
    "backgroundTextStyle": "light", //修改下拉loading的样式
    "enablePullDownRefresh": true //是否开启当前页面下拉刷新
  }

修改后：

三、程序运行结果

运行后：

点击按钮后：

四、问题总结与体会

问题

本次实验遇到的主要问题在于当前版本的微信无法使用一键获取用户信息导致点击按钮之后头像和昵称变为系统默认的，这个问题可以通过使用低版本的基础库来解决，解决后的运行结果如下所示：

体会

法使用一键获取用户信息导致点击按钮之后头像和昵称变为系统默认的，这个问题可以通过使用低版本的基础库来解决，解决后的运行结果如下所示：[外链图片转存中…(img-FCPet2a9-1724063920683)]

体会

本次实验我第一次接触到了微信开发者工具，知道了一个小程序必须的文件以及他们的作用。学会了如何制作一个基本的微信小程序，学会了如何修改导航栏的背景颜色、标题等，学会了如何制作一个页面，一个页面中图片、文字、按钮的添加和命名方法，学会了如何自定义一个函数来对一些变量进行修改。