前言

感谢! 承蒙关照~

微信小程序我的界面

界面效果:

界面结构:

小程序代码:

我们先看me.json代码

{
"navigationBarTitleText": "个人中心"
}

me.wxml代码

<view class="bg">
<view class="head">
<view class="headIcon">
<image src="{{userInfo.avatarUrl}}" style="width:70px;height:70px;"></image>
</view>
<view class="login">
{{userInfo.nickName}}
</view>
</view>
<button class="button" open-type="getUserInfo" wx:if="{{hasUserInfo}}" bindgetuserinfo="doAuthorization"> 微信登录 </button>
</view> <view class="hr"></view>
<view class='item'>
<view class="title">手机绑定</view>
<view class="detail2">
<text>></text>
</view>
</view>
<view class="line"></view> <view class='item'>
<view class="title">阅读文章</view>
<view class="detail2">
<text>></text>
</view>
</view> <view class="hr"></view>
<view class='item'>
<view class="title">电影推荐</view>
<view class="detail2">
<text> ></text>
</view>
</view>
<view class="line"></view>
<view class="item">
<view class="title">我的收藏</view>
<view class="detail2">
<text> ></text>
</view>
</view>
<view class="line"></view>
<view class="item">
<view class="title">意见反馈</view>
<view class="detail2">
<text> ></text>
</view>
</view>
<view class="line"></view>
<view class="item">
<view class="title">设置</view>
<view class="detail2">
<text> ></text>
</view>
</view>
<view class="hr"></view>

me.wxss代码

.bg {
height: 150px;
background-color: #d53e37;
} .head {
display: flex;
flex-direction: column;
} .headIcon {
display: flex;
justify-content: center;
} .login {
display: flex;
color: #fff;
font-size: 15px;
margin-top: 15rpx;
justify-content: center;
} .button {
margin: 10px;
font-size: 14px;
} .head image {
border-radius: 50%;
} .hr {
width: 100%;
height: 15px;
background-color: #f4f5f6;
} .item {
display: flex;
flex-direction: row;
} .title {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
font-size: 15px;
} .detail2 {
font-size: 15px;
position: absolute;
right: 10px;
height: 50px;
line-height: 50px;
color: #888;
} .line {
border: 1px solid #ccc;
opacity: 0.2;
}

me.js代码

//index.js
//获取应用实例
const app = getApp()
var openid = wx.getStorageSync("openid");
Page({
data: {
hasUserInfo: openid == ""
},
doAuthorization: function(e) {
var that = this;
console.log("调用了 doAuthorization 授权");
// console.log(e);
if (e.detail.userInfo == null) { //为null 用户拒绝了授权
//coding。。。。
console.log("用户拒绝授权");
} else {
//授权
wx.login({
success: function(res) {
console.log('login:code', res.code)
//发送请求
wx.request({
url: app.globalData.userInterfaceUrl + 'record/' + res.code, //接口地址
method: 'GET',
header: {
'content-type': 'application/json' //默认值
},
success: function(res) {
console.log("record 成功", res.data)
var res = res.data;
if (res.error) { //发生错误
console.log("错误:", res.msg);
} else { //返回成功
try {
wx.setStorageSync('openid', res.data.openid)
openid = wx.getStorageSync("openid");
} catch (e) {
console.log("wx.login 错误", e);
}
//加载用户信息
that.loadUserInfo();
that.setData({ //设置变量
hasUserInfo: false
});
}
},
fail: function(err) {
console.log("record 失败", err);
}
})
}
})
} },
loadUserInfo: function() {
var that = this;
if (openid != "") {
wx.getUserInfo({
success: res => {
console.log("wx获得用户信息:", res);
var data = {
"openid": openid,
"user": res.userInfo
}
//发送信息给服务器获得用户信息
wx.request({
url: app.globalData.userInterfaceUrl + 'login',
dataType: "json",
method: "POST",
data: data,
success: function(res) {
console.log("loadUserInfo(服務器返回) success", res.data);
if (!res.data.error) {
app.globalData.userInfo = res.data.data;
that.setData({
userInfo: app.globalData.userInfo
})
} else {
console.log("服务器获取用戶信息失敗");
//TODO:用户信息获取错误
}
},
fail: function(e) {
console.log("loadUserInfo(服务器返回)error", e);
//TODO:错误
},
complete: function(e) {
//完成
}
})
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}, // 事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onShow: function() {
var that = this;
console.log("openid:", openid);
that.loadUserInfo();
}
})

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

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. C#使用CefSharp开源库开发Chrome 浏览器

    一.介绍        这个东西我以前没有接触过,但是公司项目里面有用到这个东西,所以就顺便研究一下.今天只是做了 WinForm 的测试,有时间了在试试 WPF 是如何实现的.刚开始一塌糊涂,有点麻 ...

  2. 面试简单整理之IO

    1.字节流,字符流 整个Java IO体系都是基于字节流(InputStream/OutputStream) 和 字符流(Reader/Writer)作为基类,根据不同的数据载体或功能派生出来的. 2 ...

  3. 教程:使用cPanel管理域名和数据库

    cPanel是一个基于web的基于web的控制面板,它简化了许多常见的系统管理任务,如网站创建.数据库部署和管理等.本指南向您展示了如何使用cPanel用户帐户管理域和数据库.所有这些指令都与位于端口 ...

  4. 计数排序之python

    话说,一口气不能吃个胖子, 一次性 学习 计数排序, 也确实容易消化不良. 下面,我们逐步学习下计数排序. 1.  已知一个简单列表 l1 = [5, 4, 3], 分析下这个列表的情况 5 > ...

  5. [翻译]理解分析Linux里的101个ELF文件

    原文:https://linux-audit.com/elf-binaries-on-linux-understanding-and-analysis/

  6. Robot Framework+python的安装,配置,环境搭建(纯白篇)

    弄了大半天 终于把-Robot Framework-弄好了,总是一个发现问题,一个一个去解决的过程,只是时间嘛,咳咳咳咳 言归正传 第一. 记住了 Robot Framework 的库 只支持 pyt ...

  7. PID25 / 合并果子 ☆

    这里用到了STL里面的priority_queue,我也不是很精通基本上属于现学现卖阶段,http://www.cnblogs.com/flyoung2008/articles/2136485.htm ...

  8. Dom4j 封装DOM和SAX 的方法

    Dom4j 封装DOM的解析XML文件的方法: List<Book> bookList=new ArrayList<Book>(); //1.1 建立一个解析器工厂: Docu ...

  9. 图解HTTP第九章

    基于 HTTP 的功能追加协议 1>HTTP 的瓶颈有哪些: 2>消除 HTTP 瓶颈的 SPDY,缩短 Web 页面的加载时间 [1]SPDY 的设计与功能 [2]SPDY 消除 Web ...

  10. Innodb 状态的部分解释

    Innodb_buffer_pool_pages_data Innodb buffer pool缓存池中包含数据的页的数目,包括脏页.单位是page. Innodb_buffer_pool_pages ...