微信小程序（第十八章）- 关于我们页面实现

页面结构实现

1. 在app.json里面的pages定义"pages/aboutUs/aboutUs";
2. 定义1个view，给其添加id：qrCodeView,然后在其中定义图片和文字；
3. 定义1个view，给其添加id：developerView;
4. 在developerView里面定义6个子view，分别用来承载开发者姓名、学校、电话、微信号、邮箱、CSDN博客号，给其添加class:developerItemView;
5. 在developerItemView里定义2个view，用来承载标题和文字;

代码如下：

<!--二维码区域-->
<view id="qrCodeView">
    <image src="/images/xsdkq_aboutUs_wxewm.png"></image>
    <text>微信扫一扫添加开发者微信</text>
</view>

<!--开发者信息区域-->
<view id="developerView">
    <view class="developerItemView">
        <view>开发者姓名</view>
        <view>史博今</view>
    </view>
    <view class="developerItemView">
        <view>开发者学校</view>
        <view>海淀区实验小学（花园桥小区）</view>
    </view>
    <view class="developerItemView">
        <view>开发者电话</view>
        <view>17601051186</view>
    </view>
    <view class="developerItemView">
        <view>开发者微信号</view>
        <view>sbj_hacker</view>
    </view>
    <view class="developerItemView">
        <view>开发者邮箱</view>
        <view>bj0425@126.com</view>
    </view>
    <view class="developerItemView">
        <view>开发者CSDN博客号</view>
        <view>sbjwhite_hacker</view>
    </view>
</view>

页面样式实现

1. 给qrCodeView添加宽度、上下左右外边距；
2. 给qrCodeView里面的图片设置宽高，文字设置大小、居中即可；
3. 给developerView设置左右内边距；
4. 给developerItemView设置下外边距；
5. 给developerItemView里的第一个子view设置颜色和文字大小，第一个子view添加下内边距/下外边距；

代码如下：

/*二维码区域*/
#qrCodeView{
    width:300rpx;
    margin:20rpx auto 60rpx;
    text-align: center;
    font-size:26rpx;
}
#qrCodeView > image{
    width: 300rpx;
    height:300rpx;
}
 
/*开发者信息区域*/
#developerView{
    padding:0 40rpx;
}
.developerItemView{
    padding-bottom: 30rpx;   
}
.developerItemView > view:nth-child(1){
    font-size: 30rpx;
    color: #87cefa;
    padding-bottom: 20rpx;
}
.developerItemView > view:nth-child(2){
    font-size: 26rpx;
    color:#888;
}

页面跳转实现

找到我的页面里的关于我们，用组件跳转；

代码如下：

<view bindtap="goAboutUs">
        <text>关于我们</text>
        <view class="arrow"></view>
    </view>

goAboutUs(){
        wx.navigateTo({
          url: '/pages/aboutUs/aboutUs',
        })
      },