微信小程序获取头像和名称

简介: 微信小程序获取头像和名称

他如何获取他所需要的openid呢可以看这一篇博客http://t.csdn.cn/jYfNH

行为层

1.   denglu_str:function() {
2.     let that = this;
3.     wx.request({
4.       url: '接口',
5. data: {
6. //可能需要的数据,具体看接口需要的参数
7.         openid:s, // 唯一凭证
8.         NickName:, //昵称
9.         HeadUrl://头像
10. 
11.       },
12.       header: {
13. 'content-type': 'application/json'
14.       },
15.       success (res) {
16.         console.log(res);
17. 
18.         wx.showToast({
19.           title: '登录成功',
20.           icon: 'success',
21.           duration: 2000,//持续的时间
22.         })
23. // console.log(123);
24. //获取参数成功,触发事件跳转页面
25.         wx.switchTab({
26.           url: '../ger/ger',
27.         })
28.       }
29.     })
30.   }

样式层

1. .button {
2. width: 100%;
3. height: 200px;
4. }
5. 
6. .button button {
7. width: 25%;
8. height: 100px;
9. margin-top: 50px;
10. background-color: #ffffff;
11. }
12. 
13. .button image {
14. width: 150%;
15. height: 100%;
16. }
17. image{
18. width: 200rpx;
19. height: 200rpx;
20. border-radius: 50%;
21. }
22. .name {
23. width: 100%;
24. height: 50px;
25. border: 1px solid #cecccc;
26. display: flex;
27. }
28. 
29. .name_text {
30. width: 20%;
31. height: 50px;
32. line-height: 50px;
33. padding-left: 5%;
34. }
35. 
36. .name input {
37. width: 80%;
38. height: 50px;
39. }
40. 
41. .enter {
42. width: 100%;
43. display: flex;
44. justify-content: center;
45. margin-top: 100px;
46. }

结构层

1. 
2. 
3. 
4. 
5. <button open-type="chooseAvatar" bindchooseavatar="assd">
6. <image src="{{image}}" />
7. </button>
8. 
9. <form catchsubmit="formSubmit" catchreset="formReset">
10. <view class="name">
11. <view class="name_text">
12.         昵称
13. </view>
14. <view>
15. <input class="weui-input" name="input" type="nickname" placeholder="请输入昵称" />
16. </view>
17. </view>
18. <view class="enter">
19. <button style="margin: 30rpx 0" type="primary" formType="submit" bindtap="denglu_str">登录</button>
20. </view>
21. </form>


目录
相关文章
|
7月前
|
小程序 JavaScript
小程序授权获取头像
小程序授权获取头像
|
5月前
|
存储 小程序 API
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
92 0
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
|
5月前
|
小程序
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
78 0
|
5月前
|
缓存 容器
Flutter实现仿微信群头像功能
Flutter实现仿微信群头像功能
78 0
|
7月前
|
小程序 API
微信小程序获取昵称,头像
微信小程序获取昵称,头像
128 0
|
7月前
|
小程序 机器人 开发者
HbuilderX uni-app开发者“ci机器人1” 小程序发布者、开发者名称如何修改?
HbuilderX uni-app开发者“ci机器人1” 小程序发布者、开发者名称如何修改?
|
前端开发
微信群聊头像组件
微信群聊头像组件
123 0
|
小程序
小程序open-data的圆形用户头像实现
小程序open-data的圆形用户头像实现
77 0
|
小程序 JavaScript 程序员
小程序新方法 open-type获取头像昵称
小程序新方法 open-type获取头像昵称
281 0
|
小程序
小程序获取的用户头像怎么做成圆形
小程序获取的用户头像怎么做成圆形
81 0