微信小程序-关于我们页面模板-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序-关于我们页面模板。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序关于我们页面实现

模板一：开发者模板

JS

// pages/about/about.js
Page({
    data: {
        developer:{
            img:"/image/cy_wx.jpg",
            items:[
                {title:"开发者姓名",text:"CY"},
                {title:"开发者微信号",text:"CY1871263099"},
                {title:"开发者邮箱",text:"1871263099@qq.com"},
                {title:"开发者博客",text:"http://121.37.66.46/CYBoke/#/"},
                {title:"开发者CSDN博客",text:"https://blog.csdn.net/qq_59636442?type=blog"},
            ],
            versions:"1.0.0"
        }
    },
})

WXML

<!--pages/about/about.wxml-->
<view>
    <view class="header">
        <image src="{{ developer.img }}"></image>
        <text>微信扫一扫添加微信</text>
    </view>
    <view class="main">
        <view class="developerItemView" wx:for="{{ developer.items }}" wx:key="index">
            <view>{{ item.title }}</view>
            <view>{{ item.text }}</view>
        </view>
    </view>
    <view class="footer">
        <text>版本号：{{ developer.versions }}</text>
    </view>
</view>

WXSS

/* pages/about/about.wxss */
/*二维码区域*/
.header{
    width:300rpx;
    margin:20rpx auto 60rpx;
    text-align: center;
    font-size:26rpx;
}
.header > image{
    width: 300rpx;
    height:300rpx;
}
 
/*开发者信息区域*/
.main{
    padding:0 40rpx;
}
.developerItemView{
    padding-bottom: 30rpx;   
}
.developerItemView > view:nth-child(1){
    font-size: 30rpx;
    color: #67C23A;
    padding-bottom: 20rpx;
}
.developerItemView > view:nth-child(2){
    font-size: 26rpx;
    color:rgb(78, 78, 78);
}

/* 版本号与版权 */
.footer{
    margin-top: 50rpx;
    text-align: center;
    font-size: 0.7rem;
    color: #67C23A;
}