This tutorial is part of the WordPress and UNI-App development series, including all source code.
The introduction
The installation of WP and the development of a simple WP theme have completed the preparation of the server side. Now we will start the preparation of the client side – using the Uni-App framework to create an app project.
Note that you can use vue, ReactNative, Ionic and other frameworks for the client, but I chose Uni-App to make it easier for everyone to understand and avoid some detours.
uni-app
Uni-app is a front-end framework for cross-platform application development using vue. js. Developers write a set of code, which can be compiled to iOS, Android, H5, applets and other platforms.
For details, visit uni-App’s official website: uniapp.dcloud. IO /
Start this tutorial
1, download the official IDE: www.dcloud.io/hbuilderx.h…
2. Install IDE after downloading, open and create project:
3. After creating the project, get the project folder:
Description of uni-APP project catalogue
- Components: Component directory
- Pages: Pages directory, a page a folder, after the successful creation of the following should have an index folder, namely the home page
- Static: Directory of resource files, such as images
- App.vue: Application configuration, used to configure App global style and listening
- Main.js: Vue initialization entry file
- Manifest. json: Sets the application name, appID, logo, and version
- Pages. Json: configures page information, such as page routing, navigation bar, and tabs
- Uni. SCSS: It is explained in detail in this file but not here
4. Run uni-app project in Google Chrome:
When it runs, it should look something like this in Chrome:
The end of the
All right, so far the client is ready. If you don’t know anything, you can communicate in the comments section below. Overall the Uni-App framework is pretty easy to get started with, if you know HTML and JS and read official documentation.
Code repository: github.com/sliverRing/…
Tutorial directory