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:

  1. Install the download

Plug-in market search uview to download and install

You can also download the ZIP file to decompress it

  1. Copy directory

Open the downloaded folder and copy the entire uView-UI folder to the project top-level directory

  1. 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

  1. 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

  1. 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