关于页是一个展示页面，没有很多用户交互，使用到的API有复制到剪切板wx.setClipboardData，可实现单击复制。这里为增加小程序的趣味性，添加了一个swiper控件可以左右滑动图片。
.js后缀的JS脚本逻辑文件 about.js
.json后缀的JSON配置文件 about.json
.wxml后缀的WXML模板文件 about.wxml
.wxss后缀的WXSS样式文件 about.wxss
创建一个完全空的项目后，分别创建空的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({})这里想要添加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.csdn.net/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; }