微信小程序静态页面

这篇文章主要为大家详细介绍了微信小程序静态页面，具有一定的参考价值，可以用来参考一下。

感兴趣微信小程序静态页面的小伙伴，下面一起跟随四海网的小编罗X来看看吧。<br>
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
    })
}

注意：微信小程序的语法与HTML和CSS不太相同，但本质是一样的。

本文来自：http://www.q1010.com/189/16386-0.html

注：关于微信小程序静态页面的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：微信小程序