1. HBuilderX
Uni-app is a chinese-made compiler that you need to use to develop your app
Select the App development version of the corresponding operation of the official version and download it. After downloading, you can directly click the runnable file without installing it
2. Build projects
Open the compiler and select file “New” project “UNI-app” default template
As shown in the picture, click Create to complete the initialization of a project. You can also choose other templates to create the project, depending on the customer’s needs
3. Run the project
Click on any folder of the project, and then select Run to run to the terminal you need
If you are developing an APP, you can connect your phone with the data cable and turn on the developer mode for debugging. You can also install a phone simulator on your computer. I used the lightning simulator here, and also need to turn on the developer mode of the simulator
Developer mode
How to open the developer mode of mobile phone please baidu, here is a brief description of how to open the developer mode of mobile phone simulator
Click on the “About Tablets” version number (five clicks) to enter developer mode
Run to terminal
For ordinary tests, you only need to click “Run to Mobile Phone or Emulator” to select the corresponding emulator
If the corresponding emulator selection is not displayed, check whether developer mode is enabled, or click the project directory again and select the emulator
Custom base
If you need to test push or other functions that require CID use, you need to make a custom debug dock first
Click “Run to Mobile phone or Emulator” to customize the debug base
After the production is completed, select the base to run and click “Run to Mobile Phone or Simulator” Select the base to run “customize the debugging base
After the selection is complete, run the APP to the simulator. After the compilation is successful, the APP will be automatically installed and run in the simulator, and the run log will be output to the console
debugging
All page console logs are displayed in the console log and associated with the file print location. Debugger breakpoint debugging can also be performed in the project
If you find console logs inconvenient, you can also use the uni-app debugging tool by clicking the Debugger button in the upper right corner of the console
4. Directory structure
The initial project is minimal, starting with an introduction to the purpose of each folder and file
- .hbuilderx this is a system file automatically generated by the compiler. Like other editors, it saves local edits and Settings. Note that this file does not need to be uploaded to the code base
- Pages this is the directory where all the page files are stored
- Static This is the directory for storing static images
- Unpackage is the file generated by running the compile and does not need to be uploaded to the code base
- App.vue, main.js these two files have roughly the same functions as vue
- The manifest.json file is an application configuration file that specifies the name, icon, and permissions of the application. This file is in the root directory for projects created by HBuilderX, and in the SRC directory for projects created by CLI.
- The pages. Json file is used to configure uni-app globally, determining the path of the page file, window style, native navigation bar, native tabbar at the bottom, etc.
For details, see the official documents
Generally speaking, the real development of these directories is not enough, you can expand according to their own business, here I list some directories I need to use in my own development
uview-ui
This is a third-party component library THAT I am currently using, which can be downloaded and installed in the Uni-App plug-in market. The installation steps are as follows:
- Install the download
Plug-in market search uview to download and install
You can also download the ZIP file to decompress it
- Copy directory
Open the downloaded folder and copy the entire uView-UI folder to the project top-level directory
- configuration
The specific configuration methods are detailed in official documents and the plug-in market
components
Packaged business components can be placed in a common component directory for reuse
store
You can create this directory and create index.js if you need to use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
},
getters
})
export default store
Copy the code
Then register to use it in main.js
/ / introduce vuex
import store from './store'
const app = newVue({ ... App, store })Copy the code
common
This folder is used to store common methods, styles, third-party plug-ins, and global mixins
api
All interfaces are placed in this directory for unified management
5. Install the Node plug-in
NPM init initializes a package.json package management file in the project root directory
Then install NPM according to the plug-in you need
Use the same as in the VUE project, importing import or required in the corresponding file
6. Interface proxy
In local H5 debugging, if the background interface is cross-domain limited, then we need the front-end proxy configuration
- The manifest. Json configuration
You can add an H5 configuration to the manifest.json file
"h5" : {
"devServer" : {
"port" : 1000."disableHostCheck" : true."proxy" : {
"/baseUrl" : {
"target" : ""."changeOrigin" : true."secure" : true."ws" : true."pathRewrite" : {
"^/baseUrl" : ""
}
}
}
}
}
Copy the code
Enter the name of the background interface you want the proxy to use in target
- vue.config.js
Create a vue.config.js file in the project root directory and configure it as follows
module.exports = {
devServer: {
port: '1000'.proxy: {
'/baseUrl': {
target: ' '.ws: true.changeOrigin: true.pathRewrite: {
'^/baseUrl': ' '
}
}
}
}
}
Copy the code
If both are configured, then manifest.json is the main configuration. Compared with manifest.json configuration, I am more used to the configuration scheme of Vue and more close to the previous development mode of Vue
7. Package projects
Android packaging is relatively simple, just click publish “native APP- cloud packaging
If you don’t need to upload to the third-party app market and choose to package with a public test certificate, click on the package and wait a few minutes to generate an APK file
Push permissions
If you need to configure message Push, you can click on manifest.json to check the Push option and configure it accordingly. If you need offline message Push, you need to set the Push of various manufacturers
The android package name during configuration is the package name automatically generated during the native app-cloud packaging. The default application signature is the public certificate
BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58
8. Install and run
At this point, a simple APP project is complete. You can download your packaged APK file to your mobile phone for installation and running