微信小程序简单页面

在微信小程序里写前端页面 大致和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
    })
  }

})