和风天气ouc——about页面

最新推荐文章于 2021-06-04 03:02:06 发布

原创最新推荐文章于 2021-06-04 03:02:06 发布 · 437 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#格式

本文介绍微信小程序about关于页的开发。该页面展示为主，有复制到剪切板功能，添加swiper控件可滑动图片。阐述了代码组成，包括JS、JSON、WXML、WXSS文件，还说明了具体实现步骤，如创建项目和目录结构、进行页面配置等。

about关于页

关于页是一个展示页面，没有很多用户交互，使用到的API有复制到剪切板wx.setClipboardData，可实现单击复制。这里为增加小程序的趣味性，添加了一个swiper控件可以左右滑动图片。

代码组成

.js后缀的JS脚本逻辑文件 about.js
.json后缀的JSON配置文件 about.json
.wxml后缀的WXML模板文件 about.wxml
.wxss后缀的WXSS样式文件 about.wxss

具体实现

1. 创建项目和目录文件结构

创建一个完全空的项目后，分别创建空的app.js,app.josn,app.exss,app.wxss；

然后创建pages文件夹，在里面创建about文件夹（即我们需要做出的about页面），about文件夹中再创建四个空文件，分别为about.js，about.wxml，about.wxss，about.json；

这样就完成一个单页面微信小程序目录结构的创建；

接着我们为app.json添加代码，告诉编译器，这里有一个about页面：

{"pages":["pages/about/about"]}

这时系统会提示错误：

about/about.json Expecting
‘STRING’,‘NUMBER’,‘NULL’,‘TRUE’,‘FALSE’,‘{’,‘[’, got EOF

这是因为about.json里面不能是空，哪怕是一个空文件，我们给about.json添加一个大括号，代码如下：

{
}

现在程序就不会报错了。而微信小程序搜索页面主要通过js文件来实现，我们现在给about.js添加代码如下：

Page({})

2.页面配置

给about.json设置简单代码如下

{
   "navigationBarTItleText":"关于"
}

给about.wxml添加如下代码

<view class='about'>
 <view class = 'content'>
 </view>
</view>

这里想要添加swiper控件实现左右滑动，同时设置swiper小圆点颜色及风格。下分 “联系开发者”，“代码开源”，“鸣谢” 几个板块。
about.wxml代码如下：

  <view class='about'>
  <view class='content'
<!-- swiper控件，同时设置小圆点颜色及其他参数 -->
    <swiper indicator-color='#666666' indicator-active-color='#40a7e7' indicator-dots="true" autoplay="true" circular="true" interval="5000" duration="300" previous-margin="0px" next-margin="0px" style='height:{{swiperHeight}}'>
      <block wx:for="{{bannerImgList}}" wx:key="{{index}}">
        <swiper-item>
          <view class='info' data-index='{{index}}' catchtap='previewImages'>
            <image src='{{item.src}}'></image>
            <view class='name'>{{item.title}}</view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <!-- <ad
unit-id="adunit-da632c715ebfb1a5"></ad> -->
    <view class='item'>
     <view class='title'>代码已开源</view>
      <view class='i' catchtap='copy' data-title='项目地址' data-content='{{projectAddress}}'>
        <view class='icon'>
          <image src='/img/github.png'></image>
        </view>
        <view class='text'>
          <view>可随意 star</view>
          <view>{{projectAddress}}</view>
        </view>
      </view>
    </view>
    <view class='item'>
      <view class='title'>联系开发者</view>
      <view class='i' catchtap='copy' data-title='GitHub' data-content='{{github}}'>
        <view class='icon'>
          <image src='/img/github.png'></image>
        </view>
        <view class='text'>
          <view>通过 优快云 反馈</view>
          <view>{{优快云}}</view>
        </view>
      </view>
      <view class='i' catchtap='copy' data-title='邮箱' data-content='{{email}}'>
        <view class='icon'>
          <image src='/img/email.png'></image>
        </view>
        <view class='text'>
          <view>通过 Email 反馈</view>
          <view>{{email}}</view>
        </view>
      </view>
      <view class='i' catchtap='copy' data-title='QQ' data-content='{{qq}}'>
        <view class='icon'>
          <image src='/img/qq.png'></image>
        </view>
        <view class='text'>
          <view>通过 QQ 反馈</view>
          <view>{{qq}}</view>
        </view>
      </view>
    </view>
    <view class='thanks item'>
      <view class='title'>鸣谢</view>
      <view class='i'>
        <view class='icon'>
          <image src='/img/weather.png'></image>
        </view>
        <view class='text'>气象数据来源：和风天气</view>
      </view>
    </view>
  </view>
  <view class='footer'>开发者 · ouc_group</view>
</view>

同时swiper控件的完成还需要在about.js中添加相应代码
这里需要实现图片自动滑动，在about.js中添加了swiperHeight：‘auto’，同时需要滑动的图片和图片说明，以及完成复制后的系统提示“已复制${title}“。代码如下：

 let utils = require('../../utils/utils')
 Page({
 ata: {
      projectAddress: 'https://github.com/wangsenouc/weather',
      优快云: 'https://blog.youkuaiyun.com/weixin_43074474'
      email: '515675000@qq.com',
      qq: '515675000',
      swiperHeight: 'auto',
      bannerImgList: [
       {
         src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3024264195,1244669597&fm=26&gp=0.jpg',
         title: '我爱学习',
       },
       {
         src: '/img/study.jpg',
         title: '去学习',
       },
       {
         src: '/img/ouc.jpg',
         title: '期末高分',
       },
     ],
   },
   onLoad() {
     this.initSwiper()
   },
   previewImages(e) {
     let index = e.currentTarget.dataset.index || 0
     let urls = this.data.bannerImgList
     let arr = []
     let imgs = urls.forEach(item => {
       arr.push(item.src)
     })
     wx.previewImage({
       current: arr[index],
       urls: arr,
       success: function (res) { },
       fail: function (res) {
         console.error('previewImage
fail: ', res)
       }
     })
   },
   initSwiper() {
     let systeminfo = getApp().globalData.systeminfo
     if (utils.isEmptyObject(systeminfo)) {
       wx.getSystemInfo({
         success: (res) => {
           this.setSwiperHeight(res)
         },
       })
     } else {
       this.setSwiperHeight(systeminfo)
     }
   },
   setSwiperHeight(res) {
     this.setData({
       swiperHeight: `${(res.windowWidth || res.screenWidth) / 375 * 200}px`
     })
   },
   copy(e) {
     let dataset = (e.currentTarget || {}).dataset || {}
     let title = dataset.title || ''
     let content = dataset.content || ''
     wx.setClipboardData({
       data: content,
       success() {
         wx.showToast({
           title: `已复制${title}`,
           duration: 2000,
         })
       },
     })
   },
 })

最后，通过about.wxss设置样式

.about {
  font-size: 30rpx;
  color: #666;
  /* padding: 0 40rpx 40rpx; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
swiper {
  background: #fff;
  margin-bottom: 20rpx;
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #333;
  padding: 60rpx 40rpx;
}
.info image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-bottom: 30rpx;
}
.item {
  line-height: 2.2em;
  padding: 0 40rpx;
  overflow: hidden;
  background: #fff;
  margin-bottom: 20rpx;
}
.item .title {
  font-size: 32rpx;
  color: #40a7e7;
  margin: 26rpx 0;
}
.item .i {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  padding-bottom: 16rpx;
}
.i .icon {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 2.2em;
}
.attention .i {
  margin-left: 0;
}
.i image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
}
.feedback .text {
  position: relative;
  z-index: 1;
}
.feedback .btn {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 1;
  opacity: 0;
}
.footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80rpx;
  font-size: 22rpx;
  color: #333;
}