前言

感谢! 承蒙关照~

微信小程序我的界面

界面效果:

界面结构:

小程序代码:

我们先看me.json代码

  1. {
  2. "navigationBarTitleText": "个人中心"
  3. }

me.wxml代码

  1. <view class="bg">
  2. <view class="head">
  3. <view class="headIcon">
  4. <image src="{{userInfo.avatarUrl}}" style="width:70px;height:70px;"></image>
  5. </view>
  6. <view class="login">
  7. {{userInfo.nickName}}
  8. </view>
  9. </view>
  10. <button class="button" open-type="getUserInfo" wx:if="{{hasUserInfo}}" bindgetuserinfo="doAuthorization"> 微信登录 </button>
  11. </view>
  12. <view class="hr"></view>
  13. <view class='item'>
  14. <view class="title">手机绑定</view>
  15. <view class="detail2">
  16. <text>></text>
  17. </view>
  18. </view>
  19. <view class="line"></view>
  20. <view class='item'>
  21. <view class="title">阅读文章</view>
  22. <view class="detail2">
  23. <text>></text>
  24. </view>
  25. </view>
  26. <view class="hr"></view>
  27. <view class='item'>
  28. <view class="title">电影推荐</view>
  29. <view class="detail2">
  30. <text> ></text>
  31. </view>
  32. </view>
  33. <view class="line"></view>
  34. <view class="item">
  35. <view class="title">我的收藏</view>
  36. <view class="detail2">
  37. <text> ></text>
  38. </view>
  39. </view>
  40. <view class="line"></view>
  41. <view class="item">
  42. <view class="title">意见反馈</view>
  43. <view class="detail2">
  44. <text> ></text>
  45. </view>
  46. </view>
  47. <view class="line"></view>
  48. <view class="item">
  49. <view class="title">设置</view>
  50. <view class="detail2">
  51. <text> ></text>
  52. </view>
  53. </view>
  54. <view class="hr"></view>

me.wxss代码

  1. .bg {
  2. height: 150px;
  3. background-color: #d53e37;
  4. }
  5. .head {
  6. display: flex;
  7. flex-direction: column;
  8. }
  9. .headIcon {
  10. display: flex;
  11. justify-content: center;
  12. }
  13. .login {
  14. display: flex;
  15. color: #fff;
  16. font-size: 15px;
  17. margin-top: 15rpx;
  18. justify-content: center;
  19. }
  20. .button {
  21. margin: 10px;
  22. font-size: 14px;
  23. }
  24. .head image {
  25. border-radius: 50%;
  26. }
  27. .hr {
  28. width: 100%;
  29. height: 15px;
  30. background-color: #f4f5f6;
  31. }
  32. .item {
  33. display: flex;
  34. flex-direction: row;
  35. }
  36. .title {
  37. padding-top: 15px;
  38. padding-bottom: 15px;
  39. padding-left: 15px;
  40. font-size: 15px;
  41. }
  42. .detail2 {
  43. font-size: 15px;
  44. position: absolute;
  45. right: 10px;
  46. height: 50px;
  47. line-height: 50px;
  48. color: #888;
  49. }
  50. .line {
  51. border: 1px solid #ccc;
  52. opacity: 0.2;
  53. }

me.js代码

  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4. var openid = wx.getStorageSync("openid");
  5. Page({
  6. data: {
  7. hasUserInfo: openid == ""
  8. },
  9. doAuthorization: function(e) {
  10. var that = this;
  11. console.log("调用了 doAuthorization 授权");
  12. // console.log(e);
  13. if (e.detail.userInfo == null) { //为null 用户拒绝了授权
  14. //coding。。。。
  15. console.log("用户拒绝授权");
  16. } else {
  17. //授权
  18. wx.login({
  19. success: function(res) {
  20. console.log('login:code', res.code)
  21. //发送请求
  22. wx.request({
  23. url: app.globalData.userInterfaceUrl + 'record/' + res.code, //接口地址
  24. method: 'GET',
  25. header: {
  26. 'content-type': 'application/json' //默认值
  27. },
  28. success: function(res) {
  29. console.log("record 成功", res.data)
  30. var res = res.data;
  31. if (res.error) { //发生错误
  32. console.log("错误:", res.msg);
  33. } else { //返回成功
  34. try {
  35. wx.setStorageSync('openid', res.data.openid)
  36. openid = wx.getStorageSync("openid");
  37. } catch (e) {
  38. console.log("wx.login 错误", e);
  39. }
  40. //加载用户信息
  41. that.loadUserInfo();
  42. that.setData({ //设置变量
  43. hasUserInfo: false
  44. });
  45. }
  46. },
  47. fail: function(err) {
  48. console.log("record 失败", err);
  49. }
  50. })
  51. }
  52. })
  53. }
  54. },
  55. loadUserInfo: function() {
  56. var that = this;
  57. if (openid != "") {
  58. wx.getUserInfo({
  59. success: res => {
  60. console.log("wx获得用户信息:", res);
  61. var data = {
  62. "openid": openid,
  63. "user": res.userInfo
  64. }
  65. //发送信息给服务器获得用户信息
  66. wx.request({
  67. url: app.globalData.userInterfaceUrl + 'login',
  68. dataType: "json",
  69. method: "POST",
  70. data: data,
  71. success: function(res) {
  72. console.log("loadUserInfo(服務器返回) success", res.data);
  73. if (!res.data.error) {
  74. app.globalData.userInfo = res.data.data;
  75. that.setData({
  76. userInfo: app.globalData.userInfo
  77. })
  78. } else {
  79. console.log("服务器获取用戶信息失敗");
  80. //TODO:用户信息获取错误
  81. }
  82. },
  83. fail: function(e) {
  84. console.log("loadUserInfo(服务器返回)error", e);
  85. //TODO:错误
  86. },
  87. complete: function(e) {
  88. //完成
  89. }
  90. })
  91. // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
  92. // 所以此处加入 callback 以防止这种情况
  93. if (this.userInfoReadyCallback) {
  94. this.userInfoReadyCallback(res)
  95. }
  96. }
  97. })
  98. }
  99. },
  100. // 事件处理函数
  101. bindViewTap: function() {
  102. wx.navigateTo({
  103. url: '../logs/logs'
  104. })
  105. },
  106. onShow: function() {
  107. var that = this;
  108. console.log("openid:", openid);
  109. that.loadUserInfo();
  110. }
  111. })

达叔小生:往后余生,唯独有你

You and me, we are family !

90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通

简书博客: 达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

微信小程序我的界面的更多相关文章

  1. 微信小程序之跨界面传参

    微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" ...

  2. 微信小程序5 - 数据驱动界面

    微信小程序不可以使用js直接控制界面元素.而是通过改变 this.data中的属性,同步到界面 这个问题可以克服,带来的就是和H5不一样的编码方式.JS中更多的是改变数据的逻辑,而不是获取某个View ...

  3. 微信小程序开发--API界面交互

    一.wx:showActionSheet(上拉菜单) 属性 类型 默认值 必填 说明 itemList Array.<string>   是 按钮的文字数组,数组长度最大为 6 itemC ...

  4. 微信小程序如何刷新当前界面

    在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下 ...

  5. 迅雷首席架构师刘智聪:微信小程序的架构与系统设计的几点观感

    笔者注:本文来自于迅雷首席工程师刘智聪的个人分享,他毕业于南昌大学化学系,加入迅雷后设计开发了多款迅雷核心产品,凭借“大规模网络流媒体服务关键支撑技术”项目获得2015年国家科学技术进步奖二等奖,同时 ...

  6. 微信小程序开发:http请求

    在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...

  7. [转]微信小程序开发:http请求

    本文转自:http://www.cnblogs.com/dragondean/p/5921079.html 在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通 ...

  8. 微信小程序开发中的http请求总结

    在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...

  9. 教你如何一键反编译获取任何微信小程序源代码(图形化界面,傻瓜式操作)

    一键获取微信小程序源代码 Tips: 一键获取微信小程序源码, 使用了C#加nodejs制作 直接解压在D盘根目录下后就可以使用 将小程序文件放到 wxapkg目录下3 这个目录下有一些demo 可以 ...

随机推荐

  1. Jenkins+Gradle+Docker打docker镜像包上传至s3

    gradle打包跟maven打包的环境搭建有相似之处,可参考maven打包https://www.cnblogs.com/chenchen-tester/p/6408815.html 进入Jenkin ...

  2. SVD的基础详解

    目录

  3. Oracle使用触发器和mysql中使用触发器的比较

    一.触发器 1.触发器在数据库里以独立的对象存储, 2.触发器不需要调用,它由一个事件来触发运行 3.触发器不能接收参数 --触发器的应用 举个例子:校内网.开心网.facebook,当你发一个日志, ...

  4. day04-Servlet介绍(1)

    1.servlet的概述 a.什么是servlet --servlet是javaWeb的三大组件(Listener,Filter)之一,他属于动态资源 --servlet的作用是(10086): 服务 ...

  5. js实现一个简单的登录页面

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. sha1 算法源码

    原来指望sha1 这种烂大街的算法 不会出什么幺蛾子 结果<linux C编程实战Code>bt章节的sha1 代码 我在linux和windows下的结果不一样 然后用了哈希工具查看了下 ...

  7. Python中的 __name__有什么作用?最详细解读

    案例说明: Python中的模块(.py文件)在创建之初会自动加载一些内建变量,__name__就是其中之一.Python模块中通常会定义很多变量和函数,这些变量和函数相当于模块中的一个功能,模块被导 ...

  8. 论Activity的转换

    论Activity的互相转换 这次任务是实现 1.在主屏幕输入自己的姓名,单击评估按钮 2.进入第二个界面,并将主屏幕输入的姓名传递给第二个界面 3.在第二个界面进行问题回答: 4.第二个界面的回答结 ...

  9. Vue 获取登录用户名

    本来是打算登录的时候把用户名传过去,试了几次都没成功,然后改成用cookie保存用户名,然后在读取就行了, 登录时候设置cookie setCookie(c_name,c_pwd,exdays) { ...

  10. k8s1.13.3安装istio(helm方式)

    官方文档:https://istio.io/zh/docs/setup/kubernetes/install/helm/ 一.环境信息 centos7 k8s1.13.3 主机名 ip cpu ram ...