微信小程序之简单个人中心页面

第一步：准备工作

①回顾上一节的内容，我们进行了文件的删除和创建操作，如果小伙伴们对下面的图片不眼熟，建议回到上一节去看喔~

②个人页面ui设计(User Interface Design)图如下

小提示：ui设计图不是必须的，如果没有ui设计师你可以选择copy其他软件的界面或者自己画一个大概的界面轮廓再用代码进行实现。

第二步：页面结构实现

（一）：从上往下看，第一部分显然是一张图片

①选择硬盘打开并放入一张图片

②图片引入:

③查看模拟器：

结果分析：

我们发现两个问题，一是图片高度过高导致图片被拉伸，二是下面这张图片我们并不需要。

解决方法：

在本页面样式控制文件(index.wxss)改写图片高度(height)为合适的高度

在本页面骨架文件(index.wxml)删除代码，保存代码，观察模拟器。

再次分析：

观察效果图，我们又发现了一个问题，再调小图片高度图片势必会被扭曲，而保持该高度又感觉图片太大了。

解决方法：

右键硬盘打开该图片，并对该图片进行裁剪。

最终效果图如下

（二）：引入并修改用户头像样式

我们在使用小程序的时候，常常会遇到授权请求

其实显示用户的头像和昵称并不需要拿到授权

上一节我们介绍了小程序的image组件,现在我们需要使用另一个组件

①

open-data组件作用是获取微信开放信息(无需授权)，如用户头像，昵称，性别，地区等

分析：

观察模拟器图片，我们发现bg.jpg和文字之间出现了空白，这些空白是小程序自动给open-data的占位，而我们希望出现的用户信息并没有出现，这是因为我们并没有告诉小程序具体需要展示的信息，在上一节我们使用image展示图片的时候需要通过src属性告诉小程序选择展示的图片的具体路径，在open-data中也是如此(通过type属性选择需要展示什么信息)。

②展示用户头像

用户头像的type属性值为userAvatarUrl

具体代码如下

模拟器效果图如下

分析：

这个图片是作者君的头像(哪个微信在使用小程序就显示哪个微信的头像)，但是系统给他的默认宽高样式和我们想要的宽高不符，所以我们接下来应该在index.wxss对样式进行修改。

③修改头像样式

想要修改open-data的样式，首先需要选中它,参考修改image时的代码

首先，我们需要选择open-data

然后，设置width,height都为140rpx（根据你自己的需求设置）

具体代码图如下

模拟器效果图如下

分析：

出乎我们意料的是，头像的宽高并没有随着我们的设置而改变。

这是open-data组件自身的性质决定的，在编译器下方，选中Wxml一栏，可以看到我们在index.wxml中所写的代码。

两张图对比之后我们发现小程序自动在我们写的image和view组件外面加了一个page组件，这就是我们在中直接书写文字也能显示的原因。

Wxml一栏的主要作用是帮助我们查看组件的样式，点击左下角的image组件，在右下角的Styles部分出现image的样式。

显然，第一张图的width和height是我们在index.wxss中对image组件进行的设置。第二张图width和height是小程序官方给image的默认样式，因为我们手动对宽高进行了设置，所以系统默认宽高就被覆盖了，图中表现为被一条线划去。

选中open-data组件，查看样式微信位置模拟器哪个好，如下图

分析：

width和height是我们设置的未起作用的宽高。而image组件系统自动设置了display:inline-block和overflow:hidden，我们不妨猜测其中的一个或者两个起到了能让我们设置宽高的作用。

将display:inline-block加入open-data的样式设置中，模拟器如下图

好起来了，宽高设置起效了。我们再尝试加入overflow:hidden

可以看到，模拟器没有任何变化，为了便于后面说明overflow的作用，我们现在把overflow:hidden删去。

重点：下面我们对wxss的语法进行补充说明

selector {declaration1; declaration2; ... declarationN }

①selector指选择器，用来选中需要设置样式的组件，例如：image{}选中了页面中所有的image组件.

②{}内的叫声明，可以是一条或者多条，格式是property:value(即属性：属性值)，例如：{width:750rpx}。如果只有一条声明，末尾可以加;例如：{width:750rpx;}也可以不加;例如：{width:750rpx}。如果有多声明，每条声明间用;分隔，最后一条声明可以加也可以不加;例如image{width:750rpx;height:170rpx}

头像图片已经有了，下面我们把头像变成圆形

通过一条wxss声明border-raidus:50%可将某组件设置为圆形

观察模拟器效果图，我们发现并没有改变图像形状。这是因为超出的部分默认是继续显示的，我们只需改成超出部分不再显示即可。通过设置overflow:hidden即可。

总结：

通过设置open-data的宽高和形状我们可以得出，有的时候你设置的wxss声明不一定有用，可以需要某些特殊声明的配合。

（三）：引入并修改用户昵称样式

我们通过type="userAvatarUrl"引入了用户头像，与引入头像类似，引入昵称使用type="userNickName"。

分析：

①开发者的微信用户昵称为Yu，而模拟器上只出现了一个u，很显然，还有一个Y被遮住了，这是因为头像和昵称都是open-data组件,所以我们对头像设置的样式同样作用在了昵称上。

②在wxml的代码中，时间和地点分别在两行，模拟器中也出现在两行，而两个open-data分别在两行，在模拟器中却出现在同一行。这是因为是否出现在同一行与代码的位置无关，与组件的类型(display的取值)有关。

查看view组件的样式，我们可以看到在view组件中display：block,而open-data组件则被我们设置为了display:inline-block

display的作用是设置组件的显示类型，当它的值为block的时候该组件叫块级组件，可以通过width和height设置宽高，但无论内容多少都独自占据一整行，例如view组件。当它的值为inline-block的时候该组件叫内联块组件，可以设置宽高，且不独占一行，即多个内联块组件可以显示在同一行。当它的值为inline的时候默认情况下不能设置宽高，例如默认的open-data组件。

解决方法：

现在我们希望把用户头像和昵称放在两行，依据现有知识我们只需将其中一个的display设置为block即可。

问题来了，我们之前使用组件名作为选择器，如open-data{}实际上选中了所有的open-data组件，无法满足我们的需求，所以我们需要一种新的选择方式。

id选择器：通过组件的id属性和id名完成对组件的选择

具体格式为：

例如userName">

注意：如果一个组件中有多个属性，那么不同属性间需要用空格隔开

例如：userName" type="userNickName">

设置完组件的id后我们需要在wxss通过#id名{一条或多条声明}的形式完成样式的设置。

如下图

分析：

我们通过id选择器分别选中的头像和昵称组件，并将头像设置为了块级组件，使其能设置宽高并独占一行。昵称虽然没有设置为块级组件，但是因为上面的头像和下面的view组件都独占一行，所以也被迫独占一行。

（四）：将用户头像和昵称移动到指定位置

①在wxss通过设置postion配合top,left，bottom,right控制位置

例如：

其中,position:relative指该组件将相对于正常位置进行移动。而top和left都是配合position进行使用的，top:-80rpx指移动后的上顶点距离未移动时位置的上顶点位移负80rpx(即向上)，如果是80rpx则是向下移动80rpx；left:310rpx指移动后位置距离未移动时位置左顶点310rpx（即向右位移310rpx）。

在这里我们并未使用bottom和right,这是因为top和bottom冲突，left和right冲突，并且top的优先级比bottom高，而left的优先级比right高。所以绝大部分情况我们只使用top和left就可以了。

②现在我们故技重施，将昵称也移过去

首先，通过以下代码将位置移上去

③接下来，让字体居中。让字体居中不适合用left进行位移，这是因为不同用户的昵称字体个数往往不一样，没有一个固定的大小可以让我们设置。除此之外，我们可以通过text-align:center直接设置字体居中，非常方便。

注意：text-align:center设置的居中指整个宽度里字体居中，而open-data组件的默认宽度不是整个屏幕，所以我们先用display:block使open-data组件宽度为整个屏幕(bolck级组件独占一行微信位置模拟器哪个好，所以宽度是整个屏幕)，再使用text-algin:center将昵称居中。

内容过于单调，我们在后面加了一个view组件并写上收藏两个字，再运用上面所学的text-align将这两个字居中。

如果有不懂的地方可以加小编微信或者直接在下方留言喔~

到这里本节的内容就结束了喔，下节将对本页面进行再一步优化