在微信小程序里写前端页面 大致和HTML语法一致 只是微信小程序把常用组件进行了包装
所以同样需要构建盒模型 在wxss里设置样式 以便调试和更改
首先在json内设置顶部式样
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#003366",
"navigationBarTitleText": "个人中心",
"navigationBarTextStyle": "white"
}
然后建立网页框架 依次写要求内容 在wxss里面根据不同的类设置属性 这里不再赘述
新学的内容是在js里面写用户ID和余额 然后再在wxml里引用
在js的末尾加了一个事件绑定函数 使用catchtap 点击用户ID 余额就会改变
下面给出代码
WXML
<!--pages/first/first.wxml-->
<view class="container">
<view class="UserHead">
<image style="width:120rpx; height:120rpx; background-color: #000000;border-radius:60rpx;"></image>
</view>
<view class="Username">
<view class="user-name" catchtap='changeMoney'>{{name}}</view>
<view class="signature">用户可自定义签名（限制字数）</view>
<view class="money">{{Amount}}</view>
</view>
<view class="PersonalOrder">
<view class="myorder">我的订单</view>
<view class="allorder">全部订单<image class="img_1" src="/pages/first/tishi.png"></image></view>
<view>
<image class="icon_1"></image>
<image class="icon_2"></image>
<image class="icon_3"></image>
<image class="icon_4"></image>
</view>
<view class="text_details">
<text class="details">待付款</text>
<text class="details">待确认</text>
<text class="details">进行中</text>
<text class="details">待评价</text>
</view>
</view>
<view class="PersonalList">
<view class="iconfont">我的钱包<image class="img" src="/pages/first/tishi.png"></image></view>
<view class="iconfont">我的收藏<image class="img" src="/pages/first/tishi.png"></image></view>
<view class="iconfont">地址管理<image class="img" src="/pages/first/tishi.png"></image></view>
<view class="iconfont">联系客服<image class="img" src="/pages/first/tishi.png"></image></view>
<view class="iconfont">投诉意见<image class="img" src="/pages/first/tishi.png"></image></view>
</view>
</view>
WXSS
/* pages/first/first.wxss */
.iconfont{
font-size: 25rpx;
line-height: 70rpx;
margin-left: 25rpx;
}
.img{
width: 25rpx;
height: 25rpx;
margin-left: 570rpx;
}
.container{
display: flex;
display: -webkit-flex;
align-items: left;
margin: 2%;
}
.UserHead{
margin-top: -160rpx;
margin-left:25rpx;
}
.user-name{
margin-left: 200rpx;
margin-top: -120rpx;
font-size: 30rpx;
}
.signature{
font-size: 20rpx;
color:rgba(0, 0, 0, 0.671);
margin-top: 25rpx;
margin-left: 200rpx;
}
.money{
margin-top:-85rpx;
margin-left:600rpx;
color: red;
font-size: 25rpx;
}
.myorder{
font-size: 30rpx;
margin-left: 25rpx;
margin-top: 45rpx;
}
.allorder{
font-size: 25rpx;
color: gray;
margin-left: 575rpx;
margin-top: -30rpx;
}
.img_1{
width: 25rpx;
height: 25rpx;
margin-left: 20rpx;
}
.icon_1{
width:90rpx;
height:90rpx;
background-color: #000000;
border-radius:45rpx;
margin-left: 50rpx;
margin-top: 50rpx;
}
.icon_2{
width:90rpx;
height:90rpx;
background-color: #000000;
border-radius:45rpx;
margin-left: 90rpx;
margin-top: 50rpx;
}
.icon_3{
width:90rpx;
height:90rpx;
background-color: #000000;
border-radius:45rpx;
margin-left: 90rpx;
margin-top: 50rpx;
}
.icon_4{
width:90rpx;
height:90rpx;
background-color: #000000;
border-radius:45rpx;
margin-left: 90rpx;
margin-top: 50rpx;
}
.details{
color: gray;
font-size: 20rpx;
margin-top: 20rpx;
margin-left: 120rpx;
}
.text_details{
margin-left: -57rpx;
}
.PersonalList{
margin-top: 50rpx;
}
JSON
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#003366",
"navigationBarTitleText": "个人中心",
"navigationBarTextStyle": "white"
}
JS
// pages/first/first.js
Page({
/**
* 页面的初始数据
*/
data: {
name:"用户ID",
Amount:"¥1250,18"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
changeMoney: function (e) {
this.setData({
Amount: -1
})
}
})
网友评论