使用uni-app框架创建一个app项目
引言一个app(小程序)的完成是需要两个端的,一个客户端,一个服务端,前面我们安装的WP以及开发一个简易的WP主题就是完成了服务端的准备工作(开发一个简单的WordPress主题),现在我们开始客户端的准备工作——使用uni-app框架创建一个app项目。需要说明的是客户端你可以使用vue、reactnave、ionic等其他框架,但为了大家都能看懂,并且少走一些弯路,此处我选用uni-app..
引言
一个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(小程序)-包含所有源代码
更多推荐
所有评论(0)