一、前言
需要知识：
HTML
CSS
注意：微信小程序的语法与HTML和CSS不太相同，但本质是一样的。
要求：
- 进入开发者工具并且创建一个测试小程序， 选择建立快速模板
- 在pages目录底下新建一个first的文件夹，其中包括指定的四个文件，并且设置第一个页面为first页面
3.在first.wxml里制作如图ui界面，采用盒模型以及flex布局
4.用户头像和待付款等四个圆圈统一用黑色的圆圈表示
5.用户id和余额应在first.js文件里面写，然后wxml里面获取js的内容，具体操作培训已讲 - 采用rpx布局，根据手机大小自适应
- 可以尝试在first.json文件里面将顶部样式做一些修改
要求样张：
image.png
二、正文
由于微信小程序中，自动分为WXML、WXSS、JS和JSON文件，所以需要在不同的文件中写出不同的代码。
image.png
1.在JSON中设置顶部样式
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#003366",
"navigationBarTitleText": "个人中心",
"navigationBarTextStyle": "white"
}
2.在WXML中建立起网页框架，依次写下要求中的内容
<!--pages/first/first.wxml-->
<view>
<view class="flex-container">
<view class="UserHeadImage">
<image></image>
</view>
<view class="UserName">
<view class="user-name" catchtap="changeMoney">{{motto}}</view>
<view class="PersonalitySignature">用户可自定义个性签名(限制字数）</view>
</view>
<view class="money">{{balance}}</view>
</view>
<view class="Order">
<view class="MyOder">我的订单</view>
<view class="AllofOrder">全部订单</view>
<view>
<image class="Instr" src="tishi.png"></image>
</view>
</view>
<view class="State">
<view class="Sta">
<image></image>
<view class="Center">待付款</view>
</view>
<view class="Sta">
<image></image>
<view class="Center">待确认</view>
</view>
<view class="Sta">
<image ></image>
<view class="Center">进行中</view>
</view>
<view class="Sta">
<image></image>
<view class="Center">待评价</view>
</view>
</view>
<view class="Mine">
<view class="Trans">
<view>我的钱包</view>
<image class="Instru" src="tishi.png"></image>
</view>
<view class="Trans">
<view>我的收藏</view>
<image class="Instru" src="tishi.png"></image>
</view>
<view class="Trans">
<view>地址管理</view>
<image class="Instru" src="tishi.png"></image>
</view>
<view class="Trans">
<view>联系客服</view>
<image class="Instru" src="tishi.png"></image>
</view>
<view class="Trans">
<view>投诉建议</view>
<image class="Instru" src="tishi.png"></image>
</view>
</view>
</view>
3.在WXSS中设置不同类的属性
/* pages/first/first.wxss */
.container{
display: flex;
display: -webkit-flex;
align-items: left;
margin: 2%;
}
.flex-container {
display: flex;
display: -webkit-flex;
align-items: center;
}
.UserHeadImage {
margin: 50rpx;
margin-left: 35rpx;
}
.UserHeadImage image{
width: 130rpx;
height: 130rpx;
background-color: #000000;
border-radius: 65rpx;
}
.user-name {
width: 350rpx;
height: 75rpx;
}
.PersonalitySignature {
font-size: 20rpx;
color: #665c5c;
}
.money {
color: red;
font-size: 30rpx;
margin-bottom: 55rpx;
margin-left: 5rpx;
}
.Order {
display: flex;
margin-left: 35rpx;
}
.MyOrder {
margin-right: 30rpx;
}
.AllofOrder {
margin-left: 380rpx;
font-size: 30rpx;
color: gray;
padding-top: 7rpx;
}
.State {
margin-top: 20rpx;
display: flex;
margin: 25rpx;
}
.Sta {
margin: 37rpx;
}
.Center {
text-align: center;
font-size: 20rpx;
color: gray;
}
.Mine {
display: flex;
flex-direction: column;
margin-top: 50rpx;
margin-left: 35rpx;
}
.Trans {
display: flex;
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.Instru {
margin-left: 500rpx;
width: 50rpx;
height: 50rpx;
}
.Sta image {
width: 100rpx;
height: 100rpx;
background-color: #000;
border-radius: 50rpx;
}
.Instr{
width: 50rpx;
height: 50rpx;
}
4.在JS里面写用户ID和余额 然后再在WXML里引用。
data: {
motto: '用户ID',
balance: '￥1250,18'
}
5.在JS的末尾加了一个事件绑定函数，使用catchtap，点击用户ID余额就会改变
changeMoney: function (e) {
this.setData({
Amount: -12345
})
}
