uni-app快速上手 | uni-app (2024)

# uni-app快速上手

uni-app supports visual interface, [vue-cli command line](https://uniapp.dcloud.io/quickstart?id=%e9%80%9a%e8%bf%87vue-cli% e5%91%bd%e4%bb%a4%e8%a1%8c) There are two ways to quickly create a project.

# 1. Visual interface through HBuilderX

The visualization method is relatively simple. HBuilderX has a built-in related environment, which can be used out of the box without configuring nodejs.

Before starting, developers need to download and install the following tools:

• HBuilderX: Official IDE download address

HBuilderX is a general-purpose front-end development tool, but specially hardened for uni-app.

Download the development version of the app, which can be used out of the box; if you download the standard version, when running or issuing uni-app, you will be prompted to install the uni-app plug-in, and the plug-in can be used after the download is complete.

If you use the cli method to create a project, you can download the standard version directly, because the uni-app compilation plugin is installed under the project.

# create uni-app

Click File -> New -> Project in the toolbar:

Select the uni-app type, enter the project name, select a template, and click Create to create it successfully.

The template that comes with uni-app is Hello uni-app , which is the official component and API example. Another important template is the uni ui project template, which is recommended for daily development, and has built-in a large number of common components.

# run uni-app

1. Browser operation: Enter the hello-uniapp project, click Run on the toolbar -> Run to the browser -> Select the browser, you can experience the H5 version of uni-app in the browser.

   

2. Real machine operation: connect the mobile phone, enable USB debugging, enter the hello-uniapp project, click Run on the toolbar -> Real machine operation -> select the running device, you can experience the uni-app in the device.

   

   If the mobile phone cannot be recognized, please click the menu to run - run to mobile phone or emulator - common troubleshooting guide for real machine operation.注意目前开发App也需要安装微信开发者工具。

   See Also

   uni.chooseImage(OBJECT) | uni-app

3. Run in WeChat Developer Tools: Enter the hello-uniapp project, click Run on the toolbar -> Run to Mini Program Simulator -> WeChat Developer Tools, you can experience uni-app in WeChat Developer Tools.
   

   

   **注意：**如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

   uni-app compiles the project to the unpackage directory of the root directory by default.
   

   

4. Run in the Alipay applet developer tool: enter the hello-uniapp project, click Run on the toolbar -> run to the applet simulator -> Alipay applet developer tool, you can find it in the Alipay applet developer tool Experience uni-app.
   

   

5. Run in Baidu Developer Tools: Enter the hello-uniapp project, click Run on the toolbar -> Run to Mini Program Simulator -> Baidu Developer Tools, you can experience uni-app in Baidu Developer Tools.
   

   

6. 在抖音开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 抖音开发者工具，即可在抖音开发者工具里面体验uni-app。
   

   

7. Import in 360 development tools: Enter the hello-uniapp project, click Run on the toolbar -> Run to the applet simulator -> 360 development tools, you can experience uni-app in the 360 development tools.
   

   

8. Run in the quick app alliance tool: enter the hello-uniapp project, click Run on the toolbar -> run to the applet simulator -> quick app alliance tool, you can experience uni-app in the quick app alliance tool.
   

   

9. Run in Huawei Developer Tools: Enter the hello-uniapp project, click Run on the toolbar -> Run to Mini Program Simulator -> Huawei Developer Tools, you can experience uni-app in Huawei Developer Tools.
   

   

10. Run in the QQ applet development tool: the content is the same as above, and will not be repeated.

Tips

• 如果是第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
• 支付宝/百度/抖音/360小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开。
• If the automatic startup of the applet development tool fails, please manually start the applet development tool and open the project with the project path prompted by the HBuilderX console.

The shortcut key to run is Ctrl+r.HBuilderX also provides a quick run menu, you can quickly select the device to run by number:

如需调试，可参考：uni-app调试

# Publish uni-app

# Packaged as native App (cloud)

On the HBuilderX toolbar, click Release and select Native App-Cloud Packaging, as shown below:

The following interface appears, click Package.

# Package as native App (offline)

uni-app supports offline packaging, generate offline packaging resources in the HBuilderX release menu, and then refer to the offline packaging documentation operation, you can find the documentation link from the HBuilderX release menu, or you can directly visit: https://nativesupport .dcloud.net.cn/AppDocs/README.

On the HBuilderX toolbar, click Release, select local packaging, as shown in the figure below, click to generate offline packaging resources.

# Publish as H5

1. In the visual interface of manifest.json, perform the following configuration (the application base path may not be configured in the root directory of the website), at this time, the path of the issuing website is www.xxx.com/h5, such as: https:/ /hellouniapp.dcloud.net.cn.
2. On the HBuilderX toolbar, click Release, select Website-H5 Mobile Version, as shown in the figure below, click to generate H5 related resource files and save them in the unpackage directory.

Notice

• history mode release requires background configuration support, see: [Backend configuration of history mode](https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90% 8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90)
• After packaging and deployment, enable gzip on the server to further compress files. For specific configuration, please refer to the online sharing: https://juejin.im/post/5af003286fb9a07aac24611b

# Publish as applet

Published as a WeChat applet:

1. To apply for a WeChat Mini Program AppID, refer to: [WeChat Tutorial](https://developers.weixin.qq.com/miniprogram/dev/#%E7%94%B3%E8%AF%B7%E5%B8%90 %E5%8F%B7).
2. Click "Release" => "Mini Program-WeChat" in the top menu of HBuilderX, enter the applet name and appid and click Release to generate a WeChat applet project in unpackage/dist/build/mp-weixin code.
3. In the WeChat applet developer tool, import the generated WeChat applet project, and after the test project code runs normally, click the "Upload" button, and then follow the "Submit for Review" => "Publish" applet standard process, step by step That's it, check it out in detail: WeChat Official Tutorial.

Published as a Baidu applet:

1. Enter the Mini Program and apply for the Baidu Mini Program AppID, refer to: Baidu Mini Program Tutorial.
2. Click "Release" => "Mini Program-Baidu" in the top menu of HBuilderX, enter the applet name and appid and click Release to generate Baidu applet at /unpackage/dist/build/mp-baidu project code.
3. In the Baidu applet developer tool, import the generated Baidu applet project, and after the test project code runs normally, click the "Upload" button to upload the code, and then upload the code in the Baidu applet's [Management Center](https://smartprogram .baidu.com/developer/applist.html) Select the created app and click Go to Publish, select the corresponding version and submit it for review.

Published as Alipay applet:

1. Enter the Alipay applet, refer to: Alipay applet tutorial.
2. Click "Issue" => "Mini Program-Alipay" in the top menu of HBuilderX, and you can generate the Alipay Mini Program project code in /unpackage/dist/build/mp-alipay.
3. In the Alipay applet developer tool, import the generated Alipay applet project, and after the test project code is running normally, click the "Upload" button to upload the code, and in the [Alipay applet background](https://open.alipay. com/platform/mini.htm#/app), select the version just submitted and click Submit for review, see: Alipay Mini Program Documentation.

发布为抖音小程序：

1. 入驻抖音小程序，参考：抖音小程序教程。
2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-抖音"，即可在 /unpackage/dist/build/mp-toutiao 生成抖音小程序项目代码。
3. 在抖音小程序开发者工具中，导入生成的抖音小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 抖音小程序后台，选择刚提交的版本点击提交审核，详见：抖音小程序文档。

Published as 360 applet:

1. Enter the 360 Mini Program, refer to: 360 Mini Program Tutorial.
2. Click "Release" => "Mini Program-360" in the top menu of HBuilderX, and you can generate the 360 Mini Program project code in /unpackage/dist/build/mp-360.
3. In the 360 browser, import the generated 360 applet project

Notice

• Currently only supported on windows platform. 360 browser itself does not support the mac platform.

Published as a quick application (webview):

1. Enter the Quick App (webview), refer to: Quick App (webview) Tutorial.
2. Click "Release" => "Quick App Alliance" in the top menu of HBuilderX, and then you can generate the quick app (webview) project code in /unpackage/dist/build/quickapp-webview.
3. In the Quick App Alliance tool, import the generated Quick App Alliance project, and after the test project code is running normally, click "Build" to package the official version, and in the Quick App Alliance background upload

Published as Quick App (webview) - Huawei:

1. Enter Huawei Quick App, refer to: Huawei Quick App Tutorial.
2. On the top menu of HBuilderX, click "Release" => "Quick App-Huawei" to generate Huawei Quick App project code in /unpackage/dist/build/quickapp-webview.
3. In the Huawei Developer Tools, import the generated Huawei Quick App project, and after the test project code runs normally, click "Build" to package the official version, and in the [Huawei Quick App Background](https://developer.huawei.com/ consumer/cn/quickApp) upload

Published as QQ applet:The content is the same as above and will not be repeated.

The published shortcut is Ctrl+u. Also pull down the quick release menu and press the number keys to select.

In addition to the HBuilderX visual interface, cli scaffolding can also be used, and uni-app projects can be created through vue-cli.

# Environment installation

Install vue-cli globally

npm install -g @vue/cli

# create uni-app

Use the official version (corresponding to the latest official version of HBuilderX)

vue create -p dcloudio/uni-preset-vue my-project

使用Alpha版（对应HBuilderX最新Alpha版）

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

At this point, you will be prompted to select a project template. It is recommended to select the hello uni-app project template for the first experience, as shown below:

# custom template

When choosing a custom template, you need to fill in the uni-app template address, which is actually the address of the warehouse hosted in the cloud. Take GitHub as an example, the address format is userName/repositoryName, such as dcloudio/uni-template-picture is to download the picture template.

For more supported download methods, please refer to the description of this plugin: download-git-repo

# Modify the dependency to the specified version

1. Check the NPM dependency version corresponding to HBuilderX: Open the NPM version record, the version number 2.0.0- is followed by the The version number corresponding to HBuilderX and the minor version will not exceed 9. For example, the version number corresponding to HBuilderX 2.7.5.20200518 is 2.0.0-27520200518001, and the version number corresponding to 2.0.0-271420200618 is 2.0.0-27920200618002.

2. Batch modify the uni-related dependencies in package.json to the specified version number (remove the ^ in front of the version number).

3. Add or delete dependencies that have changed. If you are prompted that there is no specified version of the dependency, you can keep the original version or delete it. At runtime, you will be prompted to install the missing dependencies by yourself.

# Run, publish uni-app

npm run dev:%PLATFORM%npm run build:%PLATFORM%

%PLATFORM% can take the following values:

You can customize more conditional compilation platforms, such as DingTalk applet, refer to package.json document .

# Run and publish the quick app

There are two development methods for quick apps, both of which are supported by uni-app:

• Small program webview rendering method: https://ask.dcloud.net.cn/article/37182
• Native rendering method: https://ask.dcloud.net.cn/article/37145

# Run and publish the quick app (webview)

HBuilderX version 2.7.12+ support

# Run and publish a quick app (webview) - Huawei

HBuilderX version 2.7.10+ support

Huawei Quick App Documentation - Mini Program Quick App [https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-filestructure](https://developer.huawei.com/consumer/ cn/doc/development/quickApp-References/quickapp-filestructure)

other:

• Currently, using npm run build:app-plus will generate app packaging resources under /dist/build/app-plus. To make a wgt package, compress the files in app-plus into a zip (note: do not include the app-plus directory), rename it to ${appid}.wgt, and appid to manifest appid in the .json` file.
• The code of each platform compiled in dev mode is stored in the /dist/dev/ directory in the root directory. Open the development tools of each platform and select the corresponding platform directory to preview (the h5 platform will not be in this directory, it exists in in the cache);
• The code of each platform compiled in build mode is stored in the /dist/build/ directory under the root directory, and this directory is selected for publishing when publishing;
• Differences between dev and build modes:
  1. In dev mode, there is SourceMap for easy breakpoint debugging;
  2. build 模式会将代码进行压缩，体积更小更适合发布为正式版应用；
  3. 进行 环境判断 时，dev 模式 process.env.NODE_ENV 的值为 development，build 模式 process.env.NODE_ENV 的值为 production。

# What is the difference between creating a project using cli and creating a project using the HBuilderX visual interface

# Compiler differences

• The project created by cli, the compiler is installed under the project. And will not follow the HBuilderX upgrade. To upgrade the compiler, execute npm update, or manually modify the version of uni-related dependencies in package.json and execute npm install. After the update, there may be new dependencies that will not be installed automatically. You can manually install the missing dependencies.
• The project created by the HBuilderX visual interface, the compiler is in the plugin directory under the HBuilderX installation directory, and the compiler will be automatically upgraded with the upgrade of HBuilderX.
• If you want to continue using the project created by cli in HBuilderX, you can drag the project to HBuilderX. Note that if the entire project is dragged into HBuilderX, the compiler under the project is used when compiling. If the src directory is dragged into HBuilderX, the compiler in the plugin directory under the HBuilderX installation directory is used.
• cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

# Differences in development tools

• Projects created by cli have built-in d.ts, like other regular npm libraries, which can be found in vscode, webstorm and other development tools that support d.ts are normally developed and have syntax prompts.
• Projects created with HBuilderX do not have d.ts, and HBuilderX has a built-in uni-app syntax hint library. If you want to open the project created by HBuilderX in other editors and add d.ts, you can execute npm init under the project, then npm i @types/uni-app -D, to supplement d.ts .ts.
• But other development tools such as vscode, in the field of vue or uni-app, are less efficient than HBuilderX. For details, see: https://ask.dcloud.net.cn/article/35451
• You still need to use HBuilderX when publishing your app. Other development tools cannot publish apps, but they can publish H5 and various small programs. If you need to develop an App, you can run it in HBuilderX first, and then modify and save the code in other editors. After the code is modified, it will be automatically synchronized to the mobile phone base.
• If you use cli to create a project, you only need to download the 10M standard version when downloading HBuilderX. Because the compiler has been installed under the project.
• If you have any questions about the use of cli, please scan the code to join the uni-app WeChat exchange group discussion:
  

Note: Projects created by HBuilderX can also use npm, reference: https://uniapp.dcloud.io/frame?id=npm%e6%94%af%e6%8c%81