1.界面展示

通过点击获取头像和昵称按钮获取用户信息

2.页面创建

1.全局三个文件，分别是app.js app.json app.wxss(名称不可更改）

2.创建Pages目录文件（作用是用来放各个页面的）

3.创建页面{给页面起名字，并且创建4个文件}
（1）js：页面逻辑实现
（2）json: 负责标题栏和一些状态栏
（3）wxml: 管理页面有什么
（4）wxss: 页面排布

此时在app.json中写入如下内容，界面可正常显示

4.把内容单元封装在view内部，写法："内容”

用class的方法对view内容样式进行排布
……class可以对其他组件样式布局也有效，class规定的样式前需要加上’.’，如果像image/text这样的组件的话，不需要加’.’(全局有效）

5.这个小程序需要用到三个组件：图片、文字、按钮
（1）图片 image

(2) 文字 text

(3) 按钮 button

3.实现代码

在app.json中定义代码如下

在index.wxml中代码如下

在index.wxss中代码入如下

在index.js中代码如下

4.功能介绍

在index.wxml中使用双大括号{{}}mustache语法在其中定义变量

并在index.js的data中获取变量对应值

变量src对应的是图片地址，此处引用的是本地地址，也可以引用网页地址

open-type='getUserInfo 表示激活获取微信用户信息功能，相当于一个开关

bindgetuserinfo=‘getMyInfo’ 表示绑定获得的数据将传递给自定义函数getMyInfo,可以自己取

因此在index.js中定义getMyInfo函数，e表示点击按钮后获得的事件对象，该函数功能即为更该data中图片为微信头像，更改data中的名称为微信昵称

index.wxml中对应的class样式在index.wxss中进行布局

布局解释见图片中注释

在app.json中Window中对应的navigationBarBackgroundColor，navigationBarTitleText，backgroundTextStyle"分别表示导航栏背景色，导航栏标题和导航栏标题颜色
navigationBarBackgroundColor（只能是16进制颜色值）

navigationBarTitleText

backgroundTextStyle

小程序 --获取微信头像昵称相关推荐

小程序--获取微信头像昵称等信息
声明:此博客仅为学习笔记方便自己复习,是我看视频学习所做记录,再一次推荐大家去看b站up主蒙奇D一修的教学视频,我每次看他视频都会投币,又皮又可爱,关键讲的仔细易懂有干货!!这篇博客就是跟着他的视频, ...
微信小程序获取用户头像昵称组件封装（最新版）
一.前言微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大. 更多详情查看公告:公告直达链接我的项目比较多,而且大部分都是只需要获取用户的头像以及昵 ...
微信小程序获取用户头像昵称
微信小程序获取头像昵称问题解决文章目录微信小程序获取头像昵称问题解决前言和传统方法问题描述解决方案实现效果前言和传统方法微信小程序是一种基于微信开发平台的轻应用,用户可以通过微信扫码. ...
微信小程序获取微信头像、微信昵称
微信小程序获取头像昵称 <template><view class="top-user"><view class="top-content& ...
微信小程序获取微信头像和名称（微信小程序摸索第十二天）
先上图 .wxml文件  <view class="b1 float"><view class="hea ...
php获取微信小程序用户头像,微信小程序获取用户头像+昵称+openid，小程序登录！附前端后端源码！...
做一款小程序,如果需要判断用户,当然要获取一些基本信息,例如头像,昵称,openid.所以本次案例就直接上代码了. 小程序前端 index.wxml 获取头像昵称 {{userInfo.nickNam ...
微信小程序获取用户头像昵称等信息规则更新
以前是这样的 <button open-type="getUserInfo" @getuserinfo="getuserinfo">获取</b ...
uniapp微信小程序授权微信头像昵称
自微信废弃uni.getUserInfo和uni.getUserProfile授权登录只能使用手机号授权了,头像和昵称则是改成了上传的方式代码写的虽然比较low但是很实用的,可以借鉴一下 html ...
微信小程序官方调整头像昵称获取问题；微信扫码链接wifi，wifi地推，两种可行的解决方案
微信小程序官方调整头像昵称获取问题:微信扫码链接wifi,wifi地推更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访 ...

小程序 --获取微信头像昵称

目录

1.界面展示

2.页面创建

3.实现代码

4.功能介绍

小程序 --获取微信头像昵称相关推荐

最新文章

热门文章