乐趣区

关于前端:答题积分小程序云开发实战界面交互篇关于程序页布局样式与逻辑交互开发

jiezi

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

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

对于程序页效果图

对于程序布局与款式实现

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

页面布局

在 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);
}

性能预览

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

退出移动版