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>通过 CSDN 反馈</view><view>{{CSDN}}</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',CSDN: '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 || 0let urls = this.data.bannerImgListlet 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.systeminfoif (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;
}

和风天气ouc——about页面相关推荐

微信小程序-小程序天气页面对接和风天气API实例
一.前言展示最近开发小程序发现需要植入一个天气系统,在网上找了好久实例,发现很多都是不太好看的,或者发不出来的也用不了,最后我只能自己动手写出来的一个页面,现在分享出来给大家,希望能给到你们帮助! ...
华美天气（数据来源：和风天气 API）
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
domoticz添加和风天气与彩云天气
上一次我在domoticz中嵌入和风api H5页面,是因为和风api的json格式解析不对,但是我不死心,今天终于弄明白了!!,在这里记录一下. 和风天气API格式彩云天气API格式分别在dom ...
domoticz添加和风天气，让domoticz显示天气信息
1.domoticz添加天气信息 domoticz中可以很方便的通过dark sky api显示天气信息,但是dark sky的信息不太准确,想添加国内天气的信息,网上的都是通过彩云的api获取jso ...
java获取和风天气_SpringMVC结合天气api实现天气查询
本实例实现在jsp页面实现查询全国城市天气预报的功能,供大家参考,具体内容如下实例目录: 实现效果: 具体思路: 从和风天气api那里取得具体城市的api接口,获取json数据,再对json数据进行 ...
（更新源码）AndroidStudio新手开发：天气app（百度地图api+和风天气api+城市查询+折线展示）
AndroidStudio新手开发:天气app(百度地图api+和风天气api+城市查询+折线展示) 1.内容简介 2.环境配置 3.导入他人demo 4.AS项目分析 5.天气项目流程 6.数据探寻 ...
使用和风天气 API 10分钟搭建天气预报数据看板
本文首发:<使用和风天气 API 10分钟搭建天气预报数据看板)> 使用和风天气 API 10分钟搭建天气预报数据看板第 1 步:注册和风天气 API 及卡拉云 (1)注册和风天气 AP ...
和风天气API接口调用
今天闲来无事,搞点没啥用的东西.最近天气大热,突然想搞个天气API玩玩. 在网上一番查找发现了几个免费的天气API 1.和风天气API 点击直达免费可调用,需要注册. 2.免费天气API接口-看云 ...
【微信小程序】使用和风天气接口api（全过程）——获取天气
介绍这里是小编成长之路的历程,也是小编的学习之路.希望和各位大佬们一起成长! 以下为小编最喜欢的两句话: 要有最朴素的生活和最遥远的梦想,即使明天天寒地冻,山高水远,路远马亡. 一个人为什么要努力? ...

和风天气ouc——about页面