小程序实战分享5：UI创建二与拉取用户信息

1，商品详情页

在上一课的基础上继续编码。在pages目录上单击+号，添加goods目录：

在目录goods下，添加两个文件goods.js与goods.wxml。goods.js文件的内容可由index.js修改得来：

在app.json添加goods页面：

2，商品详情页UI

goods.wxml:

在app.wxss中添加如下样式：

/*商品详情页*/ .weui-panel { background-color: #FFFFFF; margin-top: 10px; position: relative; overflow: hidden; padding-bottom: 100px; } .weui-panel__hd { padding: 14px 15px 10px; color: #999999; font-size: 13px; position: relative; } .weui-panel__bd{ display: block; } .weui-media-box__info { margin-top: 10px; padding-bottom: 15px; font-size: 13px; color: #CECECE; line-height: 1em; list-style: none; overflow: hidden; } .weui-article { padding: 0; font-size: 15px; line-height: 1.5; text-align: left; } .weui-media-box__info__meta { float: left; padding-right: 1em; } .weui-flex { display: -webkit-box; display: -webkit-flex; display: flex; } .weui-flex__item { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin:auto 0; }

这个页面主要使用了三个组件：view,button,image。

button属性：

button大部分属性都是控制样式的，各个属性都应该试用一下。

image属性:

图片的model最常用的是asfectFit，保持比例保持全部。

3，设置页面标题

修改index.js中的onLoad方法，通过wx.setNavigationBarTitle设置标题：

my.js:

在goods.js中设置标题：

注：该设置在运行中存在异常，不要纠结。

4，小程序自带的tabbar功能

在app.json中添加这样的设置：

tabBar彩色部分即是配置信息。目前不能设置icon，仅能实现基本的页面跳转。还使用上一节课中自定义的tabbar就好。将彩色代码删除。

5，用户头像

清空my.wxml，只留下：

<include src="../header.wxml"/> <include src="../footer.wxml"/>

在中间添加：

6，已购买与已发布商品的链接

在my.wxml中添加：

这两个cell类似，只是文本不同。对应添加的样式是：

/*我的页面*/ .weui-cell { padding: 10px 15px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .weui-cells { margin-top: 1.17647059em; background-color: #FFFFFF; line-height: 1.41176471; font-size: 17px; overflow: hidden; position: relative; } .weui-cells:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .weui-cells:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .weui-cell_access { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: inherit; } .weui-cell__bd { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .weui-cell_access .weui-cell__ft { padding-right: 13px; position: relative; text-align: right; color: #999999; } .weui-cell_access .weui-cell__ft:after { content: " "; display: inline-block; height: 6px; width: 6px; border-width: 2px 2px 0 0; border-color: #C8C8CD; border-style: solid; -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); top: -2px; position: absolute; top: 50%; margin-top: -4px; right: 2px; }

可以给页面添加一个默认的背景色，在app.wxss中添加：

page{ background-color: #f8f8f8; }

这是一个组件样式，作用于所有页面。

7，修改tabbar样式

添加了页面背景之后，给自定义的tabbar添加一个上边线。拷贝.weui-cells:before样式，改名为.weui-tabbar:before。

效果：

8，已购买与已发布商品的页面

在系统文件夹里，复制index为bought-goods、published-goods，再修改文件名与目录名称相同。在app.json添加页面声明：

在my.wxml中添加navigator url：

my页面效果：

9，使用接口获取用户信息

在my.js中添加userInfo数据对象：

修改my.wxml，添加数据绑定：

在my.js onLoad中实现用户登陆与信息拉取：

定义var that = this，是为了在wx.getUserInfo的匿名回调中使用this对象。可以尝试直接使用this，并不能真正获取当前页面。这是由js的闭包作用域决定的。