WP二开

用uni-app制作首页幻灯片

银戒 · 3月18日 · 2019年 · · · 710次已读

前言

本教程为《教你用WordPress开发app(小程序)-包含所有源代码》系列教程之一。

本教程后续更新会放在:清空网络科技工作室官网

前面我们用uni-app搭建出了我们的app,但现在的app是什么内容都没有的,在这篇教程之中我将讲解怎么样制作首页幻灯片。

先看一下简易设计图:

开始

1、修改配置文件

首先我们需要在前面创建的项目根目录下面的页面配置文件中(pages.json)将导航栏背景设置为黑色,并且将头部字体颜色设置为白色。

配置完成之后代码如下:

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",//首页文件路径
			"style": {
				"navigationBarTitleText": "首页"//首页头部标题
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",//导航栏标题颜色(仅支持 black/white)
		"navigationBarTitleText": "WPApp",//导航栏默认标题
		"navigationBarBackgroundColor": "#000000;",//导航栏背景颜色,此处为黑色
		"backgroundColor": "#F8F8F8"//页面背景颜色
	}
}

2、编写首页代码

需要在首页添加幻灯片,我们这里需要用到uni-app官方的组件,具体使用方法大家可以点击链接查看:swiper

随后,依次打开目录pages>index>index.vue,而在index.vue中创建项目的时候已经有一部分代码了,这部分代码对于我们来说没什么用,所以我们先删除这些原有的代码,删除之后如下图:

删除完已有的代码之后,我们开始编写自己想要的代码,这里要在首页添加一个幻灯片功能,所以这里开始编写幻灯片代码。

在uni-app中一个页面是有三部分组成的:模板代码(视图)、js代码(数据、交互)、css代码(视图样式),这里我们先编写模板代码如下:

<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
				    <!-- 一组幻灯片代码开始,用到组件swiper -->
					<!-- indicator-dots autoplay interval……:组件相关属性,具体可以查看官网说明 -->
                    <swiper class="swiper" indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration">
                        <!-- 每组幻灯片中的子项目 1 -->
						<swiper-item>
							<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
						 <!-- 每组幻灯片中的子项目 2 -->
                        <swiper-item>
							<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
						 <!-- 每组幻灯片中的子项目 3 -->
                        <swiper-item>
							<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

其次是js代码,因为这里暂时还没有用到数据以及用户交互,所以这里就先不改变js代码,保留如下:

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

最后是css代码,如下:

<style>
	/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
	swiper-item{
		background-color: #f8f8f8;
	}
</style>

3、运行

运行到谷歌浏览器就可以看到如下效果:

最后附上整个页面的代码:

<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
				    <!-- 一组幻灯片代码开始,用到组件swiper -->
					<!-- indicator-dots autoplay interval……:组件相关属性,具体可以查看官网说明 -->
                    <swiper class="swiper" indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration">
                        <!-- 每组幻灯片中的子项目 1 -->
						<swiper-item>
							<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
						 <!-- 每组幻灯片中的子项目 2 -->
                        <swiper-item>
							<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
						 <!-- 每组幻灯片中的子项目 3 -->
                        <swiper-item>
							<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
	swiper-item{
		background-color: #f8f8f8;
	}
</style>

结束

自此,我们的客户端幻灯片就已经写好了,但你可以看到的是这并不是我们想要的幻灯片,那是因为暂时还没有进行数据交互,在下一教程中我将讲解如何利用WordPress开发幻灯片接口并且渲染到app上面。

代码仓库: https://github.com/sliverRing/uniApp-WPApp

0 条回应