第一个微信小程序------点击获取头像和昵称

yvmanqi

已于 2024-08-19 18:48:27 修改

阅读量822

点赞数 12

文章标签：小程序微信小程序

于 2024-08-19 18:46:39 首次发布

本文链接：https://blog.csdn.net/yvmanqi/article/details/141332252

版权

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

一、实验目标

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

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

二、实验步骤

1.创建页面

创建三个全局文件app.js app.json app.wxml 、Pages目录文件和index页面。

创建结果如下：

在这里插入图片描述

2.在 index.wxml 文件添加页面的信息（使用`image` `text` ``button`标签添加图片、文字、按钮）

注：可以在网上任意照一张图片，将该图片放入/images文件夹中，并将其命名为weixin.jpg

本实验选用如下图片：

在这里插入图片描述

index.wxml代码如下：

<view >
  <image src="/images/weixin.jpg"></image>  //src为图片路径
  <text>hello world</text>  //"hello world"为昵称
  <button>点击获取头像和昵称</button>  //按钮
</view>

结果：
在这里插入图片描述

3.在 index.wxss 文件中进行样式设计，并将其添加在 index.wxml 中

在view标签中添加"container"样式，设置高度、布局方式、水平对齐方式等；
在image标签中设置图片宽度、圆角；
在text标签中设置字体大小、、字体颜色；

index.wxml添加样式后代码如下：

<view class='container'>
  <image src=“/images/weixin.jpg"></image>
  <text>hello world</text>
  <button></i></button>
</view>

index.wxss代码如下：

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

结果：

在这里插入图片描述

4.获取用户头像和昵称信息

open-type="getUserInfo" 表示激活获取微信用户信息功能
bindgetuserinfo="getMyInfo" 表示获得的数据将传递给自定义函数getMyInfo

button标签修改后代码如下：

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

5.在index.js中定义`getMyInfo` 函数

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

6.将`昵称name`和`头像图片的地址src`设置为变量，以便获取用户的头像及昵称，并在`index.js`文件中修改"data"和"getMyInfo"函数

index.wxml修改后的代码如下：

<view class="container">
  <image src="{{src}}"></image>
  <text>{{name}}</text>
  <button  open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击获取头像和昵称</button>
</view>

index.js文件修改后的代码如下：

 data: {
    name:'hello world',
    src:'/images/weixin.jpg'
  },
 
  getMyInfo:function(e){
    console.log(e.detail.userInfo)
    let info=e.detail.userInfo;
    this.setData({
      name:info.nickName,   //更新昵称
      src:info.avatarUrl    //更新图片来源
    })
  },

点击”获取头像和昵称“的按钮，显示页面如下：

在这里插入图片描述

7.在app.json中添加"window"以修改全局页面标题栏

app.json修改后的代码如下：

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "navigationBarBackgroundColor":"663399",   //背景颜色
    "navigationBarTitleText":"第一个小程序",     //小程序标题
    "backgroundTextStyle":"light"              //文字样式
    }
}

在这里插入图片描述