Create component templates directly with code blocks

To improve the development efficiency, HBuilderX encapsulates common uni-app codes into code blocks beginning with u. For example, enter ulist and press Enter in the template tag, and the following code will be automatically generated:

<uni-list>
	<uni-list-item title="" note=""></uni-list-item>
	<uni-list-item title="" note=""></uni-list-item>
</uni-list>

Note that the uni-list components shall be guaranteed to be under the project's components directory. A relatively simple way is to create a new project, and then select the uni ui project template, in which you can just type all the code blocks starting with u. If it is not a uni ui project template, you need to manually download the uni ui component (opens new window) into the project in the plug-in market.

The code blocks are divided into Tag code blocks and JS code blocks. If you enter uShowToast and press Enter in the script tag, the following code will be automatically generated:

uni.showToast({
	title: '',
	mask: false,
	duration: 1500
});

See the list below for the code blocks supported by uni-app.

Tag code block

• uButton
• uCheckbox
• uGrid: grid, need to refer to uni ui
• uList: list, need to refer to uni ui
• uListMedia
• uRadio
• uSwiper
• ......

Almost all kinds of components, whether built-in components or components of uni ui, have been encapsulated as code blocks. If you type u in the vue code template area of HBuilderX, the code assistant will prompt all visible lists. You can also view all of them in the left list of HBuilderX menu Tools - Code Block Settings - vue code block.

In addition to components, other common code blocks include:

• viewfor: generate a view code block with v-for loop structure
• vbase: generate a basic vue code structure

JS code block

uni api code block

• uRequest
• uGetLocation
• uShowToast
• uShowLoading
• uHideLoading
• uShowModal
• uShowActionSheet
• uNavigateTo
• uNavigateBack
• uRedirectTo
• uStartPullDownRefresh
• uStopPullDownRefresh
• uLogin
• uShare
• uPay
• ......

Almost all kinds of commonly used js api have been packaged as code blocks. If you type u in the js code of HBuilderX, the code assistant will prompt all the visible lists. You can also view all of them in the left list of HBuilderX menu Tools - Code Block Settings - js code block.

vue js code block

• vImport: import file
• ed：export default
• vData: output data(){return{}}
• vMethod: Output methods:{}
• vComponents: output components: {}

Other common js code blocks

• iff: simple if
• forr: for loop structure
• fori: for loop structure and contains i
• funn: function
• funa: anonymous functions
• rt：return true
• clog: output: "console.log ()"
• clogvar: enhanced log output, which can print out the names of variables at the same time
• ifios: platform judgment of iOS
• ifAndroid: platform judgment of Android

If the preset code block does not meet the requirements, you can customize the code block. Refer to the tutorial https://ask.dcloud.net.cn/article/35924 (opens new window)

Debug H5 with HBuilderX’s built-in browser

Open the page of the uni-app project, click the preview button in the upper right corner of HBuilderX, you can open the H5 running result in the built-in browser, or right-click to open the console for debugging.

When modifying or saving the engineering source code, the browser content on the right can be automatically refreshed.

In the HBuilderX console, logs printed by the built-in browser can be seen directly.

Open the Sources column of the console of the built-in browser, you can interrupt debugging for js.

Find the project directory in webpack under Page, you can directly find the corresponding vue page for breakpoint debugging; or search for the file name according to Ctrl+P to enter the page for debugging; You can also click on the console log information, enter the corresponding page for debugging.

Click on toolbar run -> run on the browser -> Select Chrome can also run uni-app into the browser, please refer to Run uni-app.

Debugging of App

In normal development, when the App is run in the run menu of HBuilderX, the errors on the mobile phone or the console.log information will be printed directly to the console.

If more functions are needed, such as reviewing elements and breaking point debug, the debug mode needs to be activated. From HBuilderX 2.0.3+ +, debugging on the App side has been supported.

Open debug window

Run the project correctly in HBuilderX: Run --> Run on mobile phone or simulator --> Select device, after the project starts, select the debug icon in the console below.

After the debugging window is opened correctly, the display is as follows:

Elements

After starting the debug window according to the previous step, you can see Elements.Elements mainly displays the organization structure of the current page. Currently Elements only supports nvue.

console.log output log

console.log is the most commonly used debugging method for our daily development, and of course it is indispensable in HBuilderX.

• The console.log log output of the mobile App Playground is provided on the App side. When running to the mobile App Playground or simulator, you don’t need to click the debug button. Just operate the mobile phone and the log will be output directly on the console of HBuilderX .

• For more complex logic, console in the debugging tool is recommended. After starting the debug window according to the previous step, execute the console.log method to see the printed content.

The method of viewing console.log in the window of debug is as follows:

Debug page

In the Sources (indicates 1 in the figure) column of the console of the debugging window, you can set js a breakpoint for debugging.

Find the page that needs to be debugged under uniapp (indicates 2 in the figure), click Open, and you can see the content that needs to be debugged on the right (indicates 3 in the figure). Click on the breakpoint at the line number of the code to be debugged (indicates 4 in the figure).

After that, operate on the device and enter the position of breakpoint, which can facilitate the tracking and debugging of the code.

Synchronize the breakpoints to the debugger

It is troublesome to find the code to be debugged among the numerous codes in the console. The debugging of HBuilderX also provides a convenient function, you can set breakpoints directly in the editor, and the breakpoints will be automatically synchronized to the debugging tool.

Steps: Right click the line number of the target line in the HBuilderX editor, and select "Synchronize Breakpoint to Debugger" in the right-click menu, then the debugging console will automatically open the corresponding code and mark the breakpoint at the specified line. The demonstration is as follows:

Tip

• Both vue and nvue pages support breakpoint debugging.
• Currently, only the nvue page review element is supported. The vue page temporarily not supported, and the nvue review element of the Android platform does not currently support viewing style.
• The console.log log output of the mobile App Playground is provided on the App side. When running to the mobile App Playground or simulator, you don’t need to click the debug button. Just operate the mobile App and the log will be output directly on the console of HBuilderX.
• If it is to debug the interface and regular API of App, it is recommended to compile them to the H5 side. Click the preview in the upper right corner of HBuilderX, adjust Dom in the built-in browser, and see the result immediately after saving, making debugging more convenient. The H5 side also supports various complex settings of titleNView. The only thing to pay attention to is the compatibility of css. It may be normal to use the too new css to preview on pc, but it may be abnormal on the low side Android. For details, please inquire caniuse and other websites.
• The commonly used development mode is to use the built-in browser to preview and adjust the dom on pc, and run it on the mobile App Playground to see console.log. debug is only used if there is a very complicated problem.
• webkit remote debug on the App side of uni-app can only debug the view layer, not the logic layer. Because js of uni-app does not run in webview, but in standalone jscore.
• For part of the manifest configuration that needs to be packaged to take effect, such as the third-party SDK configuration, you can package a custom running base. Run this custom base after packaging. You can run on the mobile App Playground and debug as usual. Packaging the official package will fail to run on mobile App Playground and debug.

Continuous Integration

In many companies, developers need automatic packaging or continuous integration after submitting code.

At this time, the cli version of uni-app needs to be installed on the server for release.

For the guide for the conversion between HBuilderX version and cli version, please refer to: https://ask.dcloud.net.cn/article/35750 (opens new window)

If you are publishing an App, you still need to use offline packaging (opens new window), configure the native environment to achieve continuous integration.