微信小程序关于我们页面实现
模板一：开发者模板
JS
代码语言：javascript
复制// 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
代码语言：javascript
复制<!--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
代码语言：javascript
复制/* 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;
}
