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

xiaoli-guan

于 2022-08-17 16:18:30 发布

阅读量449

点赞数 1

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/m0_53540438/article/details/126388278

版权

一、实验目标

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

二、实验步骤

1、快速启动模板创建小程序

AppID选择测试号，后端服务选择“不使用云服务”，模板选择“JavaScript基础模板”。创建好项目后打开。

打开后就是快速启动模板创建的小程序了

2、不使用模板手动创建小程序

1）前期准备

按照实验文档，将初始文件中多余的文件或代码删除.

2）导航栏设计

可以在app.json中对window属性进行修改。
"navigationBarBackgroundColor"表示导航栏顶部的颜色，将其修改为"#663399"，这代表着紫色。
"navigationBarTitleText"表示导航栏中的文字，将其修改为 "lab1"
"navigationBarTextStyle":表示导航栏中文字的颜色，默认是黑色文本，将其修改为"white"（白色）

3）页面设计

在index.wxml中，添加下面代码：

<view class = 'container'>
    
  	<image 
src = '/images/hen.jpg'
style="width:240rpx;height:240rpx"
mode = 'widthFix'>
    </image>

  	<text>Hello World</text>

  	<button
type = 'primary'>
    获取头像昵称
  	</button>

  </view>

i）image组件

src是头像图片的地址，使用两个花括号代表它是动态数据，也可以不用花括号，直接使用本地相对地址，本地图片需放在与项目同一目录下。类似：<image src = '/images/hen.jpg'></image>
style可以设置image组件的大小，image组件默认宽度320px、高度240px。
mode是图片模式，除了widthFix之后，还有许多模式可以选择，比如：scaleToFill（默认）（缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素），top（裁剪模式，不缩放图片，只显示图片的顶部区域），等等。

ii）text组件

使用两个花括号代表它是动态数据,也可以不使用花括号直接写入文本。类似：
<text>Hello World</text>
type可以设置按钮颜色

iii)

""和’'一样

接下来是修改全局布局，在index.wxss中，加入以下代码

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

4）获取微信用户信息

将index.wxml的button组件代码改为：
	<button  
	open-type="getUserInfo"
	bindgetuserinfo = 'getMyInfo' 
	type = 'primary'>
    	获取头像昵称
  	</button>
  	
 
在index.js的Page（）中添加getMyInfo函数：

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

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

index.wxml中修改<image>和<text>组件代码：

<image 
src = '{{src}}'
style="width:240rpx;height:240rpx"
mode = 'widthFix'>
</image>

<text>{{name}}</text>




在index.js中的data属性中加入：
data: {
    src:'/images/hen.jpg',
    name : 'Hello World'
  },
这是页面的初始数据。

6）更新头像和昵称

修改index.js文件中的getMyInfo函数：

// 获取用户信息
  getMyInfo: function(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          src: res.userInfo.avatarUrl,
          name: res.userInfo.nickName
        })
      }
    })
  },