前言
本教程为教你怎么用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官方的组件，具体使用方法大家可以百度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上面。
点击查看扩展链接你可以获取源代码仓库的链接。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。