贵州两学一做专题网站,个人网站做博客还是做论坛,新浪云 安装wordpress,聊城网站建设聊城本系列教程是针对粉丝的变现教程#xff0c;还不是粉丝的可以关注我并且到社区#xff1a;https://bbs.csdn.net/topics/603436232
进行打卡#xff0c;不是老粉的也可以获取最终的技术变现学习#xff0c;最终还有详细的变现教程等你来。
前言
《 程序员变现指南之 微信…本系列教程是针对粉丝的变现教程还不是粉丝的可以关注我并且到社区https://bbs.csdn.net/topics/603436232
进行打卡不是老粉的也可以获取最终的技术变现学习最终还有详细的变现教程等你来。
前言
《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》 本系列文章参考《微信小程序开发实战》 教程出完后将会有变现直播请关注CSDN社区活动公告https://bbs.csdn.net/forums/A757291228?spm1001.2014.3001.6682typeId19380。
在社区中发文每周将会在活跃前十送出
一本实物书籍多份实物小礼品每月送出机械键盘等奖励。
教程所需
由于小程序开发需要一定的基础这些基础需要提前掌握本教程只对小程序开发进行零基础说明。 微信小程序开发工具下载链接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 bindtapgetUserProfile获取用户信息/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 文件的标签
viewimage src{{userInfo.avatarUrl}}/imagetext{{userInfo.nickName}}/textbutton bindtapgetUserProfile获取用户信息/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 中主要设置了一个弹性伸缩盒其中 height100vh 表示这个 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;
}效果如下
