小程序获取头像试试水 02《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232

进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有详细的变现教程等你来。

前言

《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
本系列文章参考《微信小程序开发实战》
教程出完后将会有变现直播,请关注CSDN社区活动公告:https://bbs.csdn.net/forums/A757291228?spm=1001.2014.3001.6682&typeId=19380。

在社区中发文每周将会在活跃前十送出:

  • 一本实物书籍
  • 多份实物小礼品
  • 每月送出机械键盘等奖励。

教程所需

由于小程序开发需要一定的基础,这些基础需要提前掌握,本教程只对小程序开发进行零基础说明。

  • 微信小程序开发工具,下载链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

  • JavaScript基础

  • HTML基础

目录 持续更新:

小程序的 HelloWord 01《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
小程序获取头像试试水 02《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
小程序仿微信发现页 03《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》

一、简单布局

现在开始写一个获取微信头像的小程序,第一步需要对这个页面布局。
显示用户头像需要一个图片显示的区域,在小程序中需要使用<image>组件;显示获取的用户的用户名需要使用<text>组件;在此基础上还需要一个按钮,点击按钮获取用户信息,需要使用一个<button>组件。

我们回到 index.wxml 文件中,在文件中添加如下代码:

<view>
<image></image>
<text></text>
<button>获取用户信息</button>
</view>

在这里插入图片描述
以上代码中 view 标签是类似于 div 的标签,作为一个包裹容器。
保存后可以在预览区看到页面显示效果:
在这里插入图片描述
这时我们回到代码中,其中<image></image>用于显示图片,在此没有任何信息,所以在预览区中并无任何显示,<text></text>标签同样如此;在按钮标签<button>获取用户信息</button>中已出现了与标签内容一致的显示效果。

接下来我们在 index.js 中为这个按钮增加逻辑,在点击后获取用户信息。

二、信息获取

此时我们在按钮上绑定一个事件:

<button bindtap="getUserProfile">获取用户信息</button>

以上代码中 bindtap 表示为这个按钮绑定一个点击事件,响应的函数是 getUserProfile。

getUserProfile 是小程序的一个开放接口,用于获取用户信息(基础库 2.10.4 开始支持,低版本需做兼容处理。文档位置:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html)。

但是这个接口需要我们传递某一些参数,如下图所示:

其中desc是必传参数,在此处没必要搞清楚其它参数含义。
咱们需要在 index.js 中编写此函数,以至于让我们可以传参和获取用户信息。

点击 index.js 在 Page 代码中增加我们需要的函数:

getUserProfile() {wx.getUserProfile({desc: '用户注册',success: res => {console.log("获取用户信息成功", res)},fail: res => {console.log("获取用户信息失败", res)}})},

getUserProfile 函数中使用 wx.getUserProfile 表示调用公共接口,desc 为需要传递的参数,desc 所填写的内容为为什么需要调用这个接口获取信息,或者说我需要填写的信息用于什么用途。在此处是用于“用户注册”。

接着使用 success 表示调用成功后,成功获取用户信息后需要执行的流程,在此使用 console.log 打印出接收到的用户信息:

success: (res) => {console.log("获取用户信息成功", res)
},

其中success 所接收的 res 为获取用户信息后得到的结果。

既然有成功获取信息的流程那么必然有失败获取用户信息后所需要执行的流程,在此编写了一个失败后流程 fail:

fail: res => {console.log("获取用户信息失败", res)
}

当然所接收的参数名 res 可以自己设定,例如如下示例:

success: userinfo => {console.log("获取用户信息成功", userinfo)
},
fail: failinfo => {console.log("获取用户信息失败", failinfo)
}

接下来点击获取用户信息将会提示是否允许,点击允许:

接着就会在 console 中打印出用户信息:

此时我们可以从信息中发现,在整个结果 res 中,userInfo 节点是用户信息,那么只需要在console.log 中使用 res.userInfo 便可以获取到 userinfo 的信息:

console.log("获取用户信息成功", res.userInfo);

此时我们可以在 index.js 中创建一个变量存储该 userInfo 的值,如下图黄色框选位置,接着在 success 的流程中对该变量进行赋值:

data: {userInfo: null},getUserProfile() {wx.getUserProfile({desc: '用户注册',success: res => {console.log("获取用户信息成功", res.userInfo);this.setData({userInfo: res.userInfo});},fail: res => {console.log("获取用户信息失败", res);}})},

在这里插入图片描述
以上代码中 data:{} 表示设置变量,userInfo 是其中的变量,该变量的初始值为 null,接着再到流程中使用 this.setData 表示设置当前文件中的变量值,在 setData 中设置 userInfo的值为 res 结果中的 userInfo 节点值,此时就获得了userInfo 值,再将该值与在前端进行获取即可。

此时我们保存后测试数据,将会得到 userInfo 的信息:

三、绑定数据

接下来我们需要修改一下 index.wxml 文件的标签:

<view><image src="{{userInfo.avatarUrl}}"></image><text>{{userInfo.nickName}}</text><button bindtap="getUserProfile">获取用户信息</button>
</view>

在这里插入图片描述
此时在前端页面中新增了上图框选的代码。从以上 {{userInfo.avatarUrl}} 代码可知 userInfo 是index.js 文件中的变量,而 avatarUrl 是 userInfo 变量所保存的那个节点中的一个数据;由此可知,获取后台数据只需要使用两对花括号中使用变量加一个小数点便可以获取对应的值;在此 avatarUrl 表示一个所获取到的用户头像值,nickName 表示用户的昵称,由此就获取到了用户的信息。

在代码 <image src="{{userInfo.avatarUrl}}"></image> 中,src 属性表示这个图片的来源,直接赋值后即可显示头像。

运行后的效果如下:
在这里插入图片描述

四、样式布局

此时我们觉得整个页面并不好看,可以在 wxss 中添加一些样式给整个布局更加美观。

此时先调节图片大小,在 index.wxss 中添加如下样式:

在这里插入图片描述
我们需要要注意的是 10vh 中的 vh 是视窗高度的意思。在微信小程序中 1vh 表示视窗高度的 1%;1vw表示一个视窗宽度的 1%。你可能问我为什么宽度不设置成 10vw?那是因为宽度高度肯定是不一致的,不是用同一个相同的度量去设置宽度我此时的图片就肯定不是一个圆。随后我设置了 border-radius 表示圆角设置,50% 会让我的图片变成圆角,这样就是圆形头像了。

效果如下:

在这里插入图片描述

接着在 wxss 中创建一个类样式 .flestyle:

.flexstyle{height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
}

在这里插入图片描述
以上 flexstyle 中主要设置了一个弹性伸缩盒,其中 height:100vh 表示这个 view 高度占满 100% 视窗; display:flex 表示将对象作为弹性伸缩盒显示;flex-direction: column; 表示确定主轴方向为垂直,可以理解为这个 view 中的布局为垂直布局;align-items: center; 表示其中的元素与交叉轴的中点对齐,由于当前布局为 column 垂直布局可以理解 align-items: center; 为居中对齐;justify-content: space-between; 表示元素都等间距显示。

接着在前端代码处使用 class 对其引用:

显示结果如下:

发现并不好看,此时我们可以选择 justify-content 的属性值为 space-around,表示每个项目两侧的间隔相等,效果如下:


感觉好了很多,此时可以更改一下头像大小,或者字体大小使页面更美观。
完整样式如下:

image{width: 40vw;height: 40vw;border-radius: 50%;
}text{font-size: 70rpx;
}.flexstyle{height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
}

效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286718.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

zookeeper 入门讲解实例 转

转 http://www.blogjava.net/BucketLi/archive/2010/12/21/341268.htmlzookeeper使用和原理探究&#xff08;一&#xff09;zookeeper介绍zookeeper是一个为分布式应用提供一致性服务的软件&#xff0c;它是开源的Hadoop项目中的一个子项目&#xff0c;并且根据google发表的&l…

小程序仿微信发现页 03《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 前言 《 程序员变现指南之 微信…

Silverlight与WCF之间的通信(4)silverlight以net.tcp方式调用console上寄宿的wcf服务

&#xff08;由于最近是针对一个demo进行的研究&#xff0c;在之前公开过代码结构&#xff0c;这里只是对需要改动的地方加以说明&#xff09; WCF4.0使得编写wcf服务不再那么复杂&#xff0c;去掉了许多的配置信息&#xff0c;客户端只需要一个服务地址&#xff0c;便可在系统…

Maui学习之路(一)--Windows窗体设置

Maui的学习之路作为 Maui的先行者&#xff0c;我有话要说&#xff0c;微软你为了让我成为牛 B 的程序员真的是煞费苦心&#xff0c;你一定是觉得我不够牛逼所以针对我&#xff0c;存心想气死我。好了废话不多说&#xff0c;Maui现在也算是正式发布了&#xff0c;我有点想用它来…

Git 常用命令大全

Git 是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码&#xff0c;管理私人的文档和源代码也有很多优势。 Git常用操作命令&#xff1a; 1) 远程仓库相关命令 检出仓库&#xff1a;$ git clone git://github.com/jquery/jquery.git 查看远程仓库&#…

为什么本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效?

2019独角兽企业重金招聘Python工程师标准>>> 为什么本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效&#xff1f;新手学习js或jquery时&#xff0c;一般是在本地调试&#xff08;前端学习一般用不到服务器端&#xff09;&#xff0c;当学习到cookie一节时&…

全解小程序猜数字游戏 04《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 社区有奖励 下面有投票 本文也…

sublime text 3 安装、添加命令行启动、汉化、注册码

1. 安装sublime&#xff1a; 下载&#xff1a;http://www.sublimetext.com/3 添加命令行启动&#xff1a;设置环境变量->计算机->右键属性->高级系统设置->环境变量->系统变量->Path->编辑&#xff0c;加入";安装路径"(如&#xff1a;;D:\Progr…

Linux下的用户和组

2019独角兽企业重金招聘Python工程师标准>>> 用户和组 GNU/Linux 通过用户和用户组实现访问控制 —— 包括对文件访问、设备使用的控制。Linux 默认的访问控制机制相对简单直接&#xff0c;不过还有一些更加高级的机制&#xff0c;包括 ACL 和 LDAP Authentication.…

漫画C语言 做个聊天软件你不懂也得懂

学完C语言做不出东西&#xff1f;不存在的&#xff0c;咱们做一个最“隐私”的聊天器&#xff0c;就俩人&#xff0c;你和我。咱们聊天的信息你知我知没别人知。 对了&#xff0c;本文评论区点赞、收藏抽奖。 社区也有抽奖&#xff0c;本周社区抽奖帖子 &#xff1a;https://b…

【Microstation】第一章:Microstation三维模型构建概述

MicroStation 是国际上和AutoCAD齐名的二维和三维CAD设计软件&#xff0c;第一个版本由Bentley兄弟在1986年开发完成。其专用格式是DGN&#xff0c;并兼容AutoCAD的DWG/DXF等格式。 MicroStation是Bentley 工程软件系统有限公司在建筑、土木工程、交通运输、加工工厂、离散制造…

libgdx游戏引擎开发笔记(十)SuperJumper游戏例子的讲解(篇四)---- 主游戏界面内部框架编写...

上一讲&#xff0c;我们已经实现了点击play进入游戏界面但仅仅是个黑屏 今天&#xff0c;我们就试着编写代码让它出现游戏的一些简单场景。还是在上一讲的代码基础上&#xff0c;我们创建两个类&#xff1a;World 和 WorldRenderer 1.Word类&#xff1a; 12345678910111213141…

看看《System.CommandLine》

记得之前出过几篇.net tool工具的文章&#xff0c;当时的做法是所有工具的语法分析全部自己解释&#xff0c;自己执行&#xff0c;语法的解释占了大部分时间&#xff0c;反而工具的功能被弱化了。其实微软有一个CommandLine框架在缓慢的发展着&#xff0c;至今都没有正式发布&a…

Sublime Text 3 import Anaconda 无法正常补全模块名解决办法

Sublime Text 3 Anaconda配置 在安装Sublime Text3之后我们总会安装一些插件&#xff0c;比如Python的Anaconda自动补全插件。但是&#xff0c;装好之后发现import 时无法像别的IDE里面那样自动补全模块名&#xff0c;就像图中一样&#xff1a; 解决办法在Sublime Text的git…

Android之添加固定图标到桌面

我的QQ群 1 需求 Android之添加固定图标到桌面 2 部分实现 在AndroidManifest.xml里面添加如下权限 <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" /><uses-permission android:name="com.android.launcher.perm…

想做程序员?不同方向入门路线全解

学习计算机编程有很多方向如果你没有一个正确的路线&#xff0c;那么就会&#xff1a; 就会跟上面所说的那样&#xff0c;被迫成为一个全栈&#xff0c;这是比较尴尬的。 若你想比较准确的针对某个方向学习&#xff0c;那就继续往下看吧。 一、程序员分为哪几个方向 随着…

【转】OpenGL超级宝典笔记——纹理映射Mipmap

原文地址 http://my.oschina.net/sweetdark/blog/177812 , 感谢作者&#xff0c;若非法转载请联系本人。 目录[-] MipmappingMipmap过滤构建Mip层Mipmaps 硬件生成LOD&#xff08;多细节层次&#xff09;偏好纹理对象管理多个纹理常驻纹理纹理优先级回顾Mipmapping Mipmap是一个…

【Microstation】第二章:Microstation三维建模基础知识

本章的主要内容包括模型的显示样式(线框、光滑)、三维定位(V、T、S、F)、Microstation常见的坐标系统(世界坐标系、ACS辅助坐标系、精确绘图坐标系、)和Microstation的工作区域(2D和3D)。 一、显示样式 二、三维定位 三维定位在Microstation中显得尤为重要,常见…

实现 EF Core 6 自定义查询标记

前言在《EF Core使用Simple Logging输出日志》中&#xff0c;我们介绍了查询标记 TagWith&#xff0c;它可以帮助我们快速定位到需要的日志&#xff1a;而在 .NET 6 中&#xff0c;新增了另外一个查询标记 TagWithCallSite&#xff0c;它可以标记出代码的位置&#xff1a;var u…

0运维?微信小程序云开发增删查改【05】

在创建小程序时&#xff0c;选择云开发&#xff1a; 随后进入项目之后&#xff0c;此时整个目录如下&#xff1a; 此时我们如图目录即可找到首页位置&#xff1a; 接着咱们清除 index.wxml 代码内容&#xff1a; 在 index.wxml 中加入如下代码&#xff1a; <view> …