WP二开

使用uni-app框架创建一个app项目

银戒 · 3月17日 · 2019年 · · · 853次已读

引言

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

需要说明的是客户端你可以使用vue、reactnative、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项目目录讲解

  1. components:组件目录
  2. pages:页面目录,一个页面一个文件夹,创建成功之后下面应该有一个index文件夹,即为首页
  3. static:资源文件目录,如图片
  4. App.vue: 应用配置,用来配置App全局样式以及监听
  5. main.js: Vue初始化入口文件
  6. manifest.json:配置应用名称、appid、logo、版本等打包信息
  7. pages.json:配置页面路由、导航条、选项卡等页面类信息
  8. uni.scss:该文件中有详细介绍,这里就不说明了

4、在谷歌浏览器中运行uni-app项目:

运行之后,应该在谷歌浏览器中显示出如图效果:

结束

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

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

1 条回应
  1. 丘八2019-3-17 · 20:58

    文章不错,非常喜欢