【无标题】移动软件开发实验一

最新推荐文章于 2024-09-25 14:00:00 发布

qq_51731858

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量95

点赞数

文章标签： javascript 微信小程序开发语言

本文链接：https://blog.csdn.net/qq_51731858/article/details/126394797

版权

一、实验目标

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

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

二、实验步骤

相关 WXML（pages/index/index.wxml）代码片段如下：

<view class = 'container'>

 <image src="{{src}}"mode='widthFix'></image>

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

 <button open-type='getUserInfo' bindgetuserinfo='getMyInfo'>点击获取头像和昵称</button>

</view>

相关 WXSS（pages/index/index.wxss）代码片段如下：

.container{

 height:100vh;          

 display: flex;

 flex-direction: column;

 align-items: center;

 justify-content: space-around;

}

image{

 width: 300rpx;

 border-radius: 50%;

}

text{

 font-size: 50rpx;

}

相关 JS（pages/index/index.js）代码片段如下：

 data: {

  src:'./images/logo.png',

  name:'Hello World'

 },

 getMyInfo:function(e){

  wx.getUserProfile({

   desc: '展示用户信息',

   success:(res)=>{

•    this.setData({

•     src:res.userInfo.avatarUrl,

•     name:res.userInfo.nickName

•    })

   }

  })

 }