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

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

对于程序页效果图

对于程序布局与款式实现

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

页面布局

在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>公.z.号</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);}

性能预览

保留后，能够在模拟器点击操作预览成果或者手机微信扫码后操作预览。