引言

一个app(小程序)的完成是需要两个端的,一个客户端,一个服务端,前面我们安装的WP以及开发一个简易的WP主题就是完成了服务端的准备工作(开发一个简单的WordPress主题),现在我们开始客户端的准备工作——使用uni-app框架创建一个app项目。

需要说明的是客户端你可以使用vue、reactnave、ionic等其他框架,但为了大家都能看懂,并且少走一些弯路,此处我选用uni-app。

uni-app

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

具体介绍查看uni-app官网:https://uniapp.dcloud.io/

教程开始
1、下载官方IDE:http://www.dcloud.io/hbuilderx.html
在这里插入图片描述
2、IDE下载完成之后安装,打开并创建项目:
在这里插入图片描述
在这里插入图片描述
3、创建项目完成之后得到项目文件夹:
在这里插入图片描述
uni-app项目目录讲解
components:组件目录
pages:页面目录,一个页面一个文件夹,创建成功之后下面应该有一个index文件夹,即为首页
static:资源文件目录,如图片
App.vue: 应用配置,用来配置App全局样式以及监听
main.js: Vue初始化入口文件
manifest.json:配置应用名称、appid、logo、版本等打包信息
pages.json:配置页面路由、导航条、选项卡等页面类信息
uni.scss:该文件中有详细介绍,这里就不说明了

4、在谷歌浏览器中运行uni-app项目:
在这里插入图片描述
运行之后,应该在谷歌浏览器中显示出如图效果:
在这里插入图片描述

结束

好了,至此客户端的准备工作就已经完成,如果有什么不懂的地方可以在下方评论区交流。总的来说uni-app框架上手还是很快的,如果你会html和js并且多看看官方文档基本上没什么难度。
教你用WordPress开发app(小程序)-包含所有源代码

Logo

前往低代码交流专区

更多推荐