微信小程序云开发实战-答题积分赛小程序

界面交互篇：关于程序页布局样式与逻辑交互开发

关于程序页效果图

关于程序布局与样式实现

这个关于程序页的页面布局，设计上是比较简洁的，然后还实现了一键复制联系方式或信息的功能。我曾搭建的消防安全知识答题、网络安全知识答题、安全生产知识答题等，都是使用这种方式实现的。

页面布局

在about.wxml中，编写布局代码：

<view class="top_contain">
      <view class="des_contain">
            <view class="name">姑苏洛言</view>
            <view class="sign">优质小程序创作者</view>
      </view>
      <view class="avator_box">
            <image class="avator" src="/images/0.png"></image>
      </view>
</view>
<view class="contain">
      <view class="title">程序简介</view>
      <view class="description">
            <text space="emsp" decode="{{ true }}">{{des}}</text>
      </view>
      <view class="title">联系方式</view>
      <view class="description">
            <view class="tip" bindtap="copy" data-copy="木番薯科技">
                  <view>公.众.号</view>:
                  <text>木番薯科技</text>
            </view>
            <view class="tip" bindtap="copy" data-copy="meng674782630">
                  <view>We.chat</view>:
                  <text>meng674782630</text>
            </view>
            <view class="tip" bindtap="copy" data-copy="护网专题信息安全知识竞答">
                  <view>小.程.序</view>:
                  <text>护网专题信息安全知识竞答</text>
            </view>
      </view>
</view>

页面样式

在about.wxss中，编写样式代码：

page {
      background: #fff;
}
 
.top_contain {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      padding: 20rpx 36rpx 30rpx 0;
      background: url(https://7072-pro-4258f6-1258207985.tcb.qcloud.la/index1.jpg?sign=8f9ea11ad30c0607c60d16d4fab4368d&t=1677080243) center center no-repeat;
      min-height: 206rpx;
      position: relative;
      justify-content: flex-end;
}
 
.des_contain {
      width: 618rpx;
      height: 157rpx;
      border-radius: 10rpx;
      background: #fff;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      justify-content: center;
      padding: 0 0 0 90rpx;
}
 
.name {
      font-size: 36rpx;
      line-height: 50rpx;
}
 
.sign {
      margin-top: 10rpx;
      font-size: 28rpx;
      letter-spacing: 3rpx;
      line-height: 45rpx;
      color: #b8b8b8;
}
 
.avator_box {
      position: absolute;
      left: 0rpx;
      top: 0rpx;
      display: flex;
      padding: 44rpx 0 0 40rpx;
}
 
.avator {
      box-shadow: 0 0 10rpx #b8b8b8;
      width: 110rpx;
      height: 110rpx;
      border-radius: 20rpx;
}
 
.contain {
      width: 100%;
      background: #fff;
      display: flex;
      flex-direction: column;
      padding: 0 20rpx;
      box-sizing: border-box;
}
 
.title {
      margin-top: 20rpx;
      line-height: 56rpx;
      padding-left: 20rpx;
      font-size: 32rpx;
      letter-spacing: 3rpx;
      color: #000;
}
 
.description {
      width: 100%;
      padding: 24rpx 30rpx;
      background: #f1f1f1;
      border: 2rpx solid #ddd;
      border-radius: 10rpx;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
}
 
.description text {
      width: 100%;
      font-size: 28rpx;
      line-height: 44rpx;
      letter-spacing: 3rpx;
}
 
.tip {
      display: flex;
      align-items: center;
}
 
.tip view {
      font-size: 30rpx;
      letter-spacing: 2rpx;
      padding: 15rpx 0;
      width: 150rpx;
      display: flex;
      justify-content: space-between;
}
 
.tip text {
      margin-left:20rpx;
      font-size: 28rpx;
      color: #4685FF;
      text-decoration-line: underline;
}

注意：background里面使用的图片链接必须是远程服务器图片的链接。你可以把图片上传到云存储或图床，拿到链接。

一键复制功能

wx.setClipboardData，设置系统剪贴板的内容。调用成功后，会弹出 toast 提示"内容已复制"，持续 1.5s。

在about.js中，编写代码：

//一键复制
copy(e) {
    wx.setClipboardData({
          data: e.currentTarget.dataset.copy,
          success: res => {
                
          }
    })
}

在 WXML 中，这些自定义数据以 data- 开头，比如：

 data-copy="护网专题信息安全知识竞答" bindtap="copy"

在JS中，通过事件的逻辑处理参数接收，其实,你直接在控制台打印出来就看到详细输出了。我们使用

e.currentTarget.dataset.copy就能获取到在组件节点中附加的自定义数据。

//一键复制
copy(e) {
    console.log(e);
    console.log(e.currentTarget.dataset.copy);
}

功能预览

保存后，可以在模拟器点击操作预览效果或者手机微信扫码后操作预览。