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

一、实验目标

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
        })
      }
    })
  },

三、程序运行结果

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

这是快速启动模板创建的小程序。

快速模板

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

下面这张是初始图片

初始图片

点击“获取头像昵称”后

获取信息

点击“允许”

最终结果

可以看到,实验十分成功。

四、问题总结与体会

本次实验十分有趣,让我第一次体验制作小程序。中间也遇到了一点问题,比如头像,别人的都是正圆的,就我是椭圆的,于是我就在网上找解决方法,去查找官方文档。最终解决了这个问题,并且让我发现了一些组件的有趣的用法,按钮的颜色阿之类的都可以更改。
总的来说,这次实验对我的帮助很大。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值