Analysis of uniapp entry-level nvue climbing pit record

Analysis of uniapp entry-level nvue climbing pit record

Preface

uni-app is a new generation of cross-end framework produced by DCloud. It can be said to be one of the frameworks with the largest number of cross-ends. It currently supports publishing to: App (Android/iOS), H5, Mini Programs (WeChat Mini Programs/Alipay Mini Programs/Baidu Mini Programs/ByteDance Mini Programs). Similar frameworks on the market include: Taro (produced by JD.com) and Megalo (produced by NetEase).

Most of the things supported by weex are also supported in nvue, so here we will not describe in detail the related components and API calls of weex, but only describe some minor problems encountered in the actual development process.

Hello World

Start creating your first nvue page.

Directory structure:

The index.nvue code is as follows:

<template>
	<div>
        <text>{{text}}</text>
    </div>
</template>
<script>
	export default {
		data() {
			return {
				text: 'Hello World'
			}
		}
	}
</script>

In this way, the following errors may occur when running on a real machine:

The reason for this problem is that there must be a vue page in the uni-app project. There will be no problem if you create a new vue page and run it again.

image Set border-radius

In nvue, you cannot set border-radius for images. If you want to change a rectangular pattern into a circle, you need to wrap a div around the image. The code is as follows:

<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
    <image style="width: 400px;height: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/[email protected]"></image>
</div>

Set real pixel

There is only one length unit in the Weex specification: px. The total screen width is 750px. After setting the length, the Weex engine will dynamically calculate the actual length based on the width of the mobile phone screen, similar to uni-app's upx.

However, in the actual development process, you may not want such a dynamic length unit. In this case, you can use a length unit in weex 1.x version: wx. This unit is the actual pixel unit. Although the weex document does not mention it, it is still available. Of course, with the update of weex, wx may no longer support it.

Import external CSS

The common styles written in App.vue are not effective in nvue. If multiple nvue want to use common styles, external css needs to be introduced.

Due to the limitation of Weex, you cannot use @import "xxx.css" to import external CSS in the style node. You need to use the following method to import CSS:

<style src="@/common/test.css"></style>
<style>
   .test {
        color: #E96900;
   }
</style>

It should be noted that writing styles in the <style src="@/common/test.css"></style> node is not effective.

Use ttf font file

In nvue or weex, you cannot directly import font files in CSS through @font-face. You need to use the DOM module in JS to import font files. Please refer to the weex documentation:

const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
    'fontFamily': "iconfont2",
    'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

vue passes parameters when opening nvue

Since vue cannot carry parameters after the url when opening nvue, the only way to pass parameters is to use storage.

Open nvue in the vue page

uni.setStorageSync('test', 'hello');
uni.navigateTo({
    url:"/pages/nvue/nvue"
})

Get the parameters on the nvue page. When calling the uni-app API in create, it will take some time to call successfully (the latest version of the uni-app framework has fixed this problem and can call successfully without delay).

<script>
    export default {
        created() {
        	console.log("nvue created!");
            setTimeout(() => {
                uni.getStorage({
                	key:'test',
                    success: (res) => {
                    	console.log("Get the data passed from the previous page" + res.data)
                    }
                })
            },200)
        }
    }
</script>

Imitation WeChat Moments effect

During development, there is a page that needs to achieve the same effect as WeChat Moments: the overall list is arranged from top to bottom, each list is divided into two columns, with user avatars on the left and message content on the right.

When developing, the first thing that comes to mind is to use flex-direction: row; for the parent element to display the avatar and content on the left and right respectively. But there is a problem. The height of the content area cannot be expanded according to the length of the text; if the parent element uses top-down alignment, the height of the content area can be expanded by the text.

The code where the problem occurs is as follows:

<template>
    <div style="background-color: #ccc;">
        <div class="items">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>The content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down. </text>
            </div>
        </div>
        <div class="items" style="flex-direction: row;">
            <div class="headImg"></div>
            <div class="rgtBox" style="flex: 1;">
                <text>The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right.</text>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
    }
</script>
<style>
    .items {
        background-color: #fff;
        margin-bottom: 50px;
    }
    .headImg {
        width: 100px;
        height: 100px;
        background-color: #555;
    }
    .rgtBox {
        background-color: #fff;
    }
</style>

This problem should be a bug in Weex. After the height of the left element is set, if the height of the right element is not set, its maximum height is the height of the left element. The solution is to arrange the avatar and content up and down, and then set the margin-left, margin-top and min-height of the content area to achieve a similar effect.

The code is as follows:

<template>
    <div style="background-color: #ccc;flex-direction: column;">
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>A short text, a short text</text>
            </div>
        </div>
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>Here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text</text>
            </div>
        </div>
    </div>
</template>

<script>
    export default {}
</script>
<style>
    .item {
        background-color: #fff;
        margin-bottom: 50px;
    }
    .headImg {
        width: 100px;
        height: 100px;
        background-color: #555;
    }
    .rgtBox {
        width: 600px;
        min-height: 100px;
        margin-left: 130px;
        margin-top: -100px; 
        background-color: #fff;
    }
</style>

The above is the detailed analysis of the uniapp entry-level nvue pitfalls. For more information about the uniapp entry-level nvue pitfalls, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Vue uniapp realizes the segmenter effect
  • Based on vue+uniapp live broadcast project, uni-app imitates Douyin/Momo live broadcast room function
  • Detailed explanation of the difference between uniapp and vue

<<:  How to configure domestic sources in CentOS8 yum/dnf

>>:  Detailed explanation of Mysql transaction isolation level read commit

Recommend

jQuery realizes image highlighting

It is very common to highlight images on a page. ...

Summary of Linux vi command knowledge points and usage

Detailed explanation of Linux vi command The vi e...

Troubleshooting ideas and solutions for high CPU usage in Linux systems

Preface As Linux operation and maintenance engine...

Examples of some usage tips for META tags in HTML

HTML meta tag HTML meta tags can be used to provi...

Detailed usage of Vue more filter widget

This article example shares the implementation me...

MySQL 5.7.21 installation and password configuration tutorial

MySQL5.7.21 installation and password setting tut...

JavaScript Basics: Immediate Execution Function

Table of contents Immediately execute function fo...

Fixed a bug caused by scrollbar occupying space

background This bug was caused by滾動條占據空間. I check...

Detailed explanation of using Docker to build externally accessible MySQL

Install MySQL 8.0 docker run -p 63306:3306 -e MYS...

Common date comparison and calculation functions in MySQL

Implementation of time comparison in MySql unix_t...

Three JavaScript methods to solve the Joseph ring problem

Table of contents Overview Problem Description Ci...

What should I do if I can't view the source file of a web page?

Q: Whether using Outlook or IE, when you right-cl...

Detailed explanation of Linux host name modification command

Linux change hostname command 1. If you only need...