本教程是教你如何使用WordPress开发自己的app(小程序)
已经说过了：
WordPress安装-让你快速拥有自己的网站
开发一个简单的WordPress主题
使用uni-app框架创建您自己的应用程序。
我们用uni-app构建了我们的app，但是现在app什么都没有了，所以我会在本教程中解释如何制作前面的幻灯片。
先看看简单的设计：
1、修改配置文件
首先，我们需要在之前创建的项目的根目录下的页面配置文件(pages.json)中将导航栏的背景设置为黑色，页眉的字体颜色设置为白色，如图：
代码如下：
{ ' pages ' ://pages数组中的第一项表示应用程序启动页面，请参考：https://uniapp.dcloud.io/collocation/pages{'path':' pages/index/index '，//Home文件路径' style' 3360 { '导航栏标题文本' 3360 '主页'//主页标题标题}}，' globalstyle' 3360 { '导航栏文本样式' 3360 '白色'，//导航栏标题颜色(仅支持黑/白)'导航栏标题文本' 3360' WP app '，//导航栏默认标题，//导航栏的背景色，这里是黑色' background color ' 3360 ' # F8 F8 f 8 '//Page background color } }2、编写首页代码
我们需要在主页上添加幻灯片。这里需要用到uni-app的官方组件。具体用法可以查看百度uni-app组件swiper。
然后，依次打开目录pagesindexindex.vue，在index.vue中创建项目时，已经有一部分代码了。这部分代码对我们来说是没用的，所以我们先删除这些原始代码，删除后如下图所示：
删除现有代码后，我们开始写我们想要的代码。这里，我们需要在首页添加一个幻灯片功能，所以我们从这里开始写幻灯片代码。
在uni-app中，一个页面由三部分组成：模板代码(视图)、js代码(数据、交互)和css代码(视图样式)。在这里，我们首先编写如下模板代码：
模板视图view class=' uni-padding-wrap ' view class=' page-section swiper ' view class=' page-section-spacing '！-一组滑动代码开始，使用组件swiper -！-指示器-点自动播放间隔.....................-每组幻灯片中的子项目1-Swiper-item！-把内容放在这里，可以是图片，也可以是带文字的图片- /swiper-item！-每组幻灯片中的子项目2-Swiper-item！-把内容放在这里，可以是图片，也可以是带文字的图片- /swiper-item！-每组幻灯片中的子项目3-Swiper-item！-把内容放在这里，可以是图片或者图片加文字-/swiper-item/swiper/view/view/template，后面是js代码。因为这里还没有使用数据和用户交互，所以我们不会更改这里的js代码，而是保持如下：
Scriptexport默认{data () {return {}}，onload () {}，methods : { }/script是末尾的css代码，如下：
Style/*在我们的设计中将这组幻灯片中的子项更改为灰色*/wiper-item { background-color : # f8f8f 8；}/3、运行风格
运行到谷歌Chrome，可以看到以下效果：
最后附上整个页面的代码：
模板视图view class=' uni-padding-wrap ' view class=' page-section swiper ' view class=' page-section-spacing '！-一组滑动代码开始，使用组件swiper -！-指示器-点自动播放间隔.....................-每组幻灯片中的子项目1-Swiper-item！-把内容放在这里，可以是图片，也可以是带文字的图片- /swiper-item！-每组幻灯片中的子项目2-Swiper-item！-把内容放在这里，可以是图片，也可以是带文字的图片- /swiper-item！-每组幻灯片中的子项目3-Swiper-item！-将内容放在此处，内容可以是图片，也可以是带文本的图片-/swiper-item/swiper/view/view/view/template script export default { data(){ return { }，onload () {}，methods : { }/script style/*在我们的设计中，将这组幻灯片中的子项目更改为灰色*/wiper-item { background-color 3360 # F8 F8 f 8；}/style
从那以后，我们的客户端幻灯片已经写好了，但是你可以看到这不是我们想要的幻灯片，因为还没有数据交互。在接下来的教程中，我会讲解如何用WordPress开发幻灯片放映界面，并渲染到app上。
单击扩展链接以获得源代码库的链接。
