Analysis of uniapp entry-level nvue climbing pit record

Preface
Hello World
image Set border-radius
Set real pixel
Import external CSS
Use ttf font file
vue passes parameters when opening nvue
Imitation WeChat Moments effect

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