要求：
1. 进入开发者工具并且创建一个测试小程序， 选择建立快速模板
2. 在pages目录底下新建一个first的文件夹，其中包括指定的四个文件，并且设置第一个页面为first页面
3.在first.wxml里制作如图ui界面，采用盒模型以及flex布局
4.用户头像和待付款等四个圆圈统一用黑色的圆圈表示
5.用户id和余额应在first.js文件里面写，然后wxml里面获取js的内容，具体操作培训已讲
6. 采用rpx布局，根据手机大小自适应
把js写入wxml
<view>
{{username}}
<picker class='letter1'>用户可自定义个性签名（限制字数）</picker>
</view>
</view>
<view>{{money}}</view>
</view>
采用flex布局
.container1{display: flex;
justify-content: space-between
}
图片的大小可用widthFix调试
<view><image class='one' src='tishi.png' mode='widthFix'></image></view>
完整代码
<!--pickerages/first/first.wxml-->
<view>
<view class='container1'>
<view class='box5'>
<image class='two' src='yuan.jpg' mode='widthFix'></image>
<view>
{{username}}
<picker class='letter1'>用户可自定义个性签名（限制字数）</picker>
</view>
</view>
<view>{{money}}</view>
</view>
<view class='box1'>
<text>我的订单</text>
<view>
<text>全部订单</text>
<image class='one' src='tishi.png' mode='widthFix'></image>
</view>
</view>
<view class='box4'>
<view><image class='two' src='yuan.jpg' mode='widthFix'></image></view>
<view><image class='two' src='yuan.jpg' mode='widthFix'></image></view>
<view><image class='two' src='yuan.jpg' mode='widthFix'></image></view>
<view><image class='two' src='yuan.jpg' mode='widthFix'></image></view>
</view>
<view class='box2'>
<text>待付款</text>
<text>待确认</text>
<text>进行中</text>
<text>待评价</text>
</view>
<view class='box3'>
<view>
<picker>我的钱包</picker>
<picker>我的收藏</picker>
<picker>地址管理</picker>
<picker>联系客服</picker>
<picker>投诉建议</picker>
</view>
<view>
<view><image class='one' src='tishi.png' mode='widthFix'></image></view>
<view><image class='one' src='tishi.png' mode='widthFix'></image></view>
<view><image class='one' src='tishi.png' mode='widthFix'></image></view>
<view><image class='one' src='tishi.png' mode='widthFix'></image></view>
<view><image class='one' src='tishi.png' mode='widthFix'></image></view>
</view>
</view>
</view>
最后页面效果
网友评论