在微信小程序里写前端页面 大致和HTML语法一致 只是微信小程序把常用组件进行了包装
所以同样需要构建盒模型 在wxss里设置样式 以便调试和更改
首先在json内设置顶部式样
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#003366",
"navigationBarTitleText": "个人中心",
"navigationBarTextStyle": "white"
}
然后建立网页框架 依次写要求内容 在wxss里面根据不同的类设置属性 这里不再赘述
新学的内容是在js里面写用户ID和余额 然后再在wxml里引用
在js的末尾加了一个事件绑定函数 使用catchtap 点击用户ID 余额就会改变
下面给出代码
WXML
{{name}}
用户可自定义签名（限制字数）
{{Amount}}
我的订单
全部订单
待付款
待确认
进行中
待评价
我的钱包
我的收藏
地址管理
联系客服
投诉意见
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
})
}
})